JS原型链怎么理解
作者：小花大方
字体：[ ] 类型：转载 时间：
本文重点给大家介绍javascript中的原型链知识，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看下吧
　　在谈原型链之前，我们首先要了解自定义函数与 Function 之间是什么关系，而构造函数、原型和实例之间又存在什么千丝万缕的关系呢？其实，所有的函数都是 Function 的实例。在构造函数上都有一个原型属性 prototype，该属性也是一个对象；那么在原型对象上有一个 constructor 属性，该属性指向的就是构造函数；而实例对象上有一个 _proto_ 属性，该属性也指向原型对象，并且该属性不是标准属性，不可以用在编程中，该属性用于浏览器内部使用。
// _proto_
在函数里有一个属性prototype
由该函数创建的对象默认会连接到该属性上
//prototype 与 _proto_ 的关系
_proto_是站在对象角度来说的
prototype 是站在构造函数角度来说的
　　下面，我们来看图说话。
1、构造函数、原型和实例之间的关系
&&&&&&& ①+Object
　　②+Function+Object+Array
　　了解这些之后，我们再来讨论什么是原型链。说白了，其实就是有限的实例对象和原型之间组成有限链，就是用来实现共享属性和继承的。下面，我们看代码说话。
var obj = new Object();
对象是有原型对象的
原型对象也有原型对象
obj._proto_._proto_._proto_
原型对象也有原型对象，对象的原型对象一直往上找，会找到一个null
// 原型链示例
var arr = [];
arr -& Array.prototype -&Object.prototype -& null
var o = new Object();
o -& Object.prototype -&
function Foo1(){
this.name1 = '1';
function Foo2(){
this.name2 = '2';
Foo2.prototype = new Foo1();
function Foo3(){
this.name = '3';
Foo3.prototype = new Foo2();
var foo3 = new Foo3();
console.dir(foo3);
　　接下来就是继承问题了。
　1）原型继承
function Animal(name){
this.name =
function Tiger(color){
this.color =
var tiger = new Tiger('yellow');
console.log(tiger.color);
console.log(tiger.name); //undefined
Tiger.prototype = new Animal('老虎');
//一种方式
Object.prototype.name = '大老虎';
//第二种方式
var tiger = new Tiger('yellow');
console.log(tiger.color);
console.log(tiger.name);
值得注意的是，这里存在两个主要的问题：①它不方便给父级类型传递参数；②父级类型当中的引用类型被所有的实例共享
2）ES5 提供了Object.create() 方法来实现继承
————做兼容
//shim垫片
function create(obj){
if(Object.create){
return Object.create(obj);
function Foo(){}
Foo.prototype =
return new Foo();
　　这种方法是ES5的新特性，其实就是复制继承。
　　3）拷贝继承
var obj = {};
obj.extend = function(obj){
for(var k in obj){
this[k] = obj[k];
　4）借用构造函数继承——被借用的构造函数中原型上的成员没有被借过来
function Animal(name){
this.name =
function Mouse(nickname){
Animal.call(this,'老鼠');
this.nickname =
var m = new Mouse('杰瑞');
console.log(m.name);
console.log(m.nickname);
　　存在的问题：可以解决原型继承当中传参问题，但是父类型当中的原型对象上的成员（属性和方法）不能被继承到
　　5）组合继承——prototype对象是有动态性的
function Person(name){
this.name =
Person.prototype.showName = function(){
console.log(this.name);
function Student(name,age){
Person.call(this,name);
this.age =
Student.prototype = new Person();
Student.prototype.contructor = S
Student.prototype.showAge = function(){
console.log(this.age);
var stu = new Student('张三',12);
stu.showName();
stu.showAge();
【原型继承+借用构造函数继承】它的特点就是属性每个实例一份，方法共享
【小结】套用一句很粗暴的话，所谓原型链就是找妈的一种行为方式，就可以理解为人是人他妈生的，妖是妖他妈生的。原型链的核心其实就只有一个：属性共享和独立的控制，当你的对象实例需要独立的属性，所有做法的本质都是在对象实例里面创建属性。若不考虑太多，你大可以在Person里面直接定义你所需要独立的属性来覆盖掉原型的属性。总之，使用原型继承的时候，要对于原型中的属性要特别注意，因为他们都是牵一发而动全身的存在。现在最常用的方法是组合模式。
1）构造函数、原型和实例的关系
①构造函数都有一个属性prototype，这个属性是一个对象（Object的实例） ②原型对象prototype里面有一个constructor属性，该属性指向原型对象所属的构造函数 ③实例对象都有一个_proto_属性，该属性也指向构造函数的原型对象，它是一个非标准属性，不可以用于编程，它是用于浏览器自己使用的2）prototype与_proto_的关系
①prototype是构造函数的属性
②_proto_是实例对象的属性
——这两者都指向同一个对象
【总结】i）函数也是对象，对象不一定是函数；
ii）对象的本质：无序的键值对集合；键值对当中的值可以是任意数据类型的值
iii）对象就是一个容器，这个容器当中放的是（属性和方法）
3）属性搜索
　　①在访问对象的某个成员的时候会先在对象中找是否存在
　　②如果当前对象中没有就在构造函数的原型对象中找
　　③如果原型对象中没有找到就到原型对象的原型上找
　　④知道Object的原型对象的原型是null为止
2、Function
——所有函数都是Function的实例
①本地对象：独立于宿主环境（浏览器）的对象——包括Object、Array、Date、RegExp、Function、Error、Number、String、Boolean
②内置对象——包括Math、Global（window，在js中就是全局变量），使用的时候不需要new
③宿主对象——包括自定义对象、DOM、BOM
以上所述是小编给大家介绍的JS原型链怎么理解的全部叙述，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具关于js原型的面试题讲解
投稿：jingxian
字体：[ ] 类型：转载 时间：
下面小编就为大家带来一篇关于js原型的面试题讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
今天遇到关于javascript原型的一道面试题，现分析下：
原题如下：
function A(){
function B(a){
　　this.a =
function C(a){
　　if(a){
A.prototype.a = 1;
B.prototype.a = 1;
C.prototype.a = 1;
console.log(new A().a);
console.log(new B().a);
console.log(new C(2).a);
console.log(new A().a);　　//new A()为构造函数创建的对象，本身没有a属性，所以向它的原型去找，发现原型的a属性的属性值为1，故该输出值为1；
console.log(new B().a);　　//new B()为构造函数创建的对象，该构造函数有参数a，但该对象没有传参，故该输出值为
console.log(new C(2).a);　　//new C()为构造函数创建的对象，该构造函数有参数a，且传的实参为2，执行函数内部，发现if为真，执行this.a = 2,故属性a的值为2；
故这三个的输出值分别为：1、undefined、2.　　
以上就是小编为大家带来的关于js原型的面试题讲解的全部内容了，希望对大家有所帮助，多多支持脚本之家~
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具青青子衿, 悠悠我心, 但为君故, 沉吟至今
12个强大的Chrome插件
　　Chrome功能强大，也得益于其拥有丰富的扩展资源库。Chrome Web Store里有各种各样的插件，可以满足你使用Chrome时的各种要求。和Firefox一样，Chrome的扩展非常容易安装，而且非常容易卸载。与Firefox不同，Chrome的扩展不需要重新启动，并且不会有扩展插件会减小你的网页面积。在这里我总结出2013年 Chrome 的12款非常强大的扩展程序，供大家挑选分享。这些插件能不同程度地提升效率。诸如Turn off the light这些非常常用的我就不介绍了。　　所有的扩展程序都可以在在线搜索并下载。　　Holmes　　书签搜索工具。如果你有非常多的书签，多到你已经搞不清楚哪些放到哪里了，虽然在chrome的万能地址栏里可以简单搜索，但是毕竟不全面。Holmes可以实现实时搜索，从标题和地址匹配，达到快速找到你想要的书签的目的。你不用去层层叠叠的文件夹心酸地寻找了。　　/webstore/detail/holmes/gokficnebmomagijbakglkcmhdbchbhn　　LastPass　　密码管理软件。可以把你所有的密码信息保存起来，你再也无需记住复杂繁多的密码了，只需登录到lastpass，然后保存你的密码，lastpass会自动帮你完成登陆，不需要输入密码。它允许你从任何主流的密码存储器导入和导出密码，捕获其它管理器无法捕获的密码包括很多AJAX表单。也可轻松地创建强大的密码。敏感信息在上传之前已在本地计算机上加密，因此就算是LastPass的员工也无法得到密码信息。更好的事时，lastpass支持的不仅仅是Chrome，还有Firefox、opera，甚至IE。　　/webstore/detail/lastpass/hdokiejnpimakedhajhdlcegeplioahd?hl=zh-CN　　Lazarus: Form Recovery　　一款强大的急救软件。在你的浏览器发生崩溃、意外退出、结束进程时，可以借助此软件来回复你之前在浏览器页面上所输入的文本，而不需要悲惨的重新输入一次。　　/webstore/detail/lazarus-form-recovery/loljledaigphbcpfhfmgopdkppkifgno　　Minimalist for Everything　　样式表修改插件。你可以利用它来实现站点的多种CSS自定义，或者让网站看起来更加清爽，或者让网站的风格更符合你的口味。例如隐藏某个新闻网站的广告，去掉GMail的导航条，甚至还可以做到邮件附件图标随着插件类型而自动改变。只需一次设置，即可云端同步，并且在站点加载时自动应用。不过因为它太强大了，很多人在安装后都不知道该怎样用。　　/webstore/detail/minimalist-for-everything/bmihblnpomgpjkfddepdpdafhhepdbek　　Secure Bookmarks　　顾名思义，一款加密书签的插件。不过这可不是加密你整个书签，而是在这个插件的私密空间去添加私密的书签。除非输入密码，不然别人看不到你在这个插件里保存的书签。例如你想要给某人买礼物，中意的商品网页不想让人看到，或者你的私人信息页面想要隐藏，你都可以把它们添加到Secure Bookmarks里面。并且你只需要输入一次查看密码，在你的整个使用过程中都可以随时添加修改或访问。在你离开电脑时，只需点一下插件上的&Exit&，直到下一次输入密码访问。　　/webstore/detail/secure-bookmarks/leocjgngiajhfiikjolfhcpiokgbinep　　Text Mode　　把整个网页全部变成只剩下文字吧！这个插件特别适合爱在网上看新闻或者看小说、阅读的同学。开启这个插件后，所有图片都会变虚线框，整个网页色调变成黑白，让你注意力集中在文本上，再也没有让人烦恼、分散注意力的令人脸红心跳的图片了！你只需尽情阅读就可以了。不过你不能拿它来看在线漫画。　　/webstore/detail/text-mode/adelhekhakakocomdfejiipdnaadiiib　　Kloudless　　这个插件可以帮助你把Gmail邮件里的附件转存到Box，Google Drive，以及Dropbox里。你不需要先下载，再登陆，再上传，现在只需几个按键即可。在使用前需要登录到相关服务获取权限。　　/webstore/detail/kloudless/nddbhiejgghlfkjcmhanfpbpjiliclkd　　Tabs Outliner　　我们知道如果Chrome打开了超过十个标签页就会变得非常恐怖：你已经看不清楚标题了。有没有过因为标签页无序杂乱而导致重复打开了很多个相同标签的情况？如果你使用Tabs Outliner，情况就会有好转。它会在浏览器旁边新建一个窗口，把所有的标签页按照域名归类放好，如果你想要查找标签页的话就会变得十分容易。如果你的屏幕是宽屏的话更适合。　　/webstore/detail/tabs-outliner/eggkanocgddhmamlbiijnphhppkpkmkl　　Scroll Marker　　滚动很长的页面时眼睛花了不知道阅读到哪里了？别小瞧了这个插件，这个插件可以在你阅读长文本时，在页面底部（或者你想要的位置）增加一条半透明的线，随着页面滚动，这样子你在滚动时你可以根据这条线来确定自己的阅读位置来继续阅读，不会头昏眼花导致最后放弃阅读。一切样式颜色、延时时间都是可以自定义的。　　/webstore/detail/scroll-marker/jdoinodpdahlmpgmpmhonheidpjhhnid　　Chrome Office Viewer　　这个插件很强大，可以在你不想打开office、不想上传到google docs或者没有安装office时，临时在直接就浏览器里面阅读office文件，从幻灯片到普通word都提供支持，非常方便。　　/webstore/detail/chrome-office-viewer-beta/gbkeegbaiigmenfmjfclcdgdpimamgkj?hl=zh-CN　　Textdown　　这个插件极其简单简洁，安装后可以在新标签页的应用程序中找到它。功能类似临时记事本，不仅仅支持临时的粘贴，它还有着丰富的快捷键，支持语法自动补全、另存为各种各样的文件（例如CPP、js、html）等等丰富的功能。　　/webstore/detail/textdown/efalomlklhakojjbdfehfkgoicablooc　　HTTPS Everywhere　　这个插件可以实现自动侦查网站的HTTPS支持情况，并自动切换到HTTPS SSL安全连接，实现客户端到服务器的内容传输加密，保障你的安全。如果你对自己的网上安全和隐私十分注重，那么推荐你安装这款插件。　　/webstore/detail/https-everywhere/gcbommkclmclpchllfjekcdonpmejbdp　　来源：nsh投稿，。
　　除非注明，文章均为原创，转载请以链接形式标明本文地址
　　本文地址：
.whatUwant
“与Firefox不同，Chrome的扩展不需要重新启动。”并不是所有的Firefox扩展都要重启浏览器才能完成安装。有一部分是即装即用的。插件 于
13:25:48 回复试试这个插件啊~绝对给力！honx.in/i/VOQXnuz5NAddDpyZ或honx.in/i/VOQXakQ-2lV2ehQ7
TEXT MODE 正是我想要的插件，感谢博主
我感觉现在百度快照投诉都成了那些心怀鬼胎人的杀手锏 破坏正常网络秩序 好人死一片 百度投诉我感觉要有一定的标准来进行对于投诉给予j结论 有了百度快照投诉本来是用于方便大家对于一些不良现象或是其它反映 但现在直接成了那些道德败坏 心怀鬼胎人 网络大炮 想轰谁就轰谁
应当公正公平 客观去看待百度快照投诉
https everywhere之后，wiki再也打不开了
.玉麒麟博客
有几个插件很不错，值得一试
Text Mode 那个斜线也太刺眼了吧? 影响阅读啊
不错哦.我原来一直都是用的IE..没想到其它的浏览器更牛.
爱搜搜 isoso.ccasdf 于
13:49:19 回复sdfasdfasdfasdfasdfasdfasdf
当前使用谷歌插件的最大问题是需要fanqiang，我不否认文章中很多好的插件，但是需要fanqiang。大家可以到www》chajian100》com来看看，这里都是最新的谷歌插件，只要下载下来，之后把插件拖拽到谷歌浏览器就行了。
自由海上网插件也相当给力啊，本土国产的哦
扩展，插件，傻傻分不清楚
从幻灯片到扑通word都提供支持……另外感谢推荐！
广告终结者不错
偶尔和父亲促膝喝点小酒，永远比和一帮酒肉朋友在一起买醉来得开心。
把老外的文章全文翻译就可以投稿么？kay 于
12:41:53 回复这哪里是外国人的文章，哪来的全文翻译
赞助商广告
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享. 转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议.