JavaScript原型和原型链新解

拿节

于 2017-12-15 12:30:37 发布

阅读量262

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/zhejiang9/article/details/78804712

版权

前端开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

为什么说是新解呢？

看了网上很多描述JS原型的文章，大部分都是这样描述的，JS对象分为两种，一个是普通对象，另外一个则是原型对象，其中原型对象包含prototype属性，普通对象则没有，还有就是，二者都包含__proto__来实现原型链等等

我相信很多人看完后，都是死记硬背的记住了上面的内容，至于为什么JS要分两种对象，原因是什么？估计都不是很清楚，因为大家都是基于结果来分析的

这里我尝试换一种角度去分析并理解这块内容，希望对大家能有所帮助

通常我们在JS中创建对象有两种方法：

1：function - 创建对应上面说的原型对象

2：new - 创建上面所说的普通对象

我们这里先想下，这两种被创建的对象最本质的区别是什么？我们创建对象的目的是什么？当然是保存数据了，

所以，它们最大的不同，是保存的数据类型不同

1：function创建的对象，是用于保存程序运行的代码描述的

2：new创建的对象，是基于function描述的代码来创建的实例

第二点很重要，我再重复一遍，要通过new创建对象，它的前提肯定是类代码，那function就是那个保存了类代码描述的对象！！

看代码：

function test(){
  let var1 = 'harish';
}

var obj1 = new test();

这段代码的执行步骤：

1: 检测到function关键字，创建一个叫test对象，然后将function内部运行的代码和属性数据保存到其中

2：检测到new关键字，从而创建一个新对象保存到obj1中, 并将obj1的constructor属性设置为test

3：接着执行obj1.constructor，并将函数执行上下文中的this属性设置为obj1,从而完成obj1数据的初始化

对象obj1创建完后，大家会发现有点不对劲，这个function描述的类好像只有构造函数，没有成员变量和成员函数的定义，没地方定义，那继承什么的就是无从谈起了，

所以强大的JS就约定，只要是function类对象，就可以通过prototype属性来描述这个类的成员变量和成员函数。

把代码改下：

function test(){
  let var1 = 'harish';
}

test.prototype.harish = 'dog';
test.prototype.testfunc = function(){
  alert('test1 = ' + this.harish);
}

var obj1 = new test();
obj1.testfunc();

然后上面的代码执行步骤改为：

1: 检测到function关键字，创建一个叫test对象，然后将function内部运行的代码和属性数据保存到其中

2：检测到new关键字，从而创建一个新对象保存到obj1中, 并将obj1的constructor属性设置为test

3：将test类的成员变量和成员函数描述对象prototype索引保存到obj1的__proto__属性中

4：接着执行obj1.constructor，并将函数执行上下文中的this属性设置为obj1,从而完成obj1数据的初始化

5：调用obj1.testfunc(), JS先看obj1对象的属性列表中是否存在testfunc的定义，这里显然没有

6：接着从obj1.__proto__中查找，找到testfunc并执行

接着总结下：

1：原型，即prototype，是function类描述其成员变量和成员函数的，而function函数自身，则在类创建的过程中会被当做构造函数执行

2：__proto__是原型链的基础，在JS中，所有的对象查找属性变量，规则总是这样的，先看对象自身是否存在该属性，如果不存在，则看__proto__属性是否为null，如果不是，则查找__proto__对应对象是否存在该属性，如此反复，直到找到或者__proto__为null为止

原型和原型链是JS实现继承的基础

下面说下JS是如何基于二者实现继承的：

function A function B function C

prototype prototype prototype

我们先定义三个类，在JS中，即三个function类型的对象A，B，C，然后还为每个类分别定义了成员变量和函数保存到prototype

类有了，接着我们希望 A继承自B，B继承自C

上面说过了JS对象对属性的查找规则，基于该规则，就可以很容易的实现继承

new A() function A function B function C

__proto__ -> prototype.__proto__ -> prototype.__proto__ -> prototype.__proto__(null)

上面箭头指向的是prototype对象

现在回过头来，你们应该明白，为什么new A()创建是普通对象没有prototype属性了吧，因为prototype对象描述的是类的成员函数和变量的定义，而这个数据是用来创建普通逻辑对象的，普通逻辑对象不需要也不应该包含prototype变量

最后，拿网上朋友的一个例子作为收尾：

var animal = function(){};
var dog = function(){};
animal.price = 2000;//
dog.prototype = animal;
var tidy = new dog();
console.log(dog. price) //undefined
console.log(tidy.price) // 2000

输出结果为什么是这样？原因是啥？大家自行思考，这里就不做介绍了^_^