深入理解JavaScript的原型与原型链(继承)
原型的基本概念
要想真正理解js的原型和原型链的概念,必须且只要记住以下几点即可:
▶ 一切都是对象(看似如此)。
undefined, number, string, boolean四种属于简单的值类型,不是对象,使用基本类型变量可以调用方法是因为产生了包装对象(临时的)。剩下的几种情况——函数、数组、对象、null、new Number(10)都是对象,他们都是引用类型。
▶ 所有的对象都是由函数创建。
1、函数也是一个对象,由Function函数创建。
2、var obj = { a: 10, b: 20}; var arr = [5, 'x',true]; 这类定义其实只是一个下面的语法糖而已
3、Function也是一个对象,由它自己创建,有趣吧
▶ 所有的函数都有prototype属性(原型)
注意,是函数才有prototype,普通对象没有。
函数创建时就自动带有这个属性,也就是我们讲的“原型”,这也绝对是js中最基础也是最难的部分。
这个prototype的属性值是一个对象(属性的集合,再次强调!),默认的只有一个叫做constructor的属性,指向这个函数本身。
prototype可以添加自定义属性,你可以试试Object.prototype,可以看到很多自定义的属性:
▶ 所有的对象都有__proto__。
1、所有的对象都有__proto__,指向创建它的函数的prototype,注意,你要这样来理解这句话的意思,那就是同一个函数new出来的对象的__proto__都统一指向了这个函数的prototype,根据后面要讲述的原型链规则,也就是说通过这个函数new出来的所有对象都可以直接使用该函数原型上的任意属性和方法!,因此,对于jquery的这种形式就应该能理解了
$是jQuery的简写别名,其实是一个函数。因此$div是jQuery函数创建的对象,很显然,on方法就是在jQuery.prototype上定义的属性(函数),因此所有jQuery函数创建的对象都已直接使用on方法
2、所有的函数,比如 function fn(){},都是由Function函数创建,因此fn的__proto__指向Function的prototype。
3、比较有意思的是,Function也是函数,因此它也由Function创建的,也就是说它自己创建了自己!所有Function的__proto__指向的就是Function的prototype!
4、同理,Object函数也是由Function创建,因此Object的__proto__同样指向Function的prototype!
5、prototype也是一个对象,原始prototype只有一个叫做constructor的属性,指向这个函数本身。因为prototype是一个对象,因此它也是由Object方法创建,因此它的__proto__将指向Object.prototype,如下所示:
6、但是Object.prototype却是一个特例——它的__proto__指向的是null,切记切记!
想想也觉得应该是这样吧因此,根据上面的几条基本概念,从这段简单的代码我们可以画出这样一条关系链图:
原型链
以上图为例,我们来对原型链进行描述。
首先person是个函数,我们在它的原型(prototype)上添加了一个getName的方法(函数属性)
然后zs是person new出来的一个对象,因此zs的__proto__指向person的prototype。
person.prototype作为一个普通对象,是有Object函数创建的,因此它的__proto__指向Object.prototype
我们看到,zs对象本身没有getName方法,那它是怎么访问到的?
原来在当前对象中没有找到某个属性时,它会顺着__proto__属性依次向上查找,知道找到为止!因此,
getName属性在zs对象中没有找到,就会继续找zs.__proto__,也就是person.prototype,很显然,这里找到了,就不会再向上查找了
hasOwnProperty属性显然zs对象中没有找到,就会继续找zs.__proto__,也就是person.prototype,很显然,person.prototype中也找不到,于是继续向上在person.prototype.__proto__中找。person.prototype是一个普通对象,它是由Object方法创建的,因此person.prototype.__proto__就是Object.prototype,很显然,Object.prototype里面已经定义了hasOwnProperty方法(属性),因此在这里也找到了。
上面这种查找形式就成为原型链。就像一根链条一样,依次向上链接起来。这也是ES5及之前的所谓“继承”实现。
原型链访问顺序我们注意到,在getName方法中是直接使用this.name来获取zs对象的name值得,这就是说js在访问原型对象的方法时,直接把当前对象应用到了这个方法的上下文中。也就是相当于:person.prototype.getName.apply(zs)
总结
要想正确理解掌握原型和原型链的概念,必须把上面讲的最核心和基本的几个概念理解和记住,否则看再多的案例也只会云里雾里,晕晕乎乎的,越加无法理解,靠死记硬背肯定是不行的。并且只要熟练掌握和牢记上面说的这几个概念,不管遇到任何变着花样的原型考查,都一定能够正确理解。