彻底理解js的原型链

2023-02-19 17:33:02JavaScript035

彻底理解js的原型链,第1张

本文主要参考了 MDN文档和知乎讨论。

在js中，大部分东西都是对象，数组是对象，函数也是对象，对象更加是对象。 不管我们给数组和函数定义什么内容，它们总是有一些相同的方法和属性 。比如说hasOwnProperty()，toString()等：

这说明一个对象所拥有的属性不仅仅是它本身拥有的属性，它还会从其他对象中继承一些属性。当js在一个对象中找不到需要的属性时，它会到这个对象的父对象上去找，以此类推，这就构成了对象的原型链。理解js的原型链对使用js的对象非常有帮助。

让我们通过一个例子由浅到深地理解原型链：

这是我们经常使用的创建对象的方式，将共同的方法放到Foo.prototype中，所有实例都共有这个方法了。

这是怎么实现的呢？我们看下面这张图的第一行：

我们定义的show函数在Foo.prototype中，当我们执行f1.show()时，js发现f1本身没有show这个属性，所以它就到f1的原型（也就是__proto__指向的对象）去找，找到了就可以调用。

图片第一行告诉了我们4点：

我们先看看Foo的原型吧！Foo是一个函数，它的构造函数是js内部的function Function()，Function的prototype指向了一个对象Function.prototype，因此Foo的__proto__就指向了Function.prototype，如图。

我们继续深入下去，Function.prototype这个对象，它就是一个普通的对象，它的构造函数是js内置的function Object()，function Object()的prototype指向Object.prototype，因此Function.prototype.__proto__就指向Object.prototype，这个对象中定义了所有对象共有的属性，比如我们之前说的hasOwnProperty()和toString()等。

Object.prototype就是原型链的终点了，它的__proto__是null，js查找属性时，如果到这里还没有找到，那就是undefined了。

到这里就不难理解为什么我们说在js中，函数也是对象了，它就是继承自对象的！

如果如有疑问，欢迎指出！

1.、js的对象可以分为函数对象和普通对象，每个对象都有 proto 属性，但是只有函数对象才有prototype属性（prototype=原型对象）

2、Object是最高级的函数对象，Function、Array、RegExp、Date、Boolean、Number、String等等是第二高级的函数对象，我们自己手写的function是再低一级的函数对象

3、 proto 是一个对象，它指向某一个prototype，并且有2个属性：constructor和 proto

先来看第一种写法

我们声明了一个构造函数Person，并为它的2个实例都定义了sayName方法

如果我们希望所有的实例都有sayName方法，减少重复的定义

可以像下面这么写：（第二种写法）

我们在构造函数Person中定义了一个数据成员和一个函数成员

每当我们创造一个新的Person实例时，都会在内存中单独为它分配私有的空间