乐趣区

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 属性,不可控。

退出移动版