概念
原型链是JavaScript中实现继承的核心机制,其本质是一个由对象通过__proto__属性连接起来的链表。
查找机制:
- 在对象自身属性中查找
- 如果未找到,通过
__proto__在原型对象上查找 - 如果还没找到,就沿着原型链向上递归查找,直到找到或到达
null
可以先看看原型链的样子,这条原型链里包含了原型对象模块中例子的原型对象
原型对象(Prototype)
概念
每个对象都有一个隐藏属性__proto__(更推荐使用安全的Object.getPrototypeOf方法来查看原型对象),指向其构造函数的prototype对象。
包含
共享的方法:所有创建出来的实例都可以调用原型对象里包含的方法
构造函数:当使用 new 调用时,会创建新实例的函数。其 prototype 属性将作为新创建实例的原型。
作用
在JavaScript中,我们经常需要创建多个具有相同行为的对象。如果每个对象都单独存储一份方法,就会浪费内存
因此,我们将这些方法存储在原型对象上,所有通过同一个构造函数创建的对象都可以共享这些方法
例子
例如在代码中初始化一个对象,
const obj = {}
它的底层相当于调用了const obj = new Object(),即调用了类Object来创建对象,那就会有Object对象都应该有的方法,
总结一下就是,原型对象相当于一个方法储存库,所有通过同一个构造函数创建的实例对象,都能调用原型对象里提供的方法。
class Dog{
constructor(name,gender){
this.name = name
this.gender = gender
}
bark(){
console.log("汪汪")
}
}
const a = new Dog('旺财', '男')
const b = new Dog('可可', '女')
【例子用了语法糖class】
这里就是小狗a和小狗b都是同一个原型,所以都可以调用原型对象里存储的bark()方法, 而某实例原型对象里的构造函数,可以让我们知道这个实例的创造模版(类)的样子
具现化原型链的例子
这个例子里的原型链是这样的
obj -> Object.prototype -> null
这个例子里的原型链是
arr -> Array.prototype -> Object.prototype -> null
这个例子里的普通函数的原型链是
func -> Function.prototype -> Object.prototype -> null
可以看出除了通过Object.create(null)直接创建的对象外,其他所有对象(包括函数、数组等)的原型链上都会出现Object.prototype,而原型链终点也都是 null
ps:通过Object.create(null)直接创建的对象
继承场景
使用现代语法(ES6 Class),语法糖 class 和 extends ,底层基于原型链: