彻底搞懂 JS 原型与原型链
说到 JavaScript 的原型和原型链,相关文章已有不少,但是大都晦涩难懂。本文将换一个角度出发,先理解原型和原型链是什么,有什么作用,再去分析那些令人头疼的关系。
一、引用类型皆为对象
原型和原型链都是来源于对象而服务于对象的概念,所以我们要先明确一点:
JavaScript 中一切引用类型都是对象,对象就是属性的集合。
Array类型
、Function类型
、Object类型
、Date类型
、RegExp类型
等都是引用类型。
也就是说 数组是对象、函数是对象、正则是对象、对象还是对象。
二、原型和原型链是什么
上面我们说到对象就是属性(property)的集合,有人可能要问不是还有方法吗?其实方法也是一种属性,因为它也是键值对
的表现形式,具体见下图。
可以看到obj
上确实多了一个sayHello
的属性,值为一个函数,但是问题来了,obj
上面并没有hasOwnProperty
这个方法,为什么我们可以调用呢?这就引出了 原型。
每一个对象从被创建开始就和另一个对象关联,从另一个对象上继承其属性,这个另一个对象
就是 原型。
当访问一个对象的属性时,先在对象的本身找,找不到就去对象的原型上找,如果还是找不到,就去对象的原型(原型也是对象,也有它自己的原型)的原型上找,如此继续,直到找到为止,或者查找到最顶层的原型对象中也没有找到,就结束查找,返回undefined
。
这条由对象及其原型组成的链就叫做原型链。
现在我们已经初步理解了原型和原型链,到现在大家明白为什么数组都可以使用push
、slice
等方法,函数可以使用call
、bind
等方法了吧,因为在它们的原型链上找到了对应的方法。
OK,总结一下:
原型存在的意义就是组成原型链:引用类型皆对象,每个对象都有原型,原型也是对象,也有它自己的原型,一层一层,组成原型链。
原型链存在的意义就是继承:访问对象属性时,在对象本身找不到,就在原型链上一层一层找。说白了就是一个对象可以访问其他对象的属性。
继承存在的意义就是属性共享:好处有二:一是代码重用,字面意思;二是可扩展,不同对象可能继承相同的属性,也可以定义只属于自己的属性。
三、创建对象
对象的创建方式主要有两种,一种是new
操作符后跟函数调用,另一种是字面量表示法。
目前我们现在可以理解为:所有对象都是由new
操作符后跟函数调用来创建的,字面量表示法只是语法糖(即本质也是new
,功能不变,使用更简洁)。
Object
、Array
等称为构造函数,不要怕这个概念,构造函数和普通函数并没有什么不同,只是由于这些函数常被用来跟在new
后面创建对象。new
后面调用一个空函数也会返回一个对象,任何一个函数都可以当做构造函数。
所以构造函数更合理的理解应该是函数的构造调用
。
Number
、String
、Boolean
、Array
、Object
、Function
、Date
、RegExp
、Error
这些都是函数,而且是原生构造函数,在运行时会自动出现在执行环境中。
构造函数是为了创建特定类型的对象,这些通过同一构造函数创建的对象有相同原型,共享某些方法。举个例子,所有的数组都可以调用push
方法,因为它们有相同原型。
我们来自己实现一个构造函数:
总结一下:构造函数用来创建对象,同一构造函数创建的对象,其原型相同。
四、__proto__
与prototype
万物逃不开真香定律,初步了解了相关知识,我们也要试着来理解一下这些头疼的单词,并且看一下指来指去的箭头了。
上面总结过,每个对象都有原型,那么我们怎么获取到一个对象的原型呢?那就是对象的__proto__
属性,指向对象的原型。
上面也总结过,引用类型皆对象,所以引用类型都有__proto__
属性,对象有__proto__
属性,函数有__proto__
属性,数组也有__proto__
属性,只要是引用类型,就有__proto__
属性,都指向它们各自的原型对象。
__proto__
属性虽然在 ECMAScript 6 语言规范中标准化,但是不推荐被使用,现在更推荐使用Object.getPrototypeOf
,Object.getPrototypeOf(obj)
也可以获取到obj
对象的原型。本文中使用__proto__
只是为了便于理解。
上面说过,构造函数是为了创建特定类型的对象,那如果我想让Person
这个构造函数创建的对象都共享一个方法,总不能像下面这样吧:
错误示范
但是每次要修改一类对象的原型对象,都去创建一个新的对象实例,然后访问其原型对象并添加 or 修改属性总觉得多此一举。既然构造函数创建的对象实例的原型对象都是同一个,那么构造函数和其构造出的对象实例的原型对象之间有联系就完美了。
这个联系就是prototype
。每个函数拥有prototype
属性,指向使用new
操作符和该函数创建的对象实例的原型对象。
看到这里我们就明白了,如果想让Person
创建出的对象实例共享属性,应该这样写:
正确示范
OK,惯例,总结一下:
对象有
__proto__
属性,函数有__proto__
属性,数组也有__proto__
属性,只要是引用类型,就有__proto__
属性,指向其原型。只有函数有
prototype
属性,只有函数有prototype
属性,只有函数有prototype
属性,指向new
操作符加调用该函数创建的对象实例的原型对象。参考视频讲解:进入学习
五、原型链顶层
原型链之所以叫原型链,而不叫原型环,说明它是有始有终的,那么原型链的顶层是什么呢?
拿我们的person
对象来看,它的原型对象,很简单
接着往上找,Person.prototype
也是一个普通对象,可以理解为Object
构造函数创建的,所以得出下面结论,
Object.prototype
也是一个对象,那么它的原型呢?这里比较特殊,切记!!!
我们就可以换个方式描述下 原型链 :由对象的__proto__
属性串连起来的直到Object.prototype.__proto__
(为null
)的链就是原型链。
在上面内容的基础之上,我们来模拟一下 js 引擎读取对象属性:
六、constructor
回忆一下之前的描述,构造函数都有一个prototype
属性,指向使用这个构造函数创建的对象实例的原型对象。
这个原型对象中默认有一个constructor
属性,指回该构造函数。
之所以开头不说,是因为这个属性对我们理解原型及原型链并无太大帮助,反而容易混淆。
七、函数对象的原型链
之前提到过引用类型皆对象,函数也是对象,那么函数对象的原型链是怎么样的呢?
对象都是被构造函数创建的,函数对象的构造函数就是Function
,注意这里F
是大写。
Function.prototype
也是一个普通对象,所以Function.prototype.__proto__ === Object.prototype
这里有一个特例,Function
的__proto__
属性指向Function.prototype
。
总结一下:函数都是由Function
原生构造函数创建的,所以函数的__proto__
属性指向Function
的prototype
属性
八、小试牛刀
真香警告!
有点乱?没事,我们先将之前的知识都总结一下,然后慢慢分析此图:
知识点
引用类型都是对象,每个对象都有原型对象。
对象都是由构造函数创建,对象的
__proto__
属性指向其原型对象,构造函数的prototype
属性指向其创建的对象实例的原型对象,所以对象的__proto__
属性等于创建它的构造函数的prototype
属性。所有通过字面量表示法创建的普通对象的构造函数为
Object
所有原型对象都是普通对象,构造函数为
Object
所有函数的构造函数是
Function
Object.prototype
没有原型对象
OK,我们根据以上六点总结来分析上图,先从左上角的f1
、f2
入手:
然后对构造函数Foo
下手:
接着对原生构造函数Object
创建的o1
、o2
下手:
最后对原生构造函数Object
和Function
下手:
分析完毕,也没有想象中那么复杂是吧。
如果有内容引起不适,建议从头看一遍,或者去看看参考文章内的文章。
九、举一反三
1. instanceof
操作符
平常我们判断一个变量的类型会使用typeof
运算符,但是引用类型并不适用,除了函数对象会返回function
外,其他都返回object
。我们想要知道一个对象的具体类型,就需要使用到instanceof
。
为什么fn instanceof Object
和arr instanceof Object
都返回true
呢?我们来看一下 MDN 上对于instanceof
运算符的描述:
instanceof 运算符用于测试构造函数的 prototype 属性是否出现在对象的原型链中的任何位置
也就是说instanceof
操作符左边是一个对象,右边是一个构造函数,在左边对象的原型链上查找,知道找到右边构造函数的 prototype 属性就返回true
,或者查找到顶层null
(也就是Object.prototype.__proto__
),就返回false
。我们模拟实现一下:
现在就可以解释一些比较令人费解的结果了:
总结一下:instanceof
运算符用于检查右边构造函数的prototype
属性是否出现在左边对象的原型链中的任何位置。其实它表示的是一种原型链继承的关系。
2. Object.create
之前说对象的创建方式主要有两种,一种是new
操作符后跟函数调用,另一种是字面量表示法。
其实还有第三种就是 ES5 提供的Object.create()
方法,会创建一个新对象,第一个参数接收一个对象,将会作为新创建对象的原型对象,第二个可选参数是属性描述符(不常用,默认是undefined
)。具体请查看 Object.create()。
我们来模拟一个简易版的Object.create
:
我们平常所说的空对象,其实并不是严格意义上的空对象,它的原型对象指向Object.prototype
,还可以继承hasOwnProperty
、toString
、valueOf
等方法。
如果想要生成一个不继承任何属性的对象,可以使用Object.create(null)
。
如果想要生成一个平常字面量方法生成的对象,需要将其原型对象指向Object.prototype
:
3. new
操作符
当我们使用new
时,做了些什么?
创建一个全新对象,并将其
__proto__
属性指向构造函数的prototype
属性。将构造函数调用的 this 指向这个新对象,并执行构造函数。
如果构造函数返回对象类型 Object(包含 Functoin, Array, Date, RegExg, Error 等),则正常返回,否则返回这个新的对象。
依然来模拟实现一下:
4. Function.__proto__ === Function.prototype
其实这里完全没必要去纠结鸡生蛋还是蛋生鸡的问题,我自己的理解是:Function
是原生构造函数,自动出现在运行环境中,所以不存在自己生成自己。之所以Function.__proto__ === Function.prototype
,是为了表明Function
作为一个原生构造函数,本身也是一个函数对象,仅此而已。
5. 真的是继承吗?
前面我们讲到每一个对象都会从原型“继承”属性,实际上,继承是一个十分具有迷惑性的说法,引用《你不知道的 JavaScript》中的话,就是:
继承意味着复制操作,然而 JavaScript 默认并不会复制对象的属性,相反,JavaScript 只是在两个对象之间创建一个关联,这样,一个对象就可以通过委托访问另一个对象的属性,所以与其叫继承,委托的说法反而更准确些。
评论