浅谈js原型与原型链

Posted 2020-11-17 d-laowu

在讨论原型前，我们需要知道什么是原型,并牢记这些铁定规律

　　原型，是所有函数（构造函数）对象的一个默认属性（prototype），它的值是一个对象｛里面有什么先不管｝；所以我们一般说原型是构造函数的属性，它本身也是一个对象；

　　原型有什么作用，原型里面的属性和方法，可以由该构造函数创建的对象继承（这个作用可以减少代码的耦合）;如：

function Fun(){

　　name : "张三"

}

此时，构造函数Fun有一个原型（默认属性prototype），它的值是一个｛｝，现在我们在它的原型里面添加属性方法

Fun.prototype.a = "qq";

Fun.prototype.b= function(){

　　return 123；

}

现在，我们用构造函数Fun创建（new）一个对象；

var fun = new Fun();

那么根据我们的理解，此时fun对象继承了构造函数Fun的原型里面的方法和属性；所以

console.log(fun.a) 输出qq

console.log(fun.b) 输出123

此时我们可以说只要由Fun构造函数创建出来的对象，都有a和b这两个属性（方法）。

 

我们现在知道了什么是原型，但是怎么才能查看到原型呢？这里需要用到__proto__属性

__proto__属性（查看原型），是对象的默认属性（注意不是所有的），它的值是创建出这个对象的构造函数的原型（prototype）

注意：__proto__的值不能通过__proto__属性更改，只能查看，如需更改需要用到prototype；

 

那么我们查看下fun的原型：

fun.__proto__　　==>　　创建fun对象的构造函数的原型　　==> 　　Fun.prototype

所以，fun.__proto__ = Fun.prototype　　，fun继承了它原型（Fun.prototype）的属性

我们再看看fun原型的原型

fun.__proto__.__proto__，即 Fun.prototype.__proto__

注意：Fun.prototype此时是一个对象，因为前面说过，原型的值是对象（一般是Object对象，部分例外）

根据刚才的推论：

 Fun.prototype.__proto__　　==>　　创建 Fun.prototype对象的构造函数的原型　　==>Object.prototype

 Fun.prototype.__proto__ = Object.prototype　　同时Fun.prototype继承了它原型（Object.prototype）的属性

此时，Object.prototype是最后的原型了，因为所有的对象都是由Object构造函数创建的（它自己也是的），而且Object.__prototype__的值为null；已经到了终点，即fun.__proto__.__proto__.__proto__ = null

fun.__proto__

fun.__proto__.__proto__

fun.__proto__.__proto__.__proto__

通过__proto__属性，现在有了一条链，对象查找属性（方法）时，先在自己里面找，没有则找它的原型，还是没有，再找它原型的原型，一直找到最后，还是没有就返回undefined；这就是所谓的原型链

 

我们在看看Fun的原型，

因为Fun是构造函数对象，而构造函数都是通过Function创建的，所以

Fun.__proto__ = Function.prototype;一定要记住原型就是对象，也就是 Function.prototype是个对象

那么Fun原型的原型,就是

Fun.__proto__.__proto__ = Function.prototype.__proto__

Function.prototype对象的原型就是Object.prototype

Function.prototype.__proto__=Object.prototype

根据这个规律，也就是Object.prototype是所有对象的最终原型

 

学习原型和原型链的好处

　　　　对于对象的属性和方法有了全新的认识，结构更加清晰，可以让我少写很多重复的代码

 

fun.__proto__ = Fun.prototype

对象.__proto__ = 创建对象的构造函数.prototype

这个等式需要牢记

 

上面写了一些个人对原型和原型链的理解，不对的地方还望多多指证