JavaScript原型与构造函数笔记

简述

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

希望各位开发者能够通过阅读这篇文章缕清原型和构造函数的脉络

原型(prototype)

学习原型，你需要了解

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

观察以下代码

function Person (){
    this.age = 20;
}
Person.prototype.gender = 'male';
var tom = new Person();    
tom.name = 'tom';
console.log(tom.name); // tom
console.log(tom.age); // 20
console.lot(tom.gender); // male
tom.constructor === Person; // true
tom.__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; // true
rusty.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属性为Dog
Dog.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 属性，不可控。