在刚刚接触JS原型链的时候都会接触到一个熟悉的名词:prototype;如果你曾经深入过prototype,你会接触到另一个名词:__proto__(注意:两边各有两条下划线,不是一条)。以下将会围绕prototype和__proto__这两个名词解释为什么不能在原型链上使用对象以及JS原型链的深层原理

  一、为什么不能在原型链上使用对象:

  先举一个非常简单的例子,我有一个类叫Humans(人类),然后我有一个对象叫Tom(一个人)和另一个对象叫Merry(另一个人),很明显Tom和Merry都是由Humans这一个类实例化之后得到的,然后可以把这个例子写成如下代码:

function Humans() {
this.foot = 2;
}
Humans.prototype.ability = true; var Tom = new Humans();
var Merry = new Humans(); alert(Tom.foot);//结果:2
alert(Tom.ability);//结果:true
alert(Merry.foot);//结果:2
alert(Merry.ability);//结果:true

  以上是一个非常简单的面向对象的例子,相信都能看懂,如果尝试修改Tom的属性ability,则

function Humans() {
this.foot = 2;
}
Humans.prototype.ability = true; var Tom = new Humans();
var Merry = new Humans(); Tom.ability = false;
alert(Tom.foot);//结果:2
alert(Tom.ability);//结果:false
alert(Merry.foot);//结果:2
alert(Merry.ability);//结果:true

  以上可以看出Tom的ability属性的值改变了,但并不影响Merry的ability属性的值,这正是我们想要的结果,也是面向对象的好处,由同一个类实例化得到的各个对象之间是互不干扰的;OK,接下来给ability换成object对象又如何?代码如下:

function Humans() {
this.foot = ;
}
Humans.prototype.ability = {
run : '100米/10秒',
jump : '3米'
}; var Tom = new Humans();
var Merry = new Humans(); Tom.ability = {
run : '50米/10秒',
jump : '2米'
};
alert(Tom.ability.run); //结果:'50米/10秒'
alert(Tom.ability.jump); //结果:'2米'
alert(Merry.ability.run); //结果:'100米/10秒'
alert(Merry.ability.jump); //结果:'3米'

  以上代码就是在原型链上使用了对象,但从以上代码可以看出Tom的ability属性的改变依然丝毫不会影响Merry的ability的属性,于是乎你会觉得这样的做法并无不妥,为什么说不能在原型链上使用对象?接下来的代码就会显得很不一样,并且可以完全表达出原型链上使用对象的危险性:

function Humans() {
this.foot = ;
}
Humans.prototype.ability = {
run : '100米/10秒',
jump : '3米'
}; var Tom = new Humans();
var Merry = new Humans(); Tom.ability.run = '50米/10秒';
Tom.ability.jump = '2米'; alert(Tom.ability.run); //结果:'50米/10秒'
alert(Tom.ability.jump); //结果:'2米'
alert(Merry.ability.run); //结果:'50米/10秒'
alert(Merry.ability.jump); //结果:'2米'

  没错,从以上代码的输出结果可以看出Tom的ability属性的改变影响到Merry的ability属性了,于是就可以明白在原型链上使用对象是非常危险的,很容易会打破实例化对象之间的相互独立性,这就是为什么不能在原型链上使用对象的原因?是的,但我想说的可不只如此,而是其中的原理,看完后面JS原型链的深层原理之后,相信你会完全明白。

  在以下第二部份解释JS原型链的深层原理之前,先来明确一个概念:原型链上的属性或方法都是被实例化对象共用的,正因如此,上面的Tom.ability.run='50米/10秒',改动了原型连上的ability才导致另一个对象Merry受影响,既然如此,你可能会问Tom.ability = {......}不也是改动了原型链上的ability吗,为什么Merry没有受影响?答案是Tom.ability = {......}并没有改动原型链上的ability属性,而是为Tom添加了一个自有属性ability,以后访问Tom.ability的时候不再需要访问原型链上的ability,而是访问其自有属性ability,这是就近原则;OK,如果你仍有疑问,可以用纸笔记下你的疑问,继续往下看你会更加明白。

  二、JS原型链的深层原理:

  首先要引入一个名词__proto__,__proto__是什么?在我的理解里,__proto__才是真正的原型链,prototype只是一个壳。如果你使用的是chrome浏览器,那么你可以尝试使用alert(Tom.__proto__.ability.run),你发现这样的写法完全可行,而且事实上当只有原型链上存在ability属性的时候,Tom.ability其实是指向Tom.__proto__.ability的;当然,如果你跑到IE浏览器里尝试必然会报错,事实上IE浏览器禁止了对__proto__的访问,而chrome则是允许的,当然实际开发中,我并不建议直接就使用__proto__这一属性,但它往往在我们调试代码时发挥着重要作用。有人可能会问到底Tom.__proto__和Humans.prototype是什么关系,为了理清两者的关系,下面先列出三条法则:

  1、对象是拥有__proto__属性的,但没有prototype;例如:有Tom.__proto__,但没有Tom.prototype。

  2、类没有__proto__属性,但有prototype;例如:没有Humans.__proto__,但有Humans.prototype(这里必须纠正一下,同时非常感谢‘川川哥哥’提出这一处错处,确实是我在写到这一点的时候没有考虑清楚,事实上Humans也是Function的一个实例对象,因此Humans.__proto__===Function.prototype是绝对成立的,稍有特殊的是这时Function.prototype是指向一个Empty(空)函数,值得推敲)。

  3、由同一个类实例化(new)得到的对象的__proto__是引用该类的prototype的(也就是我们说的引用传递);例如Tom和Merry的__proto__都引用自Humans的prototype。

  OK,上面说过Tom.ability={......}其实并没有改变原型链上的ability属性,或者说并没有改变Tom.__proto__.ability,而是为Tom添加了一个自有的ability属性,为了说明这一点,我们再次回到以上的第三个代码块,其代码如下:

function Humans() {
this.foot = ;
}
Humans.prototype.ability = {
run : '100米/10秒',
jump : '3米'
}; var Tom = new Humans();
var Merry = new Humans(); Tom.ability = {
run : '50米/10秒',
jump : '2米'
};
alert(Tom.ability.run); //结果:'50米/10秒'
alert(Tom.ability.jump); //结果:'2米'
alert(Merry.ability.run); //结果:'100米/10秒'
alert(Merry.ability.jump); //结果:'3米'

  当为Tom.ability赋予新的值后,再次访问Tom.ability时就不再指向Tom.__proto__.ability了,因为这时其实是为Tom添加了自有属性ability,可以就近取值了,你可以尝试用Chrome浏览器分别alert(Tom.ability.run)和alert(Tom.__proto__.ability.run),你会发现确实存在两个不同的值,再看完下面的图后,相信你会完全明白:

  于是可以有这样一个结论:当访问一个对象的属性或方法的时候,如果对象本身有这样一个属性或方法就会取其自身的属性或方法,否则会尝试到原型链(__proto__)上寻找同名的属性或方法。明白了这一点后,要解释以上第四个代码块的原理也非常容易了,其代码如下:

function Humans() {
this.foot = ;
}
Humans.prototype.ability = {
run : '100米/10秒',
jump : '3米'
}; var Tom = new Humans();
var Merry = new Humans(); Tom.ability.run = '50米/10秒';
Tom.ability.jump = '2米'; alert(Tom.ability.run); //结果:'50米/10秒'
alert(Tom.ability.jump); //结果:'2米'
alert(Merry.ability.run); //结果:'50米/10秒'
alert(Merry.ability.jump); //结果:'2米'

  当Tom.ability.run='50米/10秒'的时候,JS引擎会认为Tom.ability是存在的,因为有Tom.ability才会有Tom.ability.run,所以引擎开始寻找ability属性,首先是会从Tom的自有属性里寻找,在自有属性里并没有找到,于是到原型链里找,结果找到了,于是Tom.ability就指向了Tom.__proto__.ability了,修改Tom.ability.run的时候实际上就是修改了原型链上的ability了,因而影响到了所有由Humans实例化得到的对象,如下图:

  希望上面所讲的内容足够清楚明白,下面通过类的继承对原型链作更进一步的深入:

  先来看一个类的继承的例子,代码如下:

function Person() {
this.hand = 2;
this.foot = 2;
}
Person.prototype.say = function () {
alert('hello');
}
function Man() {
Person.apply(this, arguments);//对象冒充
this.head = 1;
}
Man.prototype = new Person();//原型链
Man.prototype.run = function () {
alert('I am running');
};
Man.prototype.say = function () {
alert('good byte');
}
var man1 = new Man();

  以上代码是使用对象冒充和原型链相结合的混合方法实现类的继承,也是目前JS主流的实现类的继承的方法,如果对这种继承方法缺乏了解,可以看看这里

  接下来看看以上实现继承后的原型链,可以运用prototype和__proto__来解释其中的原理:

  1、从man1 = new Man(),可以知道man1的__proto__是指向Man.prototype的,于是有:

  公式一:man1.__proto__ === Man.prototype 为true

  2、从上面的代码原型链继承里面看到这一句代码 Man.prototype = new Person(),作一个转换,变成:Man.prototype = a,a = new Perosn();一个等式变成了两个等式,于是由a = new Perosn()可以推导出a.__proto__ = Person.prototype,结合Man.prototype = a,于是可以得到:

  公式二:Man.prototype.__proto__ === Person.prototype 为true

  由公式一和公式二我们就得出了以下结论:

  公式三:man1.__proto__.__proto__ === Person.prototype 为true

  公式三就是上述代码的原型链,有兴趣的话,可以尝试去推导多重继承的原型链,继承得越多,你会得到一个越长的原型链,而这就是原型链的深层原理;从公式三可以得出一个结论:当你访问一个对象的属性或方法时,会首先在自有属性寻找(man1),如果没有则到原型链找,如果在链上的第一环(第一个__proto__)没找到,则到下一环找(下一个__proto__),直到找到为止,如果到了原型链的尽头仍没找到则返回undefined(这里必须补充一点:同时非常感谢深蓝色梦想提出的疑问:尽头不是到了Object吗?是的,原型链的尽头就是Object,如果想问为什么,不妨做一个小小的实验:如果指定Object.prototype.saySorry = 'I am sorry',那么你会惊喜地发现alert(man1.saySorry)是会弹出结果‘I am sorry’的)。

  以上就是原型链的深层原理,说难其实也算容易,如果细心研究,会发现原型链上有很多惊喜。

深入分析JS原型链以及为什么不能在原型链上使用对象的更多相关文章

  1. Js笔记(对象,构造函数,原型,原型链,继承)及一些不熟悉的语法

    对象的特性: 1.唯一标识性,即使完全不一样的对象,内存地址也不同,所以他们不相等 2.对象具有状态,同一个对象可能处在不同状态下 3.对象具有行为,即对象的状态可能因为他的行为产生变迁 Js直到es ...

  2. JS高级. 03 混入式继承/原型继承/经典继承、拓展内置对象、原型链、创建函数的方式、arguments、eval、静态成员、实例成员、instanceof/是否在同一个原型链

    继承:当前对象没有的属性和方法,别人有,拿来给自己用,就是继承 1 混入式继承 var I={ }; var obj = { name: 'jack', age:18, sayGoodbye : fu ...

  3. Js中的对象、构造函数、原型、原型链及继承

    1.对象 在传统的面向过程的程序设计中,会造成函数或变量的冗余.而JS中对象的目的是将所有的具有相同属性或行为的代码整合到一起,形成一个集合,这样就会方便我们管理,例如: var person1={  ...

  4. JS 原型链 prototypt 和隐式原型 _proto_

    prototype(原型) :  对象的一个属性,此属性使您有能力向对象添加属性和方法,当访问对象不存在属性是会自动到 prototype 中找 _proto_(隐式原型): 此对象构造函数(类)的原 ...

  5. 《JS权威指南学习总结--6.1原型》

    内容要点: 一.每一个JS对象(null除外)都和另一个对象相关联."另一个"对象就是我们熟知的原型,每一个对象都从原型继承属性. 二.所有通过对象直接量创建的对象都具有同一个原型 ...

  6. JavaScript 原型链学习(四)原型链的基本概念、原型链实现继承

    简单回顾一下构造函数.原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针.那么,假如我们让原型对象等于另一个类型的实例,结果会 ...

  7. js对象系列【二】深入理解js函数,详解作用域与作用域链。

    这次说一下对象具体的一个实例:函数,以及其对应的作用域与作用域链.简单的东西大家查下API就行了,这里我更多的是分享自己的理解与技巧.对于作用域和作用域链,相信绝大多数朋友看了我的分享都能基本理解,少 ...

  8. [js]js代码执行顺序/全局&私有变量/作用域链/闭包

    js代码执行顺序/全局&私有变量/作用域链 <script> /* 浏览器提供全局作用域(js执行环境)(栈内存) --> 1,预解释(仅带var的可以): 声明+定义 1. ...

  9. js高级——构造函数,实例对象和原型对象——prototype、__proto__和constructor构造器

    一.前言 了解JavaScript面向对象,需要先了解三个名词: 构造函数,实例对象和原型对象. 注意:JavaScript中没有类(class)的概念,取而代之的是构造函数,两者类似却又有很大的差别 ...

随机推荐

  1. 堆排序与优先队列——算法导论(7)

    1. 预备知识 (1) 基本概念     如图,(二叉)堆是一个数组,它可以被看成一个近似的完全二叉树.树中的每一个结点对应数组中的一个元素.除了最底层外,该树是完全充满的,而且从左向右填充.堆的数组 ...

  2. PowerDesigner(数据建模)使用大全

    什么是PowerDesigner 引入百度百科的说法是: power designer是能进行数据库设计的强大的软件,是一款开发人员常用的数据库建模工具.使用它可以分别从概念数据模型(Conceptu ...

  3. 使用SuperSlide 实现标签切换

    小颖之前还写过一篇jquery实现标签切换的文章  jquery实现Tab选项卡菜单 今天小颖逛博客园时看到了用SuperSlide 实现标签切换的文章,所以小颖就自己试了下,试了后发现SuperSl ...

  4. java监控之ManagementFactory分析

    The ManagementFactory class is a factory class for getting managed beans for the Java platform. This ...

  5. 哈夫曼(huffman)树和哈夫曼编码

    哈夫曼树 哈夫曼树也叫最优二叉树(哈夫曼树) 问题:什么是哈夫曼树? 例:将学生的百分制成绩转换为五分制成绩:≥90 分: A,80-89分: B,70-79分: C,60-69分: D,<60 ...

  6. ASP.NET Core 中文文档 第二章 指南(4.7)添加搜索

    原文:Adding Search 作者:Rick Anderson 翻译:魏美娟(初见) 校对:谢炀(Kiler) .孟帅洋(书缘).张仁建(第二年.夏) 在本节中,你可以为 Index 方法添加查询 ...

  7. [JSP]JSP 简介

    1.1 概述 1.1.1 什么是 JSP? JSP 全称是 Java Server Pages,是一种动态网页开发技术. 它与 PHP.ASP.ASP.NET 等语言类似,运行在服务端的语言. JSP ...

  8. php内核分析(四)-do_cli

    这里阅读的php版本为PHP-7.1.0 RC3,阅读代码的平台为linux # main 把剩下的代码增加了下注释全部贴出来了(这个是简化后的main函数,去掉了一些无关紧要的代码段): int m ...

  9. Google地图开发总结

    我们经常使用地图查位置.看公交.看街景,同时地图还开放第三方的API给开发者.利用这些API进行地图的个性化的展示和控制,例如北京被水淹了,开发一个网页显示北京被淹的地图,地图上面标志被水淹的位置.严 ...

  10. asp.net实现图片在线上传并在线裁剪

    1.说明 接上一篇文章uploadify实现多附件上传完成后,又突然用到头像上传并在线裁剪.在网上找个众多例子都没有符合要求的,有一篇文章写的不错,就是文旺老兄写的这篇Asp.Net平台下的图片在线裁 ...