参考文档
是的,面不面试,都需要知道的原型链。理解的记忆
前言:
JS本身就是一个基于原型链继承的语言。
class 的 extends 本质也是原型链继承
怎么理解原型?
总结内容:
- 引用数据类型都具有对象的特征
- 对象都有自由扩展属性的特征
- 对象都有__proto__属性,值为一个普通对象,指向其构造函数的prototype属性值
- 查找对象的属性时,先在自身查找,找不到则到它的隐式原型__proto__上查找(也就是它的构造函数的prototype上查找)
原型链
原型链就在查找属性时,不停向上查找对象的__proto__隐式原型而形成的,这样普通对象可以使用valueOf函数,因为Object上有ValueOf,Object的prototype在普通对象的__proto上。
继承
-
原型实现继承,在子类的构造函数中调用父类,并使用Parent.call(this,value),在父类的原型上绑定属性和方法,既可以指定参数,也可以让子类继承到父类的属性和方法。
-
ES6的class继承,使用extends继承父类的属性和方法。实际上也是原型的继承方法。
class也是原型的继承
定义class
// 父类
class People {
constructor (old) {
this.old = old
}
eat () {
consoloe.log('eating')
}
}
// 继承
class Student extends People {
constructor(name, number,old) {
super(old) // 变量传递给父类执行
this.name = name
this.number = number
}
sayHi () {
console.log(this.name, this.number)
}
}
const me = new Student('小明', 10, 20) // 新建对象
console.log(me.name) // => 小明
me.sayHi() // => 小明 10
// class 实际上是函数,可见是语法糖
typeof People => 'function'
typeof Student => 'function'
// 隐式原型和显式原型
me.__proto__ // 隐式原型 => People
Student.prototype // 显式原型 => People
me.__proto === Student.prototype => true 全等通过的话,就说明引用的是同一个地址
每个实例都有隐式原型__proto__
每个 class 都有显式原型 prototype
实例的隐式原型指向对应class的显式原型
相关知识点
instanceof
工作原理是:顺着__proto__隐式原型向上找;
语法:obj instanceof constructor;construction的prototype属性是否在实例对象的原型链上。
[] instanceof Array // true
[] instanceof Object // true`
{} instanceof Object // true`
new一个函数会发生什么?
- 创建一个空对象
- 执行构造函数,并将构造函数的属性和方法给对象
- 将构造函数的prototype属性值给空对象的__proto__属性
- 构造函数中的this指向新对象