第02篇-前端知识之JavaScript原型和原型链

前端老大叔
128 阅读2分钟

本人寻找武汉地区前端工作机会，有需要我搬砖的大佬欢迎骚扰，鄙人不甚感激，可以评论区留言讨论哦😲

前言

大家好，本文是前端知识的第二篇，上一篇说了第01篇-前端知识之JavaScript数据类型及计算的知识点全面总结，这一篇主要结合自己对前端基础知识最近的回顾和理解，谈一谈前端三座大山之原型和原型链。

原型

在js中每个对象的不论是通过new关键字创建对象还是通过字面量的形式创建对象，那么这个对象上总会有一些你没有定义过的成员（属性或者方法），这些个属性来自哪里呢？其实他们就来自于你创建的这个对象上的特殊属性，我们称之为原型。在浏览器中可以通过obj.__propto__的方式获取，这个又称隐式原型

image.png

当然这个属性已经被废弃，js更加推荐通过下面的方式来获取一个对象的原型对象，注意咯原型也是一个对象。

Object.getPrototypeOf(obj)
Reflect.getPrototypeOf(obj)

原型链

当访问一个对象的属性时，JavaScript 引擎首先会在对象本身查找该属性。如果没有找到，它会沿着对象的 __proto__（即它的原型）向上查找，直到找到该属性或达到原型链的顶端（即 null）。这个逐级查找的过程就叫做原型链。


class Person {
  constructor(name) {
    this.name = name;
  }
  eat() {
    console.log(`${this.name} 正在吃饭`);
  }
}

class Student extends Person {
  constructor(name, subject) {
    super(name)
    this.subject = subject;
  }
  study() {
    console.log(`${this.name} 正在学习${this.subject}`);
  }
}

const xiaoming = new Student("小明", "数学");

xiaoming.run = function(){
    console.log('run')    
}


xiaoming.run()
xiaoming.study()
xiaoming.eat()

console.log(xiaoming.world); // undefined
xiaoming.hello() // 报错

这里我自己画了一张图，来描述对象的原型链的关系，其中Student.prototype属性又称之为显示原型。

image.png

原型继承机制的好处

  • 通过把方法或者属性放到原型对象上，那么多个对象实例是能够共享这些属性方法的，这样就节省了内存
  • 可以方便的扩展原型，增强功能，这样所有实例就都继承了。例如Jquery，Vue等都是这么干的

总结

  • 每个 JavaScript 对象都有一个原型，通过原型链可以继承原型对象上的属性和方法。
  • 原型链是一种查找机制，当访问一个对象的属性时，JavaScript 会沿着原型链逐级查找。
  • 原型链的顶端是 Object.prototype，它的 __proto__ 是 null，表明原型链的终结。
avatar
文章
阅读
粉丝