js中的原型链是一个很重要的概念,理解了原型链,对js程序的开发有很大的好处,废话不说,先上图:

javascript是基于原型的语言,所以一个对象可以另一个对象继承。不过javascript实现的时候有些周折,它并不是直接让一个对象继承自另一个对象。而是模仿其它基于类的语言,

也是生成构造函数。只不过javascript没有显示的声明函数,javascript的每个函数都可以当构造函数。在函数调用的时候,只要在前面加上new操作符就生成了一个实例,其实也是

一个对象。这个对象有一个内部属性__proto__指向了一个原型对象。当我们运行程序访问我们新建对象的属性或方法时,首先会在我们新建的对象里寻找该属性或方法,如果找到则

返回,如果没找到,则会通过该对象的__proto__属性,查找其原型对象有没有我们需要的属性或方法。

那我们新声明的对象的__proto__到底指向的是那个原型对象那?我们结合上图的例子看一下。

拿上面的构造函数A举例,函数A被创建时,A会附带生成一个prototype的属性,这个属性指向的对象用代码表示应该是:A.prototype = { constructor : A }。

new A()的__proto__属性就指向了A.prototype。那么在调用new运算符的时候发生了什么那?《javascript语言精粹》一书中说的非常好,想看详情的请移步这本书的第五章啊!

如果把new运算符看成一个方法,它的执行过程可能是这样的:

a、首先会创建一个新对象,将新对象的__proto__属性指向A.prototype。

b、调用构造函数A,绑定this到我们新创建的对象。

c、判断函数A调用后有没有是对象类型的返回值,如果有则返回该对象;如果没有则返回我们创建的新对象。

所以,虽然javascript是基于原型的语言,但是它并没有直接让对象从其他对象继承,而多了一步通过构造函数产生对象,再继承其他对象的步骤。

通过上图,还有我们需要注意的一些点:

1、在javascript里函数就是对象,只不过它比其他普通对象多了两个隐藏的属性:函数上下文和调用函数代码的调用属性而已。上图中构造函数A就是Function的一个实例,

  同样Object也是。

2、实例,构造函数,原型对象三者之间的关系要注意。实例和构造函数之间并没有什么直接关系。

3、通过对象的__proto__属性在查找属性时,如果找不到,会一直往上查找,直到Object.prototype这个根对象。

4、Function.prototype === Function.__proto__ ; Function是其自身的构造函数。即:Function.constructor === Function。

最后留个问题,结合上图,Object instanceof Object; Function instanceof Function;  Object instanceof Function; Function instanceof Object,的值分别是?why?

js的原型链的更多相关文章

  1. 前端基本知识(二):JS的原型链的理解

    之前一直对于前端的基本知识不是了解很详细,基本功不扎实,但是前端开发中的基本知识才是以后职业发展的根基,虽然自己总是以一种实践是检验真理的唯一标准,写代码实践项目才是唯一,但是经常遇到知道怎么去解决这 ...

  2. js javascript 原型链详解

    看了许多大神的博文,才少许明白了js 中原型链的概念,下面给大家浅谈一下,顺便也是为了巩固自己 首先看原型链之前先来了解一下new关键字的作用,在许多高级语言中,new是必不可少的关键字,其作用是为了 ...

  3. 怎么理解js的原型链继承?

    前言 了解java等面向对象语言的童鞋应该知道.面向对象的三大特性就是:封装,继承,多态. 今天,我们就来聊一聊继承.但是,注意,我们现在说的是js的继承. 在js的es6语法出来之前,我们想实现js ...

  4. 自己对js对原型链的理解

    js对象分为2种 函数对象和普通对象 函数对象 比如 function Show(){}var x=function Show2(){}var b=new Function("show3&q ...

  5. JS中原型链继承

    当我们通过构造函数A来实现一项功能的时候,而构造函数B中需要用到构造函数A中的属性或者方法,如果我们对B中的属性或者方法进行重写就会出现冗杂的代码,同时写出来也很是麻烦.而在js中每个函数都有个原型, ...

  6. js的原型链和constructor

    转载:http://www.108js.com/article/article1/10201.html?id=1092 请先瞻仰上边的这篇文章. 对象的原型链: box.__proto__.__pro ...

  7. 关于js中原型链的理解

    我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,一个对象.无论什么时候,我们只要创建一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性对象 ...

  8. js面向对象-原型链

    var Person = function (name) { this.name = name; } Person.prototype.say = function () { console.log( ...

  9. 从Object和Function说说JS的原型链

    ECMAScript规定了两个特殊的内置对象:Object和Function.他们的特殊性在于,他们本身既是对象又是函数,而他们同时也是对象和函数的构造器.这种自己生自己的逻辑显然违反人性,如果还停留 ...

随机推荐

  1. Win7显示隐藏文件,隐藏文件夹怎么显示?如何查看?

    隐藏文件技术是木马病毒传播最惯用的手法之一,它们利用大部分网友对基础操作的不熟悉特点,逃过用户的发现和检查,显示隐藏文件的标准设置方法大家都会使用,一旦隐藏问题与病毒木马结合起来,比如典型的autor ...

  2. 关闭“编辑窗体”后, 主窗体的DatagridView刷新数据的问题

    问题:在关闭一个窗体2后,要刷新窗体1内的datagridview的数据,直接窗体1.datagridview.datasource=dt 是没用的. 解决办法如下: 在主窗体里 创建编辑窗体时 加上 ...

  3. C盘空间不足,释放C盘空间

    最近电脑总是特别卡,后来发现C盘空间严重不足,只剩下几十兆,以前最严重的时候是剩下0kb可以,怎一个惨字了得... 我所知道的C盘空间不足会导致的几个主要问题有: 1)拷贝大文件会失败.因为拷贝和剪切 ...

  4. Java 源码学习线路————_先JDK工具包集合_再core包,也就是String、StringBuffer等_Java IO类库

    http://www.iteye.com/topic/1113732 原则网址 Java源码初接触 如果你进行过一年左右的开发,喜欢用eclipse的debug功能.好了,你现在就有阅读源码的技术基础 ...

  5. 事件[event]_C#

    事件(event): 1.       事件是类在发生其关注的事情时用来提供通知的方式.例如,封装用户界面控件的类可以定义一个在单击该控件时发生的事件.控件类不关心单击按钮时发生了什么,但它需要告知派 ...

  6. 关于web上的图片格式问题,新的彩蛋

    我们耳熟能详的几种格式无外乎 png-8,png-24,jpeg,gif,svg. 但是上面的那些都不是能够另人惊喜的答案.关于新技术的是Webp,Apng.(是否有关注新技术,新鲜事物) 1)Web ...

  7. bzoj 1005 HNOI2008 明明的烦恼

    这题做的我欲哭无泪啊…… 我已经没心情多说啥了…… 高精度T啊!我太弱啊!改了一天啊!还不如滚粗啊! 想好式子在写啊! 能用高精度乘单精度就不要用高精度乘高精度啊!     能用高精度除单精度就不要用 ...

  8. 在HTML5中怎样实现Canvas阴影效果

    该文章是由e良师益友技术部小陈原创作品,转载是请注明来源,谢谢! 今天我给大家介绍一下在HTML5中怎样实现Canvas阴影效果,我们知道现在HTML5的Canvas阴影也经常使用的,这个就是HTML ...

  9. MDM基于IOS设备管控功能的所有命令介绍

    前面我们介绍了IOS上MDM几个简单的控制命令的发送和返回数据的解析处理,下面我们介绍一下MDM涉及到的命令的操作介绍: 一.Control Commands(控制类命令) 1.Device Lock ...

  10. [转]主键冲突的话就更新否则插入 (ON DUPLICATE KEY UPDATE )

    mysql "ON DUPLICATE KEY UPDATE" 语法如果在INSERT语句末尾指定了ON DUPLICATE KEY UPDATE,并且插入行后会导致在一个UNIQ ...