理解Javascript的Prototype

在Javascript中创建对象主要分为三种方式

1、

var catA = {name: "Fluffy", color: "White", age: 0};

2、

var catB = Object.create(new Object());

catB.name = "Fluffy";

catB.color = "White";

catB.age = 0;

3、

function Cat(name, color) {

  this.name = name;

  this.color = color;

}

Cat.prototype.age = 0;



var catC = new Cat("Fluffy", "White");

　每个函数都有个prototype属性，这是一个对象。如果访问一个对象的属性，首先会在对象内部查找，如果再对象内部中找不到这个属性，会到原型中去找，以此类推。通过每个对象会有一个__proto__来指向prototype。如果对象不是new出来的，则__proto__为{}如

catA.__proto__;

Object { }

　　

catC.__proto__;

Cat {age: 0}

　　通过调用对象的hasOwnProperty可以判断非原型上定义的属性比如

catC.hasOwnProperty("name");

true



catC.hasOwnProperty("color");

true



catC.hasOwnProperty("age");

false

改变函数原型对象的属性，会引起对象属性的变化比如。因为有函数new出来的对象中的__proto__指向的是同一个对象即函数的prototype属性。

function Cat(name, color) {

  this.name = name;

  this.color = color;

}

Cat.prototype.age = 3;



var fluffy = new Cat("Fluffy", "White");

var scratchy = new Cat("Scratchy", "Black");



fluffy.age;

3



scratchy.age;

3



Cat.prototype.age = 4;



fluffy.age;

4



scratchy.age;

4

如果对象已经早已被new出来了，后来又改变了构造该对象函数的原型。则不会影响到原来对象的属性变化，因为__proto__还是指向原来的那个对象。 

function Cat(name, color) {

  this.name = name;

  this.color = color;

}

Cat.prototype.age = 3;



var fluffy = new Cat("Fluffy", "White");

var scratchy = new Cat("Scratchy", "Black");



fluffy.age;

3



scratchy.age;

3



Cat.prototype = {age: 4};



fluffy.age;

3



scratchy.age;

3



var muffin = new Cat("Muffin", "Brown");



muffin.age;

4

因为每个对象都有个__proto__属性来指向原型对象，因此如果改变通过该对象的__proto__可以改变原型的属性，从而影响其他已经或者即将new的对象。

function Cat(name, color) {

  this.name = name;

  this.color = color;

}

Cat.prototype.age = 3;



var fluffy = new Cat("Fluffy", "White");

var scratchy = new Cat("Scratchy", "Black");

Compare this example:



fluffy.age = 4;



fluffy.age;

4



scratchy.age;

3

To this example:



fluffy.__proto__.age = 4;



fluffy.age;

4



scratchy.age;

4

javascript 继承的实现

 

function Animal(name) {

  this.name = name;

}

Animal.prototype.age=1;



function Cat(name, color) {

  Animal.call(this, name);

  this.color = color;

}

Cat.prototype = new Animal(null);



var catC = new Cat("Fluffy", "White");



catC.name;

Fluffy



catC.color;

White



catC.age;

1