js中的面向对象（一）封装

1.简单的封装（定义）

var cat1 = {};
    cat1.name = '阿黄';
    cat1.sex = '男';
    cat1.age = 11;
    //cat2也同样具有三个属性
    var cat2 = {};
    cat2.name = '小黑';
    cat2.sex = '女';
    cat2.age = '10';

把cat1和cat2看成是一个对象，ta们都具有三个属性。

缺点：一时如果有多个对象，写起来就比较麻烦，二是实例和原型之间没有任何联系；

2.原始模型封装（在1的基础上进行改进）

function Cat(name,sex,age){
        return {
            name:name,
            sex:sex,
            age:age
        }

    }
    var cat1 = Cat('小黄','男','11');
    var cat2 = Cat('小黑','女','10');
    alert(cat1.name);

缺点：cat1和cat2没有什么内在联系，不能反应他们是同一原型对象的实例

3.构造函数的封装

function Cat(name,age,sex){
    this.name = name;
    this.sex = sex;
    this.age = age;
}
var cat1 = new Cat('小黄','男','11');
var cat2 = new Cat('小黑','女','10');

表面上是没有什么缺点，但是如以下代码

function Cat(name,age,sex){
    this.name = name;
    this.sex = sex;
    this.age = age;
    this.type = '猫科动物';
}
var cat1 = new Cat('小黄','男','11');
var cat2 = new Cat('小黑','女','10');

cat1和cat2都是属于猫科动物，但是在创建对象原型Cat的实例cat1和cat2时都会创建一次type属性；这样就会造成内存的浪费。

4.prototype模式

function Cat(name,sex,age){
    this.name = name;
    this.sex = sex;
    this.age = age;
}
Cat.prototype.type = '猫科动物';
Cat.prototype.say = function (){alert("喵喵");};
var cat1 = new Cat();
alert(cat1.type);

 

原理：Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。

个人理解是将相同的属性“放在”一个内存之中，当创建cat1和cat2实例时，他们的属性都会指向同一个内存，从而不用重复创建。

prototype验证

1)isPrototypeOf

2)hasOwnProperty

3)in

本文参考

阮一峰的博客

 

转载于:https://www.cnblogs.com/facous/p/6040380.html