js中的面向对象(一)封装

1.简单的封装(定义)

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

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

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

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

本文参考: 阮一峰的博客

 谢谢大家关注,小的将不屑努力!!! <maqingyuan>

原文地址:https://www.cnblogs.com/maqingyuan/p/8820641.html