JavaScript原型与构造函数笔记

简述本文是笔者看完《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.prototypetom.constructor 等同于 tom.proto.constructor 访问到的__proto__属性只能在学习或调试的环境下使用构造函数可以看成一个规范，并非实际存在的当var tom = new Person() 执行时，首先开辟一个新的地址空间用来创建并存放tom对象，再使Person的this指向tom对象并且执行Person函数。不要过分依赖constructor属性，不可控。