深入探索 JavaScript 原型链：解密 JavaScript 中原型的神秘力量

约定不等于承诺〃 2024-05-24 05:02 69阅读 0赞

## 前言 ##

### 原型 ###

是函数上的一个属性，它定义了构造函数制造的对象的**公共祖先**。

### 原型链 ###

js引擎在查找属性时，会顺着**对象的隐式原型**(这个在下面会进行介绍)向上查找，找不到则查找隐式原型的隐式原型，**一直向上**，直到找到**null**为止，这种查找关系称之为原型链。

## 正文 ##

### 原型 ###

ini

复制代码

`Person.prototype.lastName = 'lt'; Person.prototype.say = function() { console.log('素~'); } function Person() { this.name = 'lxp'; } let p1 = new Person(); //隐式具有 lastName say console.log(p1); console.log(p1.lastName); p1.say();`

![image.png][]

**分析**

定义了一个p1对象，该对象会继承构造函数Person内的name属性(**显式属性**)，并且p1的原型会继承构造函数Person的原型(**隐式原型**)，所以当查找lastName属性时会先先查找p1的显示属性中有没有，如果没有就会查找隐式原型中有没有该属性。

ini

复制代码

`Car.prototype.name = 'su7'; Car.prototype.height = 1400; Car.prototype.lang = 5000; function Car(color, owner) { this.color = color; this.owner = owner; } let ltt = new Car('black', 'ltt'); let lxp = new Car('purple', 'lxp'); console.log(ltt.name);`

![image.png][image.png 1]

**分析**

对于构造函数Car，我们会把它的name，lang，height(因为Car的这些属性是设定好的)放在它的原型上，然后它的name和owner会通过接收两个参数来实现。

ini

复制代码

`Car.prototype.producter = 'xiaomi' function Car() { this.name = 'su7'; } let car = new Car(); console.log(car); console.log(car.producter);`

![image.png][image.png 2]

**添加代码**

ini

复制代码

`car.name = '红旗'; car.producter = 'huawei';`

![image.png][image.png 3]

可以打开一个网页，在控制台运行代码来查看原型上的nickname是否改变。显然是没有改变的

![image.png][image.png 4]

**分析**

实例对象可以修改显示继承到的属性，但是无法修改隐式继承到的属性(原型上的)。

**添加代码**

ini

复制代码

`car.nickname = 'ltt';`

![image.png][image.png 5]

ini

复制代码

`Car.prototype.nickname = 'ltt';`

![image.png][image.png 6]

**分析**

实例对象无法给原型新增属性。

**添加代码**

arduino

复制代码

`delete car.producter;`

![image.png][image.png 7]

javascript

复制代码

`delete Car.prototype.producter;`

![image.png][image.png 8]

**分析**

实例对象无法删除原型上的属性。

#### 总结 ####

构造函数new出来的对象会**隐式继承**到**构造函数原型上的属性**。

1.  实例对象可以**修改显示继承到的属性**，但是**无法修改隐式继承到的属性(原型上的)**；
2.  实例对象**无法**给原型**新增**属性；
3.  实例对象**无法删除**原型上的属性。

javascript

复制代码

`function Bus() {} Car.prototype = { constructor: Bus } function Car() { } let car = new Car(); console.log(car.constructor); //记录该对象是由谁创建的`

![image.png][image.png 9]

**分析**

**constructor**是记录该对象由谁创建的。

### 原型链 ###

创建一个html，便于去控制台查看

xml

复制代码

`<script> function Person() { } let p =new Person(); console.log(Person.prototype);//函数原型 显式原型 console.log(p.__proto__); // p.__proto__ 对象的原型 隐式原型 //Person.prototype === p.__proto__ //Person.prototype.__proto__ === object.prototype //object.prototype.__proto__ === </script>`

![image.png][image.png 10]

![image.png][image.png 11]

**分析**

*  `Person.prototype(函数原型 显式原型) === p.__proto__(对象的原型 隐式原型)`
 *  `Person.prototype.__proto__ === object.prototype`

#### 总结 ####

*  对象的隐式原型 === 创建它的构造函数的显示原型
 *  js引擎在查找属性时，会先查找对象显示具有的属性，找不到，再查找对象的隐式原型(`__proto__`)

ini

复制代码

`GrandFather.prototype.say = function() { console.log('haha'); } function GrandFather() { this.age = 60; this.like = 'drink'; } Father.prototype = new GrandFather(); function Father() { this.age = 40; this.fortune = { card: 'visa' } } Son.prototype = new Father(); function Son() { this.age = 18; } let son =new Son();`

**测试代码**

arduino

复制代码

`console.log(son.age);//18`

![image.png][image.png 12]

**测试代码**

arduino

复制代码

`console.log(son.fortune);`

![image.png][image.png 13]

**测试代码**

arduino

复制代码

`console.log(son.like);`

![image.png][image.png 14]

**测试代码**

ini

复制代码

`son.say();`

![image.png][image.png 15]

#### 总结 ####

js引擎在查找属性时，会顺着对象的隐式原型向上查找，找不到则查找隐式原型的隐式原型，一直向上，直到找到null为止，这种查找关系称之为原型链。

## 结语 ##

最后让我们来思考一个问题：**所有的对象都有原型？** **答案**：不 Object.create(null) 没有原型。

### 实例 ###

创建一个html

xml

复制代码

`<script> let a ={ name:'ltt' } let obj = Object.create(a);//创建一个新对象，让新对象隐式继承 a 对象的属性 console.log(obj); </script>`

![image.png][image.png 16]

**分析**

**Object.create(a)** 创建一个新对象，让新对象隐式继承 a 对象的属性。

**添加代码**

javascript

复制代码

`let obj1 = Object.create(null);//该对象没有原型 console.log(obj1);`

![image.png][image.png 17]

**分析**

Object.create(null)创建的对象没有原型。

![image.png][image.png 18]

[image.png]: https://img-blog.csdnimg.cn/img_convert/c8c6fc535812a283375939921146e0da.webp?x-oss-process=image/format,png
[image.png 1]: https://img-blog.csdnimg.cn/img_convert/441809baa1982698df843c4c8e5e1092.webp?x-oss-process=image/format,png
[image.png 2]: https://img-blog.csdnimg.cn/img_convert/0cab4de7bce9b8dbc6719b541008dfda.webp?x-oss-process=image/format,png
[image.png 3]: https://img-blog.csdnimg.cn/img_convert/ae24569490009934b519033878d9e765.webp?x-oss-process=image/format,png
[image.png 4]: https://img-blog.csdnimg.cn/img_convert/bff264ea3e53b6e9de9abe429b3081c8.webp?x-oss-process=image/format,png
[image.png 5]: https://img-blog.csdnimg.cn/img_convert/524b0e894778808fc6607c2fe902e480.webp?x-oss-process=image/format,png
[image.png 6]: https://img-blog.csdnimg.cn/img_convert/6ec72ebf5aab7653ef61b8539c169576.webp?x-oss-process=image/format,png
[image.png 7]: https://img-blog.csdnimg.cn/img_convert/d30d3f4f4f44f93381f85bf000fabaa4.webp?x-oss-process=image/format,png
[image.png 8]: https://img-blog.csdnimg.cn/img_convert/e4aaf0966b586d155bb7ac0ab617500c.webp?x-oss-process=image/format,png
[image.png 9]: https://img-blog.csdnimg.cn/img_convert/8f86bb264e6a018ad03c700a984483de.webp?x-oss-process=image/format,png
[image.png 10]: https://img-blog.csdnimg.cn/img_convert/b3f41f26d6fe8cb697852ea913471100.webp?x-oss-process=image/format,png
[image.png 11]: https://img-blog.csdnimg.cn/img_convert/7562751c4ef18a6a807e9dfd477604d2.webp?x-oss-process=image/format,png
[image.png 12]: https://img-blog.csdnimg.cn/img_convert/1e20ae3ae9455221b10ce97ddc4fde95.webp?x-oss-process=image/format,png
[image.png 13]: https://img-blog.csdnimg.cn/img_convert/99f5c759241e50da0c9191d3048ee540.webp?x-oss-process=image/format,png
[image.png 14]: https://img-blog.csdnimg.cn/img_convert/338a445e4252ef982d2f513986bf242e.webp?x-oss-process=image/format,png
[image.png 15]: https://img-blog.csdnimg.cn/img_convert/d7674a1f055db3d035cf1f7680011388.webp?x-oss-process=image/format,png
[image.png 16]: https://img-blog.csdnimg.cn/img_convert/c0ab8f8d459edac8420e14b3421ef60c.webp?x-oss-process=image/format,png
[image.png 17]: https://img-blog.csdnimg.cn/img_convert/cd31c3a99022dd1c142f2d257390359f.webp?x-oss-process=image/format,png
[image.png 18]: https://img-blog.csdnimg.cn/img_convert/6df6566c240f6bc123a00b33f9fefb97.webp?x-oss-process=image/format,png