第20篇 js高级知识---深入原型链

原创 2015年11月18日 23:26:35

     前面把js作用域和词法分析都说了下,今天把原型链说下,写这个文章费了点时间,因为这个东西有点抽象,想用语言表达出来不是很容易,我想写的文章不是简单的是官方的APIcopy,而是对自己的知识探索和总结的过程,以及在这个过程碰到的问题都一一写出来,我想大多数人应该也有这个疑惑,然后带着疑惑去找答案,当你把这个疑惑解决之后,才觉得很有成就感。下面不多说了,开始说说什么是原型链。要想了解原型链,还是要从简单的开始,什么是原型?首先看下代码:

function funcA() {
    this.show = function() {}
}
console.log(funcA.prototype);

由这个图可以看出funcA的原型是一个对象,他的名字也是funcA,有一个constructor属性指向funcA,同时有一个__proto__指向Object.prototype(这个是怎么得到?可以看下上面的__proto__下面的constructor属性指向是Object,说明他是Object的原型).funcA原型大概写成:

复制代码
funcA.prototype={

constructor:funcA,

__proto__:Object.prototype


}
复制代码

PS:这里的__proto__从哪里冒出来的?在js中,每个对象都有一个名为__proto__的内部隐藏属性,指向于它所对应的原型对象(chromefirefox中名称为__proto__,并且可以被访问到),而普通的对象没有prototype属性,只有__proto__属性由上面的结果可以得到下面的这张图


现在我们对原型有了一个大概的了解,反正他就是这么一个对象,有几个不同寻常的属性,继续深入,当我们利用funcA创建对象的时候,这个又会发生什么?

复制代码
function funcA() {
    this.show = function() {}
}
console.log(funcA.prototype);
var a = new funcA();
console.log(a);
console.log(a.__proto__);
console.log(a.__proto__ === funcA.prototype);
console.log(a.__proto__.constructor === funcA);
复制代码

运行结果如下:

对上面的这个结果进行分析,afuncA创建出来的对象,他有funcA里面的方法,同时他也有一个__proto__,可以用代码表示成:

复制代码
var a={

show:function(){..…},

__proto__:funcA.prototype

}
复制代码

同理,我们可以得到下面这张图:


总结下上面的过程,从表象上看,funcA在创建对象的时候,这个对象a,funcA里面的方法“复制过来”,然后产生了一个__proto__属性指向它的原型。

其实new创建对象,分为三步

1、 创建了一个空对象a={};
2
、 将这个空对象的__proto__成员指向了funcA函数对象prototype成员对象
3
funcA函数对象的this指针替换成a,然后再调用funcA函数,于是我们就给a对象赋值了一个新 的方法成员

具体的实现代码可以表示如下

复制代码
var a ={};
a.__proto__=funcA.prototype;
funcA.call(a);

下面我们用代码来验证:
function funcA() {
    this.show = function() {}
}
console.log(funcA.prototype);

var b=new funcA();//new 来构建

var a ={};//define 手动定义
a.__proto__=funcA.prototype;
funcA.call(a);
console.log(a);
console.log(b);
复制代码

实现结果如下 ,可以看到ab的内部方法完全一个,唯一的区别是a来自于Objectprototype,b来自于funcAprototype(导致输出的名字是不一样)

现在这个可以对上面的几个过程做一个总结,什么是原型Js所有的函数都有一个prototype其实质就是对一个对象的引用,称之为原型(还是有点难理解,但先作为js的一种机制去理解,至于为什么,后面再往深入去探讨)在构造新的对象的普通对象的时候会产生一个__proto__属性指向它。

继续向下挖

好了,现在把js的原型和对象的产生理解清楚了,下面的事情就简单了,下面揭开上面图形中的Object的神秘面纱:funcA.prototype.__proto__指向的Object是一个什么东西?它的来源又是什么?我们在控制台上面输出当前的这个值结果如下:


根据上面的经验,我们可以推测出__proto__指向的应该是一个函数的原型,也就是说xxx.prototype=funcA.prototype.__proto__,这个xxx同时应该是当前这个Objectconstrcutor,好了下面看看猜想的对不对。

上面的红色框框的是输出的结果,由这个我们可以说我们说的是对的。同理既然Object是一个对象,那他的prototype__proto__又是什么呢?

由上面的内容可以看出,最终的原型是一个null,即说明 产生Object.prototype这个对象的“母体”的原型是null,总结上面的结果,可以总结到下面这张图上面:

好了,对于原型算是讨论差不多了,下面再说说比较特殊的Function,上点代码

 

复制代码
var foo=new Function("var str='c';console.log(str);");
foo();
console.log(foo);
console.log(foo.prototype);
console.log(foo.__proto__);
// 
复制代码

 

运行结果如下

由上面的结果可知,由Function产生的对象还是一个函数对象,foo.__proto__是一个空函数对象,foo.prototype是一个Object的实例对象。由上面可以推断出来,foo.__proto__===Function.prototype;true推出Function.prototype=function(){}(是一个空函数),既然Fuction,prototype是一个函数对象,那它的原型是什么呢?即查看Function.prototype.prototype=?这个值是多少呢?

由此可见,这个function(){}没有原型,他应该是原型的终结了,即全部函数的__proto__就都是function(){},即是Function.prototype,即所有的函数都是Function的一个实例对象,这也就解释了,js中一切皆对象的这句话。

再思考:我们已经找到函数的根了,那Function.prototype对象的根在哪里?Function.prototype已经是到了原型的终结了,那它又是怎么来的呢?我们再看看Function.prototype.__proto__=?这个到底是什么

从这个结果我们看到,Function.prototype.__proto__是一个Object的实例对象,从上面分析原型的时候我们都已经知道,这个“object”最终的__proto__的指向是null到目前为止我们心里虽然有很多的疑问,但觉得一切变得明朗起来,函数对象和普通对象是相通的,最终的指向都是一个null.总结一下,如下图:

 

上图是我们分析后所有的元素的关系,这个看起来清楚了许多,所有的对象的__proto__元素的终点都是null,如果撇开null元素,即所有的普通对象的基对象都是Object(Object函数的原型),包括Object的类型的普通对象;同理,所有的函数的__proto__都是function(){}(Function.prototype),当然也包含Function本身。看完这些是不是有一种从无中生一(null对象),一生二,二生万物的感觉?

可能有人也注意到了右正解的红色的Function,他也是他自己产生的,先不要急, 为了更好的说明上面的这个图我们再看下面的代码说明下:

 

复制代码
function funcA() {}
function funcB() {}
console.log(funcA.__proto__);
console.log(funcB.__proto__);
console.log(funcA.__proto__ === funcB.__proto__);
console.log(funcA.__proto__ === funcB.__proto__ && funcB.__proto__ === Number.__proto__ && Number.__proto__ === Function.__proto__);
console.log(Function.prototype == Function.__proto__);
复制代码

 

运行结果如下:

 

上面的运行结果也证明我的们想法,Function是一个特殊的对象,他的实例来源也来自于他自己,因为他的原型是一切函数的源头,他本身也是一个函数,所以就不奇怪Function.prototype===Function.__proto__是成立的。同理,一切函数对象的根源也都是一样的,所以下面的等式都成立了

 

复制代码
function funcA() {}
function funcB() {}
funcA.__proto__ === funcB.__proto__ ;
funcB.__proto__ === Number.__proto__ ;
Number.__proto__ === Function.__proto__;
Function.__proto__===Function.prototype
Number.__proto__ === Function.prototype;  // true
Boolean.__proto__ === Function.prototype; // true
String.__proto__ === Function.prototype ; // true
Object.__proto__ === Function.prototype;  // true
Function.__proto__ === Function.prototype; // true
Array.__proto__ === Function.prototype ;  // true
RegExp.__proto__ === Function.prototype;  // true
Error.__proto__ === Function.prototype;   // true
Date.__proto__ === Function.prototype;    // true
复制代码

 

说了这么多还没有讲到原型链,呵呵,上面如果都理解了,那么原型链这个东西就so easy了,不多说还是用代码说话:

 

 

复制代码
 var a={};
 a.__proto__.value="a";
 a.show=function(){
     console.log(this.value);
 }
 a.show();
复制代码

 

这段代码运行的结果是输出一个字母”a”,但是我们看到a的对象中没有value的这个字段,但同样也能输出,因为在它的__proto__上面有一个value属性,js在寻找属性的时候会沿着__proto__的去寻找,这个就是我们要说的原型链。原理很简单:如果在当前对象中找不到当前属性或者方法(value),那么就会沿着原型链开始找,一直遍历完整个的原型链,一旦找到,就返回第一个找到的属性获得方法,如果没有,就返回undefined

说了这么多,原型链到底有什么作用?也许很多人会说,可以用来继承,不过没错,但是我们还是要了解,为什么他可以继承,为什么 funcA.prototype=new funcB();这个就可以实现了所谓的继承。下面还是看代码:

 

复制代码
function funcA() {
    this.show = function(str) {
        console.log(str);
    }
}
function funcB() {
    this.read = function() {
    }
}
var a = new funcA();
funcB.prototype = a;
a.show("a");
var b=new funcB();
b.show("b");
复制代码

 

运行的结果如下:


这个是很常用的写法,可以看到b是可以调用funcA的方法的,这个是为什么呢,下面我们画一个原型的示意图

 

 


看到上面的图应该就明白了,因为
funcB的原型是a,所以导致b.__proto__=a,所以b就能够沿着原型链访问a中的方法,这样就实现了继承----原型链继承,又称为原型继承。

当前这种继承的方法可以不用这么写,原理清楚了,那就改下也没有什么,看一段简单粗暴的原型继承:

 

复制代码
function funcA() {
    this.show = function(str) {
        console.log(str);
    }
}
function funcB() {
    this.read = function() {}
}
var a = new funcA();
var b = new funcB();
b.__proto__ = a;
a.show("a");
b.show("b");
复制代码

这样和上面的输出的结果是一个的,但是这样的话只有对象b继承了a中的方法,但是再产生的funcB的新对象,却没有a中的方法:

如:

 

var c=new funcB();
c.show("c");//报错

 

当然实现的方法很多,下讲会讲说下js的三种继承方式,如果篇幅不大,会连着jsthis的一起写出来。下面在写一个个实现方法,供参考,原因在上面:

 

 

复制代码
function funcA() {
    this.show = function(str) {
        console.log(str);
    }
}
function funcB() {
    this.read = function() {}
}
var a = new funcA();
var b = new funcB();
 funcA.call(b);//use call
a.show("a");
b.show("b");
复制代码

写于2015.11.14

版权声明:本文为博主原创文章,未经博主允许不得转载。个人独立博客:http://blog.laofu.online/

JS高级---原型链(一看就懂,但18岁以下请绕道)

1)小明是小明妈生的,小狗是小狗妈生的。小明和小狗都是对象实例,而小明妈和小狗妈就是原型。原型也是对象,叫原型对象。      2)小明妈和小明爸啪啪啪能生出一堆小明明、小狗妈和小狗爸啪啪啪能生出一...
  • xiaotao_css
  • xiaotao_css
  • 2017年05月27日 16:14
  • 1329

深入理解原型链的本质

原型链是作为实现继承的主要方法,基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。 实现原型链的代码如下:function Super() { this.property = ...
  • code_ja
  • code_ja
  • 2016年06月29日 15:55
  • 798

JS重点整理之JS原型链彻底搞清楚

彻底搞清楚原型链。看图理解原型链。从对象、原型对象、原型链进行一步步分析,每一块都有根据自己的理解画图,更容易理解,又有例子代码佐证。 最普通的对象:有__proto__属性(指向其原型链...
  • sinat_21274091
  • sinat_21274091
  • 2016年10月06日 01:58
  • 8759

浅析JavaScript原型链与原型链式继承

原型链与原型链式继承上篇总结了下JavaScript的作用域链的问题,欢迎拍砖!浅析JavaScript作用域链继上篇总结中提出的情况 同样都是链,但这两个链往上追朔的顶点是不一样的;并且为了增强...
  • SirM2z
  • SirM2z
  • 2016年01月10日 20:44
  • 1058

javascript 原型、原型链、对象复制等原理和示例分析(下)

原型 原型是 JavaScript 面向对象特性中重要的概念,也是大家太熟悉的概念。因为在绝大多 数的面向对象语言中,对象是基于类的(例如 Java 和 C++ ) ,对象是类实例化的结果。而在 ...
  • luozhonghua2014
  • luozhonghua2014
  • 2015年05月09日 13:23
  • 943

js继承,各种继承的优缺点(原型链继承,组合继承,寄生组合继承)

javascript继承方式,以及各种继承的优缺点(原型链继承,组合继承,寄生组合继承)...
  • xuqinggangsls
  • xuqinggangsls
  • 2016年05月24日 15:09
  • 3754

JS原型与原型链终极详解_proto_、prototype及constructor

一. 普通对象与函数对象   JavaScript 中,万物皆对象!但对象也是有区别的。分为普通对象和函数对象,Object ,Function 是JS自带的函数对象。下面举例说明  functio...
  • bluesky1215
  • bluesky1215
  • 2017年02月06日 11:27
  • 760

JS原型和原型链

在了解JS原型和原型链之前 得先弄清楚JS的封装和继承 阮一峰大牛这三篇文章通俗易懂 我反复看了五六次 心里终于是有点普普: 封装:http://www.ruanyifeng.com/blog/20...
  • qietingfengdeyanse
  • qietingfengdeyanse
  • 2016年09月09日 17:52
  • 1414

彻底理解javascript中的原型链

要弄清楚原型链就要先弄清楚 function 类型,在javascript中没有类的概念,都是函数,所以它是一门函数式的编程语言。类有一个很重要的特性,就是它可以根据它的构造函数来创建以它为模板的对象...
  • ljl157011
  • ljl157011
  • 2014年02月22日 13:38
  • 12400

javascript中继承(一)-----原型链继承的个人理解

【寒暄】好久没有更新博客了,说来话长,因为我下定决心要从一个后台程序员转为Front End,其间走过了一段漫长而艰辛的时光,今天跟大家分享下自己对javascript中原型链继承的理解。 总的...
  • ladycode
  • ladycode
  • 2016年04月29日 15:51
  • 2915
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:第20篇 js高级知识---深入原型链
举报原因:
原因补充:

(最多只允许输入30个字)