简述

本文是笔者看完《JavaScript面向对象编程指南》后的一些理解与感悟，仅是对JavaScript原型与多种继承进行思路上的梳理，并非讲解基础知识，适合了解原型和继承，却不够清晰透彻的开发者。

原型(prototype)

学习原型，你需要了解

• 实例对象
• 构造函数
• 原型对象

观察以下代码

function Person (){    this.age = 20;}Person.prototype.gender = 'male';var tom = new Person();    tom.name = 'tom';console.log(tom.name); // tomconsole.log(tom.age); // 20console.lot(tom.gender); // maletom.constructor === Person; // truetom.__proto__ === Person.prototype; // true

原型陷阱

function Dog(){    this.tail = true;}var benji = new Dog();var rusty = new Dog();// 给原型添加方法Dog.prototype.say = function(){    return 'woof!';}benji.say(); // "woof!"rusty.say(); // "woof!"benji.constructor === Dog; // truerusty.constructor === Dog; // true// 此时，一切正常Dog.prototype = {    paws: 4,    hair: true}; // 完全覆盖typeof benji.paws; // "undefined"benji.say(); // "woof!"typeof benji.__proto__.say; // "function"typeof benji.__proto__.paws; // "undefined"// 原型对象不能访问原型的"新增属性"，但依然通过神秘的连接 __proto__ 与原有原型对象保持联系// 新增实例var lucy = new Dog();lucy.say(); // TypeError: lucy.say is not a function lucy.paws; // 4// 此时 __proto__ 指向了新的原型对象// 由于constructor是存储在原型对象中的，所以新实例的constructor属性就不能再保持正确了，此时它指向了Object()lucy.constructor; // function Object(){[native code]}// 旧实例的constructor还是正确的benji.constructor;/* function Dog(){    this.tail = true;}*/// 若想让constructor正确，必须在新的原型对象中设置constructor属性为DogDog.prototype.constructor = Dog;

原型总结

• constructor属性在Person.prototype对象中，即原型对象中。
• __proto__属性是在 tom(实例) 被 new 的一瞬间建立的，指向原型对象即 Person.prototype
• tom.constructor 等同于 tom.__proto__.constructor 访问到的
• __proto__属性只能在学习或调试的环境下使用
• 构造函数可以看成一个规范，并非实际存在的
• 当var tom = new Person() 执行时，首先开辟一个新的地址空间用来创建并存放tom对象，再使Person的this指向tom对象并且执行Person函数。
• 不要过分依赖constructor属性，不可控。