0
点赞
收藏
分享

微信扫一扫

【面试题】原型与原型链 进一步理解~


j这段时间参与到很多的笔试机会,大部分都考察到对原型上的理解和使用。

现对该知识进行一定的总结和回想。

原型与原型链

存在的以下的规则:

  1. 每一个构造器(一般为函数)都有​​prototype​​ 指向他的原型对象
  2. 每一个原型对象都有​​construtor​​ 指向他的构造器
  3. 由构造器创建的对象都有​​__proto__​​ 指向原型对象
  4. 最高层的原型对象的​​__proto__​​ 指向null

简单来说就如图所示

【面试题】原型与原型链 进一步理解~_ecmascript

代码解释:

function Person() {
/* 构造器 */
}

Person.prototype.constructor === Persion() // true

const person = new Person() // 初始化一个实例
person.__proto__ === Persion.prototype // true (实例的__proto__ 与 构造器都是指向同一个原型对象的

更高层的原型链

【面试题】原型与原型链 进一步理解~_开发语言_02

运用场景:

原型与原型链主要的运用场景是:当我们使用实例的某个方法或是属性时,会发现本身该实例上并没有绑定相对应的方法或属性,但他又确实能拿到该方法会属性。这就是原型链带来的影响:当一个实例使用到本身不具备的方法或属性,他会通过原型链形式一层层向上查找,直到找不到报错的形式。

实例上自己绑定的方法或属性的优先级大于原型链上的绑定的

代码解释: (还是使用上面的例子哈

function Person() {
/* 构造器 */
}

++ Person.prototype.name = 'chuguo'


const person = new Person() // 初始化一个实例

console.log(person.name) // chuguo 本身在该实例上没有name属性 但在原型链上存在name 因此直接调来用

/* 实例方式或属性的与原型链上的优先级 */
function Person() {
/* 构造器 */
++ this.name = 'hello'
}

Person.prototype.name = 'chuguo'


const person = new Person() // 初始化一个实例

console.log(person.name) // hello

Function原型

在ES6出现之前,初始化一个实例都是通过函数构造器形式进行初始化的

但有一点很特殊:实例的 ​​__proto__​​​ 并不是指向 ​​Function.prototype​

图片解释:

【面试题】原型与原型链 进一步理解~_构造器_03

代码解释:

function Person() {
/* 构造器 */
}

Person.prototype.name = 'chuguo'
Function.prototype.name = 'function'

const person = new Person() // 初始化一个实例

console.log(person.name) // chuguo
console.log(person.__proto__ === Function.prototype) // false 实例的原型对象并不等于Function的原型对象
console.log(Person.__proto__ === Function.prototype) // true 能理解为每个函数构造器都是 函数原型实例化的结果

总结

总的来说:原型与原型链的出现大大补充JavaScript关于继承的缺失。

 总结给大家推荐一个实用面试题库

 1、前端面试题库 (面试必备)            

举报

相关推荐

0 条评论