文章目录加载中
Javascript进阶-原型和原型链
- 所有的引用类型(数组、对象、函数),都有一个
__proto__
属性,属性值是一个普通的对象 - 所有的函数,都有一个 prototype 属性,属性值也是一个普通的对象
- 所有的引用类型(数组、对象、函数),
__proto__
属性值指向它的构造函数的 prototype 属性值
注:ES6 的箭头函数没有prototype
属性,但是有__proto__
属性。
const obj = {};
// 引用类型的 __proto__ 属性值指向它的构造函数的 prototype 属性值
console.log(obj.__proto__ === Object.prototype); // output: true
# 原型
题目:如何理解 JS 中的原型?
// 构造函数
function Foo(name, age) {
this.name = name;
}
Foo.prototype.alertName = function() {
alert(this.name);
};
// 创建示例
var f = new Foo("zhangsan");
f.printName = function() {
console.log(this.name);
};
// 测试
f.printName();
f.alertName();
但是执行alertName
时发生了什么?这里再记住一个重点 当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的**__proto__
**(即它的构造函数的**prototype
**)中寻找,因此f.alertName
就会找到Foo.prototype.alertName
。
# 原型链
题目:如何 JS 中的原型链?
以上一题为基础,如果调用f.toString()
。
f
试图从__proto__
中寻找(即Foo.prototype
),还是没找到toString()
方法。- 继续向上找,从
f.__proto__.__proto__
中寻找(即Foo.prototype.__proto__
中)。因为**Foo.prototype
**就是一个普通对象,因此**Foo.prototype.__proto__ = Object.prototype
** - 最终对应到了
Object.prototype.toString
这是对深度遍历的过程,寻找的依据就是一个链式结构,所以叫做“原型链”。
本文来自心谭博客:xin-tan.com,经常更新web和算法的文章笔记,前往github查看目录归纳:github.com/dongyuanxin/blog