js的原型链
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的原型链的更多相关文章
- 前端基本知识(二):JS的原型链的理解
之前一直对于前端的基本知识不是了解很详细,基本功不扎实,但是前端开发中的基本知识才是以后职业发展的根基,虽然自己总是以一种实践是检验真理的唯一标准,写代码实践项目才是唯一,但是经常遇到知道怎么去解决这 ...
- js javascript 原型链详解
看了许多大神的博文,才少许明白了js 中原型链的概念,下面给大家浅谈一下,顺便也是为了巩固自己 首先看原型链之前先来了解一下new关键字的作用,在许多高级语言中,new是必不可少的关键字,其作用是为了 ...
- 怎么理解js的原型链继承?
前言 了解java等面向对象语言的童鞋应该知道.面向对象的三大特性就是:封装,继承,多态. 今天,我们就来聊一聊继承.但是,注意,我们现在说的是js的继承. 在js的es6语法出来之前,我们想实现js ...
- 自己对js对原型链的理解
js对象分为2种 函数对象和普通对象 函数对象 比如 function Show(){}var x=function Show2(){}var b=new Function("show3&q ...
- JS中原型链继承
当我们通过构造函数A来实现一项功能的时候,而构造函数B中需要用到构造函数A中的属性或者方法,如果我们对B中的属性或者方法进行重写就会出现冗杂的代码,同时写出来也很是麻烦.而在js中每个函数都有个原型, ...
- js的原型链和constructor
转载:http://www.108js.com/article/article1/10201.html?id=1092 请先瞻仰上边的这篇文章. 对象的原型链: box.__proto__.__pro ...
- 关于js中原型链的理解
我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,一个对象.无论什么时候,我们只要创建一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性对象 ...
- js面向对象-原型链
var Person = function (name) { this.name = name; } Person.prototype.say = function () { console.log( ...
- 从Object和Function说说JS的原型链
ECMAScript规定了两个特殊的内置对象:Object和Function.他们的特殊性在于,他们本身既是对象又是函数,而他们同时也是对象和函数的构造器.这种自己生自己的逻辑显然违反人性,如果还停留 ...
随机推荐
- Windows Kernel Way 扉言
七年寒窗,但求一道. 笔者在学习windows/linux以及各类编程语言.框架之初因摸不到门路而磕磕绊绊,因寻不到明师而步履蹒跚,或不知缘从何起,或不知路在何处,只能尝试.回溯.重来.反反复复,竟也 ...
- 实现C#给系统其他窗口输入的思路
将窗口实现浮动,从而不获取焦点 使用系统API获取窗口的句柄 根据数据库或者xml文件等动态添加 使用系统API发送文本到达指定窗口输入框
- VS 2013的初配置
首先,安装vs2013,安装过程比较简单,也已有教程,在此不赘述.只想说一下,vs2013需要占C盘比较大的空间:所有功能都安装,且装在C盘的话,约需要9G左右,即使安装在其他盘,也需要占C盘6G左右 ...
- 《QQ欢乐斗地主》山寨版
使用Cocos2d-x编写,模仿<QQ欢乐斗地主>的界面实现了一个具有简单AI的单机版斗地主游戏. 游戏的详细说明请查看游戏目录下的help.txt文件. 下载地址: http://dow ...
- windows下nginx以服务自启动
1,下载最新版的 Windows Service Wrapper 程序,例如:"winsw-1.9-bin.exe" 也可以修改它的名字,例如:myapp.exe 2, 将重命名后 ...
- MySql中,复制旧表结构到新表
# 创建学生表 create table student(age int,name varchar(32))engine myisam charset utf8;insert into student ...
- Microsoft.DirectX.DirectSound学习(一)
背景:为什么用到这个类库呢?公司要一个要播放音频文件(.wav)的功能,本来想着很ez的事,网上提供的jq插件.本地也有很多播放器,怎么用都行.可当我实现的时候发现大部分网上插件在火狐上不支持.wav ...
- [OpenXml] Generate excel in memory and dump to file
public static void GenerateExcelFromStream() { using (MemoryStream memoryStream = new MemoryStream() ...
- ES6学习笔记(一)
1.let命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = 10; var b = 1; } a / ...
- Spark小课堂Week2 Hello Streaming
Spark小课堂Week2 Hello Streaming 我们是怎么进行数据处理的? 批量方式处理 目前最常采用的是批量方式处理,指非工作时间运行,定时或者事件触发.这种方式的好处是逻辑简单,不影响 ...