javaScript之深度理解原型链

     经过多次的翻阅书籍终于对原型链在实际代码中的应用有了新的认识,但是不知道是否有错误的地方,还请大神多多指教。

    构造函数、原型和实例的关系:每个构造函数都有一个原型对象funName.prototype,原型对象有一个指向构造函数的内部指针constructor,实例对象包含一个指向原型对象的内部指针__proto__(保证了实例可以访问构造函数原型内部所有的)。

(1)       万物皆对象,函数也是对象。函数(function)是对象,函数的原型(function.prototype)也是对象。它们(函数和对象)具有对象的共同特点。即对象都有_proto_属性(隐式原型),它指向构造函数的原型对象。保证了实例可以访问构造函数原型中所有的方法和属性

(2)       函数(function)除了_proto_属性外,还有prototype属性。这个属性是一个指针,指向一个该构造函数的原型对象,该对象包含所有可以共享的属性和方法。即new Object().__proto__ ===Object.prototype为true。

实例1:原型模式创建对象

代码:

function Person(){};
   var p = new Person();
  console.log(p.__proto__ == Person.prototype);//true 
//实例对象的_proto__指向其构造函数的原型对象。

  console.log(Person.prototype.constructor == Person);//true
  //原型对象的constructor指向构造函数

  console.log(Person.__proto__ == Function.prototype);//true
  // 构造函数的__proto__指向其构造函数Function的原型对象,即Function.prototype

  console.log(Person.prototype.__proto__== Object.prototype);//true
  //原型对象的__proto__指向其构造函数Object的原型对象,即Object.prototype

                      

实例2:原型链继承

var Person = function(){};
var Child = function(){};
Child.prototype = new Person();
var pp = new Child();
console.log(pp.__proto__ == Child.prototype); // true
  //实例对象的__proto__ 指向构造函数原型对象

  console.log(Child.prototype.__proto__ == Person.prototype);//true
// 子构造函数原型对象的__proto__指向父类的原型对象

  console.log(pp.__proto__.__proto__ == Person.prototype);//true
  // 所以子实例对象的__proto__.__proto__ 指向父原型对象

  console.log(Child.__proto__ == Function.prototype);//true
  //子构造函数的proto指向Function的原型对象(见第二行代码)

  console.log(Person.__proto__ == Function.prototype);//true
  //父构造函数的__proto__指向Function的原型对象(见第一行代码)

console.log(Person.prototype.__proto__ == Object.prototype );//true
//父原型对象的__proto__指向其Object的原型对象

console.log(Person.prototype.constructor == Person );//true
//父原型对象的constructor 指向 父构造函数

console.log(Child.prototype.constructor == Person); // true
//子原型对象的conmstructor指向父构造函数(见第三行代码)

                          

    综上所述,只要熟记函数和对象的__proto__属性指向其构造函数原型对象,函数的prototype也指向构造函数的原型对象,原型对象有一个指回构造函数的指针constructor。

 

posted on 2017-07-04 17:32  公子小苏  阅读(181)  评论(0编辑  收藏  举报