js原型链（看了一个大神的博客，觉得真的是挖到了宝藏一样）

最新推荐文章于 2021-09-08 15:19:15 发布

Meiko丶

最新推荐文章于 2021-09-08 15:19:15 发布

阅读量235

点赞数

分类专栏： nodejs

nodejs 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

原型的基本概念

要想真正理解js的原型和原型链的概念，必须且只要记住以下几点即可：

▶ 一切都是对象（看似如此）。

undefined, number, string, boolean四种属于简单的值类型，不是对象，使用基本类型变量可以调用方法是因为产生了包装对象（临时的）。剩下的几种情况——函数、数组、对象、null、new Number(10)都是对象，他们都是引用类型。

▶ 所有的对象都是由函数创建。

1、函数也是一个对象，由Function函数创建。

2、var obj = { a: 10, b: 20}; var arr = [5, 'x',true]; 这类定义其实只是一个下面的语法糖而已

3、Function也是一个对象，由它自己创建，有趣吧

▶ 所有的函数都有prototype属性（原型）

注意，是函数才有prototype，普通对象没有。

函数创建时就自动带有这个属性，也就是我们讲的“原型”，这也绝对是js中最基础也是最难的部分。

这个prototype的属性值是一个对象（属性的集合，再次强调！），默认的只有一个叫做constructor的属性，指向这个函数本身。

prototype可以添加自定义属性，你可以试试Object.prototype，可以看到很多自定义的属性：

▶ 所有的对象都有__proto__。

1、所有的对象都有__proto__，指向创建它的函数的prototype，注意，你要这样来理解这句话的意思，那就是同一个函数new出来的对象的__proto__都统一指向了这个函数的prototype，根据后面要讲述的原型链规则，也就是说通过这个函数new出来的所有对象都可以直接使用该函数原型上的任意属性和方法！，因此，对于jquery的这种形式就应该能理解了

$是jQuery的简写别名，其实是一个函数。因此$div是jQuery函数创建的对象，很显然，on方法就是在jQuery.prototype上定义的属性（函数），因此所有jQuery函数创建的对象都已直接使用on方法

2、所有的函数，比如 function fn(){}，都是由Function函数创建，因此fn的__proto__指向Function的prototype。

3、比较有意思的是，Function也是函数，因此它也由Function创建的，也就是说它自己创建了自己！所有Function的__proto__指向的就是Function的prototype！

4、同理，Object函数也是由Function创建，因此Object的__proto__同样指向Function的prototype！

5、prototype也是一个对象，原始prototype只有一个叫做constructor的属性，指向这个函数本身。因为prototype是一个对象，因此它也是由Object方法创建，因此它的__proto__将指向Object.prototype，如下所示：

6、但是Object.prototype却是一个特例——它的__proto__指向的是null，切记切记！

想想也觉得应该是这样吧

因此，根据上面的几条基本概念，从这段简单的代码我们可以画出这样一条关系链图：

原型链

以上图为例，我们来对原型链进行描述。

首先person是个函数，我们在它的原型（prototype）上添加了一个getName的方法（函数属性）

然后zs是person new出来的一个对象，因此zs的__proto__指向person的prototype。

person.prototype作为一个普通对象，是有Object函数创建的，因此它的__proto__指向Object.prototype

我们看到，zs对象本身没有getName方法，那它是怎么访问到的？

原来在当前对象中没有找到某个属性时，它会顺着__proto__属性依次向上查找，知道找到为止！因此，

getName属性在zs对象中没有找到，就会继续找zs.__proto__，也就是person.prototype，很显然，这里找到了，就不会再向上查找了

hasOwnProperty属性显然zs对象中没有找到，就会继续找zs.__proto__，也就是person.prototype，很显然，person.prototype中也找不到，于是继续向上在person.prototype.__proto__中找。person.prototype是一个普通对象，它是由Object方法创建的，因此person.prototype.__proto__就是Object.prototype，很显然，Object.prototype里面已经定义了hasOwnProperty方法（属性），因此在这里也找到了。

上面这种查找形式就成为原型链。就像一根链条一样，依次向上链接起来。这也是ES5及之前的所谓“继承”实现。