//如有错误或不同观点,欢迎批评与讨论!

首先,prototype出现的目的,是为了解决 代码重用 的问题 , prototype 相当于是在内存上划分出一个公共的区域, 专用于存放 实例化对象 的相同方法或属性, 一份代码,人人可用;

为方便理解,我们可以先把prototype 当作是CSS中的 class,在prototype上加方法和属性,那么其它对象就会拥有这些方法和属性, 但这些代码紧有一份!

<script>
function Person()
{
this.name = '张三';
this.id = function (){ alert('身份证') };
}
Person.prototype.say = function (){ alert('说话'); } var P1 = new Person();
var P2 = new Person(); console.log(P1);
console.log(P2);
console.log(P1.name === P2.name); //true
console.log(P1.id === P2.id); //false
console.log(P1.say === P2.say); //true
</script>

/*---------------------------------------------------------------*/

运行上面代码,从控制台中可以看出:

1.name, id 都是直接放在 new出来的对象上的, 他们的name的比较是相等的(因为字符串是基本类型,所以为true),而id比较 是false,这是因为 function 是复合数据类型,比较的是引用值,这两个 id 分别属于两个不同的对象, 引用不一样,所以为false;

2.我们直接 P1.say() 是可以运行的,但是从控制台可看出,P1和P2并没有say这个方法,这个方法其实是属于 Person.prototype 这个对象的,那为什么P1,P2可以使用这个方法呢?请看下图

3.从控制台中我们还可以看到这样的个东东:_proto_ ; 它就是JS的 原型链 ,我们是访问不了它的, 但是可以在控制台中看到它, 其实 _proto_ 就是将 实例对象 P1、P2 和 类(构造函数)建立起一个联系,通过这个 原型链 可以找到Person.prototype这个内存公共空间里的 所有公共方法和属性; 从上图可以看出, say这个方法正是在里面,  而这个constructor是哪里来的呢? 这个是当我们定义Person函数的时候, 浏览器自动给我们添加的, 并且指向 Person它自己:  Person.prototype.constructor = Person; 这个属性很容易在不经意间被我们修改, 出现这种情况时我们需要手动修正一下, JQ也是这样处理的, 详情请看最后面的补充, 现在继续上面的讨论;

4.从上图中我们还可以看到 _proto_ :Object,   原型链 又将P1, P2 和 Object类联系了起来, 这个,P1,P2 就可以使用 Object.prototype 这个内存公共空间里的 所有公共方法和属性,虽然Person.prototype上没有这些方法和属性, 我们 alert( P1.hasOwnProperty('id') ) 是可以得到true的,因为 它们在同一条原型链上。

从上图还可以看出, 浏览器也给Objcet加了这样的个属性: Object.prototype.constructor = Object; 那为什么 P1.constructor 会是Person, 而不是Object呢,  因为原型链是 这样的   P1  _proto _  Person   _proto _  Object , P1在Person.prototype处找到了constructor这个属性,就不会继续往下找,只有找不到的时候才往下找。

5.原型链的尽头是Object,   从上头可以看出,没有  _proto_ 再连接到别的地方了。

6.所以,只要是在同一原型链上,实例化对象就可以使用这些方法和属性,如果有重复的方法或属性, 距离近的会覆盖距离远的。

下面我做了个小图给大家参考参考 :

-如果图片看不清,请单击鼠标右键,复制图片地址,粘贴在浏览器地址栏上打开------------------------------------------------------------------------------------------------------------------------------------------------------

a.上面可看出,  房子嘛,  不是说你一出生就有的,  自己 没有可以先住老爸的, 如果老爸没有嘛,  老爸他哥有,  你出门在外,  也可以先去住着先的,   再没有嘛再去别的亲戚家住下先,     最远的尽头是 Object,

b.如果你老爸买房子了,   那你就别去你大伯家住啦,   你就去你老爸那住,

c.如果你有能力啦,买房子啦, 就自己搬出来住啦!(相当于加 this.sleep ,优先级高于 prototype上的sleep,和css中的 id相似)

补充:

上面说到的我们会在不经意间会修改,Person.prototype.constructor这个属性,是哪种情况呢?

 <script>
function Person()
{
this.name = '张三';
this.id = function (){ alert('身份证') };
}
//Person.prototype.say = function (){ alert('说话'); }
Person.prototype = { say: function (){ alert('说话') }} var P1 = new Person();
console.log(P1.constructor)
</script>

Person.prototype也是对象,所以可以改成下面的写法,但是改成这样的写法后,我们会看到,P1.constructor 竟然变成了 function Object() { [native code] },  怎么会变成  Object 呢?

是这样的,第一种写法, 是给 Person.prototype 对像添加属性;  而第二种写法, 是直接把一个对象{ }覆盖了 Person.prototype 这个对像,   这种写法的{ }对象是 Object 实例出来的,  所以嘛,  这个 P1.constructor当然就是Object啦;

像上面的,你老爸把房产证卖给都给Objcet了,虽然你还住着(别人还没赶你走~~), 你说这个房子的主人是谁?

所以我们需要手动修正一下,Person.prototype.constructor = Person;

下图可以看到,JQ也是这样处理的:

轻松搞定javascript原型链 _proto_的更多相关文章

  1. 轻松搞定javascript变量(闭包,预解析机制,变量在内存的分配 )

    变量:  存储数据的容器     1.声明        var   2.作用域       全局变量. 局部变量. 闭包(相对的全局变量):   3.类型         a.基本类型(undefi ...

  2. 一张图带你搞懂Javascript原型链关系

    在某天,我听了一个老师的公开课,一张图搞懂了原型链. 老师花两天时间理解.整理的,他讲了两个小时我们当时就听懂了. 今天我把他整理出来,分享给大家.也让我自己巩固加深一下. 就是这张图: 为了更好的图 ...

  3. 一张图搞懂javascript原型链

    js高级里面原型链对于新手来说并不友好,总的来说就是 任何函数都有自己的原型对象(prototype),任何实例对象都__proto__指向构造函数的原型 先来个最简单的原型三角关系 var fn = ...

  4. 轻松搞定javascript预解析机制(搞定后,一切有关变态面试题都是浮云~~)

    hey,guys!我们一起总结一下JS预解析吧! 首先,我们得搞清楚JS预解析和JS逐行执行的关系.其实它们两并不冲突,一个例子轻松理解它们的关系: 你去酒店吃饭,吃饭前你得看下菜谱,点下菜(JS预解 ...

  5. 轻松搞定javascript日期格式化问题

    Date.prototype.format = function(f){ var d = this f = f || "yyyy-MM-dd hh:mm:ss" return f. ...

  6. 人脸识别JavaScript也可以轻松搞定

    前言 是不是觉得不可思议,js已经强大到这个地步? 是的,js日新月异,它在不断的进步.只要稍不留神,那我们都只能望尘莫及了. 今天我们就来看看是什么js插件可以如此厉害? 人脸识别JavaScrip ...

  7. 【转】轻松搞定FTP之FlashFxp全攻略

    转载网址:http://www.newhua.com/2008/0603/39163.shtml 轻松搞定FTP之FlashFxp全攻略 导读: FlashFXP是一款功能强大的FXP/FTP软件,融 ...

  8. Webcast / 技术小视频制作方法——自己动手录制video轻松搞定

    Webcast / 技术小视频制作方法——自己动手录制video轻松搞定 http://blog.sina.com.cn/s/blog_67d387490100wdnh.html 最近申请加入MSP的 ...

  9. JavaScript学习总结(十七)——Javascript原型链的原理

    一.JavaScript原型链 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法.其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.在JavaScript中, ...

随机推荐

  1. .Net中如何使用MySql连接池

    提供一份官方的译文.翻译也挺辛苦的!! 6.4 Using Connector/Net with Connection Pooling 6.4在Connector/Net中使用连接池 The Conn ...

  2. USACO OPEN 12 BOOKSELF(转)

    原文出处:http://txhwind.blog.163.com/blog/static/2035241792012112285146817/(版权为原作者所有,本博文无营利目的,不构成侵权) 题目大 ...

  3. Java转换

    1.如何将字符串String转化为整数int  int i = Integer.parseInt(str);   int i = Integer.valueOf(my_str).intValue(); ...

  4. PHP封装Excel表方法使用流程

    今天总结了一下Excel表的封装和导出使用,原理 经常使用与一些日常报表, 数据报表, 实现方法比较简单, 一次封装, 简单的方法调用,简单~ 废话不多说,直接入正题, 先说下重要的参数要记住的东西 ...

  5. python成长之路第二篇(4)_collections系列

    一.分别取出大于66的数字和小于66的数字 小练习:需求要求有一个列表列表中存着一组数字,要求将大于66的数字和小于66的数字分别取出来 aa = [11,22,33,44,55,66,77,88,9 ...

  6. 初学swift笔记 方法(九)

    import Foundation /* 方法 */ //实例方法 一定需要依附于对象 class MyPoint { var x: Double = 0.0 var y: Double = 0.0 ...

  7. C# 动态语言特性,dynamic 关键字研究

    1       动态语言简介 支持动态特性的语言现在大行其道,并且有继续增长的趋势.比如 Ruby 和 Python, 还有天王级的巨星 --- JavaScript. 现在一个程序员说自己对 Jav ...

  8. 对话 UNIX: 关于 inode

    http://www.ibm.com/developerworks/cn/aix/library/au-speakingunix14/ WMI http://wiki.hudson-ci.org/di ...

  9. 《how to design programs》9.3处理任意长度的表

    假定一个玩具商店要把货物库存清单存放在计算机之中,这样,店里的员工就可以快速判断商店里是否还有某种玩具存货.简言之,商店需要一个能够检查库存是否含有玩具'doll 的函数contains-doll?, ...

  10. read write spinlock

    发一个自己基于 C++11 写的 read write spinlock,在 MinGW 4.8.2 (gcc 4.8 全面支持c++ 11,但由于gcc windows平台 libstdc++ 目前 ...