一文搞懂JS原型与原型链

前言

作为一个前端开发工程师,熟练掌握JS这门语言是必须要的。无论是日常的工作中,亦或者是出去面试找工作,JS掌握的多深多好,很大程度上决定了你能走的多远。今天本人就来介绍一下JS的原型以及原型链,基于本人的一些认识。因为本人也在学习的阶段,所以如果文章中有什么不对的或者不好的地方,烦请大家指出。

JS原型

众所周知,JS的复杂类型都是对象类型(Object),而JS不是一门完全面向对象编程的语言,所以如何涉及继承机制,就是一个问题。

构造函数

因为JS中没有类(Class)这个概念,所以JS的设计者使用了构造函数来实现继承机制。

ES6中的class可以看作只是一个语法糖,它的绝大部分的功能,ES5都可以做到,新的class写法只是让原型的写法更加的清晰、更像面向对象编程的语法而已。下文也会进一步的说明。(摘自阮一峰的ES6入门)

// 构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 生成实例
const p = new Person('zhangsan', 18);
复制代码

如上述代码所示,JS通过构造函数来生成实例。但是又出现了一个新的问题,在构造函数中通过this赋值的属性或者方法,是每个实例的实例属性以及实例方法,无法共享公共属性。所以又设计出了一个原型对象,来存储这个构造函数的公共属性以及方法。

补充知识:构造函数创建一个实例的过程

  1. 创建一个新对象
  2. 将构造函数的作用域赋值给新对象(这样this就指向了新对象)
  3. 执行构造函数中的代码(为新对象添加实例属性和实例方法)
  4. 返回新对象

原型对象

说了这么久,终于说到了JS的原型对象了。JS的每个函数在创建的时候,都会生成一个属性prototype,这个属性指向一个对象,这个对象就是此函数的原型对象。该原型对象中有个属性为constructor,指向该函数。这样原型对象它的函数之间就产生了联系。

image.png

JS原型链

讲清楚了JS的原型对象,来就是介绍JS的原型链了。既然有了构造函数,那么就可以通过该构造函数,来创建一个实例对象了。此时,完善一下我们的Preson构造函数

    // 构造函数
    function Preson(name, age) {
      this.name = name;
      this.age = age;
    }
    // 所有实例共享的公共方法
    Preson.prototype.say = function (word) {
      console.log(`${this.name}说:${word}`);
    }

    const p1 = new Preson('张三', 18); // 创建一个Person实例对象
    p1.hasOwnProperty('say') // false 说明不是定义在其本身上的
    p1.say('hello world'); // 调用公共方法 打印:张三说:hello world
复制代码

这里就要思考了,为什么我们构造的p1这个实例对象,它可以调用到Person这个构造函数原型对象上的方法呢?明明只有在构造函数内部通过this来赋值的属性或者方法才会被实例所继承,为什么在构造函数原型对象上定义的say方法也能通过实例来调用到呢?这里就引出了原型链这个概念。

_proto_

每个通过构造函数创建出来的实例对象,其本身有个属性__proto__,这个属性会指向该实例对象构造函数原型对象,这么说好像有点绕,我们看下图

image.png

__proto__ 并不是语言本身的特性,这是各大厂商具体实现时添加的私有属性,虽然目前很多现代浏览器的 JS 引擎中都提供了这个私有属性,但依旧不建议在生产中使用该属性,避免对环境产生依赖。生产环境中,我们可以使用 Object.getPrototypeOf 方法来获取实例对象的原型,然后再来为原型添加方法/属性。(摘自阮一峰的ES6入门)

现在我们知道了,当访问一个对象的某个属性时,会先在这个对象本身属性上查找,如果没有找到,则会通过它的__proto__隐式属性,找到它的构造函数原型对象,如果还没有找到就会再在其构造函数prototype__proto__中查找,这样一层一层向上查找就会形成一个链式结构,我们称为原型链

注意点:如果通过p1实例对象__proto__属性赋值,则会改变其构造函数原型对象,从而被所有实例所共享。

    // 构造函数
    function Preson(name, age) {
      this.name = name;
      this.age = age;
    }
    // 所有实例共享的公共方法
    Preson.prototype.say = function (word) {
      console.log(`${this.name}说:${word}`);
    }

    const p1 = new Preson('张三', 18); // 创建一个Person实例对象
    const p2 = new Preson('李四', 20); // 新创建一个Proson实例对象
    p1.say('hello world'); // 调用公共方法
    p1.hasOwnProperty('say') // false 说明不是定义在其本身上的
    p1.__proto__.do = function () {
      console.log('往原型对象中添加方法');
    }
    p2.do(); // 打印出了-往原型对象中添加方法
复制代码

所以,我们在开发的时候,要注意不要通过实例对象去改变其构造函数原型对象,这样会对其他通过该构造函数生成的实例对象造成影响。

说到这里,有的读者可能又会产生疑问了,再在其构造函数prototype__proto__中查找是什么意思?我们继续往下看。

补充知识:原型链的尽头

既然我们之前构造的p1实例对象__proto__属性指向其构造函数原型对象,那么该构造函数原型对象有这个__proto__属性吗?如果有,那么其又指向谁呢?我们不妨打印一下。

image.png

我们随便创建了一个A构造函数,通过打印它的prototype属性,我们可以看到,在浏览器中,它有个__proto__属性指向了一个Object对象。

image.png

而进一步展开后,我们会发现,该对象的构造函数function Object,我们由此可以得知,所有的原型对象__proto__属性都是指向function Object原型对象function Object原型对象在上图中我们可以得知是不存在__proto__这个属性的,它指向了null。我们就得知了原型链的尽头是null

补充知识:所有对象的原型链

既然JS的复杂类型都是对象,那么,函数作为一个对象,是否也存在原型链呢? 我们在浏览器中创建一个构造函数,打印它的__proto__属性,一探究竟:

image.png

我们可以看到,它的__proto__属性指向了一个function Function原型对象,该原型对象为JS中所有函数的原型对象,而其__proto__属性也还是指向了function Object原型对象,所以验证了原型链的尽头为null,这一说法。

最后,奉上神图一张,祝大家理解JS的原型链

image.png

结语

通过上面的文章,大概梳理了一下本人对于原型原型链这一概念的理解,并且尽可能详细的阐述了各个概念的前世今生。因为本人也是个前端菜鸡,写这篇文章的目的除了让大家了解原型原型链这一概念外,还有就是自己梳理一遍所掌握的知识。如果上文有说的不对或者不好的地方,欢迎大家提出宝贵的意见。


作者:月光也会跟着我
链接:https://juejin.cn/post/6984678359275929637
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
posted @ 2022-07-21 09:33  木子欢儿  阅读(142)  评论(0编辑  收藏  举报