简单理解JS原型

简单理解JS原型

先附上一张图及代码
简单理解JS原型_第1张图片

function Person(){
    this.name = 'tom';
    this.age = 22;
    this.sayName = function (){
        log(this.name)
    }
}


let person1 = new Person()
let person2 = new Person()

在看图之前,让我们先来理解几个概念。

  • prototype 显式原型
  • __proto__ 隐式原型 (注意这个__是两个_连在一起)
  • constructor
  • 构造函数
  • 原型对象
  • 实例对象

构造函数的本质就是函数,每个函数的都会有一个prototype 属性指向它的原型对象
每个对象都有一个 __proto__ ,它指向其构造函数原型对象

可以把图中的Person.prototype理解成Person的原型对象
图中person1,person2 则是Person的实例对象
那么person1,person2的 __proto__ ,就指向了 Person.prototype
我们来验证一下
在这里插入图片描述
完全正确。和图片描述一致。

从这个角度来说,prototype__proto__ 的作用是类似的,不同的是 prototype 是函数所特有的。

实例对象在调用属性和方法时,先找自身的属性或方法,如果没有找到,它就会去原型对象上查找。
那么实例对象就可以因此而调用原型的属性和方法了
简单理解JS原型_第2张图片
再来看看constructor
原型对象具有constructor属性,它指回它的构造函数,而Person.prototype这个原型对象的constructor属性就指向Person这个构造函数
于是,
在这里插入图片描述

这时你可能会想,构造函数的本质是函数,函数也是对象,那么构造函数的__proto__指向哪呢?
没错,它会指向Function.prototype ,同理,Object.__proto__也都指向 Function.prototype ,
Function.__proto__也指向Function.prototype 。如此推理,原型对象的__proto__就指向了Object.prototype,

简单理解JS原型_第3张图片
很有意思,不是吗?

文章到这里就结束啦,本文有不足或有误的地方,欢迎批评改正。

推荐文章
Javascript中prototype与__proto__的关系详解 作者:心晴安夏

Javascript 中的 proto 和 prototype 的一些理解

你可能感兴趣的:(JavaScript)