Herring Cove
javascript的继承实现-封装（2）

  01 Jun 2017

javascript是一种基于对象的语言，你遇见的所有东西基本上都是对象，但是他又不是一门面向对象的语言，因为他语法中没有class。

生成实例对象的原始模式

例如我们把草泥马看成一个对象，他有name和color属性

var caonima={
name:"",
color:""
}

现在我们根据这个原型对象的规格生成两个实例对象。

var c1={};//创建一个空对象
c1.name="大毛";//根据原型对象的属性赋值
c1.color="黄色";
var c2={};//创建一个空对象
c2.name="二毛";//根据原型对象的属性赋值
c2.color="黑色";

这就是最简单的封装了，把两个属性封装到一个对象里面，这样的写法缺点很明显，写起来很麻烦，实例对象和原型对象看不出来有什么联系。

原始模式的改进

在之前的背景下进行改进，我们可以写一个函数解决代码重复的问题.

function caonima(name,color){
   return{
   name:name
   color:color
   }
}

然后实例化对象，就相当于调用函数

var c1=caonima("大毛","黄色")
var c1=caonima("二毛","黑色")

这种方式依然有个问题：那就是无法看出c1 和c2 是有内在联系的，不能看出他们是同一个原型对象的实例。

构造函数模式

为了解决从原型对象生成实例的问题，JavaScript提供了一个构造函数模式（constructor）所谓的构造函数其实就是一个普通函数，只是其内部用了 this 变量，对构造函数使用new 运算符就能实例化对象，并且this 变量会绑定在实例对象上。此时草泥马的原型对象可以这样写:

function caonima(name,color){
this.name=name;
this.color=color;
}

我们现在可以生成实例对象了

var c1=new caonima("大毛","黄色")
var c2=new caonima("二毛","黑色")
alert(cat1.name); // 大毛 　　alert(cat1.color); // 黄色

此时实例化对象c1 c2 会有一个 constructor 属性指向他们的构造函数。

alert(c1.constructor==caonima)//true
alert(c2.constructor==caonima)//true

此外 javascript 还提供了 instanceof 验证原型对象和实例对象之间的关系(由此instanceof 常用来判断引用类型的数据类型)

alert(c1 instanceof caonima)//true
alert(c2 instanceof caonima)//true

isPrototypeOf()这个方法用来判断，某个proptotype对象和某个实例之间的关系。

　　alert(Cat.prototype.isPrototypeOf(cat1)); //true 　　alert(Cat.prototype.isPrototypeOf(cat2)); //true

hasOwnProperty()每个实例对象都有一个hasOwnProperty()方法，用来判断某一个属性到底是本地属性，还是继承自prototype对象的属性。

　　alert(cat1.hasOwnProperty(“name”)); // true 　　alert(cat1.hasOwnProperty(“type”)); // false

构造函数模式的问题

参见javascript 的继承（一）中为何引入prototype Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。 这意味着，我们可以把那些不变的属性和方法，直接定义在prototype对象上。

　　function caonima(name,color){ 　　　　this.name = name; 　　　　this.color = color; 　　} caonima.prototype.type = “犬科动物”; caonima.prototype.eat = function(){alert(“吃草”)};

然后，生成实例。

var cat1 = new Cat("大毛","黄色");
var cat2 = new Cat("二毛","黑色");
alert(cat1.type); // 猫科动物
cat1.eat(); // 吃老鼠

这时所有实例的type属性和eat()方法，其实都是同一个内存地址，指向prototype对象，因此就提高了运行效率。

　　alert(cat1.eat == cat2.eat); //true

(此处可引申到引用类型复制问题 以及 2017-03-12-jquery_extend.md)

var a={name:"zx",age:"25"};
var b=a;
b.name="tdx";
alert(b.name);//tdx
alert(a.name);//?

JS中引用类型使用等号“=” 赋值，相当于把原来对象的地址指向新的对象，这样原来旧的对象与新的对象就指向同一个地址，改变其中一个对象就会影响另外那个对象，也就是所谓的浅拷贝。

01 Jun 2017