JavaScript原型继承工作原理
原型继承的定义
当你阅读关于JS原型继承的解释时,你时常会看到以下这段文字:
当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止。——出自JavaScript秘密花园
大多数JavaScript的实现用 __proto__
属性来表示一个对象的原型链。在这篇文章里我们将看到__proto__
与 prototype
的区别何在。
注:__proto__
是一个不应在你代码中出现的非正规的用法,这里仅仅用它来解释JavaScript原型继承的工作原理。
以下代码展示了JS引擎如何查找属性:
function getProperty(obj, prop) {
if (obj.hasOwnProperty(prop))
return obj[prop] else if (obj.__proto__ !== null)
return getProperty(obj.__proto__, prop) else
return undefined
}
让我们举一个常见的例子:二维点,拥有二维坐标 x
y
,同似拥有一个 print
方法。
用之前我们说过的原型继承的定义,我们创建一个对象 Point
,拥有三个属性:x
,y
和 print
。为了能创建一个新的二维点,我们需要创建一个新的对象,让他其中的 __proto__
属性指向Point
:
var Point = {
x: 0,
y: 0,
print: function () { console.log(this.x, this.y); }
}; var p = {x: 10, y: 20, __proto__: Point};
p.print(); // 10 20
JavaScript怪异的原型继承
令人困惑的是,每个教授原型继承的人都不会给出上面那样的代码,反而会给出下面这样的代码:
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype = {
print: function () { console.log(this.x, this.y); }
}; var p = new Point(10, 20);
p.print(); // 10 20
这和说好的不一样啊,这里 Point
变成了函数,然后还有个什么 prototype
的属性,而且有了new
运算符。这他喵的是什么情况?
new 运算符是如何工作的
造物者 Brendan Eich 想让JS和传统的面向对象的编程语言差不太多,如Java和C++。在这些语言里,我们采用 new
运算符来给类实例化一个新的对象。所以他在JS里写了一个 new
运算符。
- C++里有用来初始化实例属性的构造函数概念,因此
new
运算符必须针对函数。 - 我们需要将对象的方法放到一个地方去,既然我们在用原型语言,我们就把它放到函数的原型属性中去。
new
运算符接受一个函数 F
及其参数:new F(arguments...)
。这一过程分为三步:
- 创建类的实例。这步是把一个空的对象的
__proto__
属性设置为F.prototype
。 - 初始化实例。函数
F
被传入参数并调用,关键字this
被设定为该实例。 - 返回实例。
现在我们知道了 new
是怎么工作的,我们可以用JS代码实现一下:
function New (f) {
var n = { '__proto__': f.prototype }; /*第一步*/
return function () {
f.apply(n, arguments); /*第二步*/
return n; /*第三步*/
};
}
一个小小的例子来看一下他的工作状况:
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype = {
print: function () { console.log(this.x, this.y); }
}; var p1 = new Point(10, 20);
p1.print(); // 10 20
console.log(p1 instanceof Point); // true var p2 = New (Point)(10, 20);
p2.print(); // 10 20
console.log(p2 instanceof Point); // true
JavaScript中真正的原型继承
JS的ECMA规范只允许我们采用 new
运算符来进行原型继承。但是大宗师 Douglas Crockford 却发现了一种可以利用 new
来实现真正的原型继承的方式!他写下了 Object.create
函数如下:
Object.create = function (parent) {
function F() {}
F.prototype = parent;
return new F();
};
这看起来蛮奇怪的,但却是相当的简洁:它创建了新的对象,并将其原型设置为你想设置的任意值。如果我们允许使用 __proto__
,那我们也可以这样写:
Object.create = function (parent) {
return { '__proto__': parent };
};
下面这段代码就是让我们的 Point
采用真正的原型继承:
var Point = {
x: 0,
y: 0,
print: function () { console.log(this.x, this.y); }
}; var p = Object.create(Point);
p.x = 10;
p.y = 20;
p.print(); // 10 20
JavaScript原型继承工作原理的更多相关文章
- 再谈javascript原型继承
Javascript原型继承是一个被说烂掉了的话题,但是自己对于这个问题一直没有彻底理解,今天花了点时间又看了一遍<Javascript模式>中关于原型实现继承的几种方法,下面来一一说明下 ...
- [转]Javascript原型继承
真正意义上来说Javascript并不是一门面向对象的语言,没有提供传统的继承方式,但是它提供了一种原型继承的方式,利用自身提供的原型属性来实现继承.Javascript原型继承是一个被说烂掉了的话题 ...
- 彻底理解Javascript原型继承
彻底理解Javascript原型继承 之前写过一篇Javascript继承主题的文章,这篇文章作为一篇读书笔记,分析的不够深入. 本文试图进一步思考,争取彻底理解Javascript继承原理 实例成员 ...
- JavaScript定时器的工作原理(翻译)
JavaScript定时器的工作原理(翻译) 标签(空格分隔): JavaScript定时器 最近在看ajax原理的时候,看到了一篇国外的文章,讲解了JavaScript定时器的工作原理,帮助我很好的 ...
- JavaScript学习总结(十七)——Javascript原型链的原理
一.JavaScript原型链 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法.其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.在JavaScript中, ...
- 我们应该如何去了解JavaScript引擎的工作原理
“读了你的几篇关于JS(变量对象.作用域.上下文.执行代码)的文章,我个人觉得有点抽象,难以深刻理解.我想请教下通过什么途径能够深入点的了解javascript解析引擎在执行代码前后是怎么工作的,ec ...
- 【读书笔记】读《编写高质量代码—Web前端开发修炼之道》 - JavaScript原型继承与面向对象
JavaScript是基于原型的语言,通过new实例化出来的对象,其属性和行为来自于两部分,一部分来自于构造函数,另一部分是来自于原型.构造函数中定义的属性和行为的优先级比原型中定义的属性和优先级高, ...
- 【转】我们应该如何去了解JavaScript引擎的工作原理
原文地址:http://www.nowamagic.net/librarys/veda/detail/1579 昨天收到一封来自深圳的一位前端童鞋的邮件,邮件内容如下(很抱歉,未经过他的允许,公开邮件 ...
- JavaScript 原型继承开端
1.原型继承本质 就javascript对象系统的实现来讲,对象并没有原型,而构造器有原型(构造器.prototype指向其原型).对象只有构造自某个原型的说法,并没有持有某个原型的说法. ...
随机推荐
- ASCII 对照表
ASCII(American Standard Code for Information Interchange,美国信息互换标准代码,ASCⅡ)是基于拉丁字母的一套电脑编码系统.它主要用于显示现代英 ...
- Confluence 6 使用 LDAP 授权连接一个内部目录概述
你可以为你的 Confluence 连接 LDAP 服务器使用使用委托认证.这个意思是 Confluence 将会设置一个内部目录,这个目录仅被用来处理 LDAP 的授权. 这个设置将会为尝试登录系统 ...
- Python基础--Python简介和入门
☞写在前面 在说Python之前,我想先说一下自己为什么要学Python,我本人之前也了解过Python,但没有深入学习.之前接触的语言都是Java,也写过一些Java自动化用例,对Java语言只能说 ...
- sql 智能提示
依次打开SSMS—>工具—>选项—>文本编辑器—>Transact-SQL—>IntelliSense—>检查右侧窗体是否启用!!
- 最新小程序教学视频,欢迎加小程序交流群免费获取(微信小程序开发(交流QQ群:604788754)
本群会定期分享在工作中做的一些小程序页面,不懂之处也可以随时咨询,可以互相交流学习. 教学视频直接入群,在群公告中显示,优秀小程序代码在群文件中免费获取. 今日代码小程序首页欢迎页面,效果图如下.代码 ...
- Python 编程核心知识体系-文件对象|错误处理(四)
错误处理 文件对象
- svn断开重连,避免重建工作空间
1. 右键项目-->Team-->断开连接 2.选择从文件系统中删除SVN元信息 3.右键项目-->Team-->share project-->svn 4.创建新的资源 ...
- SharePoint 2013的100个新功能之内容管理(一)
一:拖拽 现在在任意的文档库中,你可以拖拽文档到文档库区域,它会以进度条显示上传到文档库中.第一步鼠标点击文档拖动到文档库区域时,它会变成"拖到此处",第二步放开鼠标,上传. 二: ...
- L228 the complicated issue of equality: non-disabled actors play disabled roles
Bryan Cranston’s defence of playing a wheelchair user in the new comedy-drama The Upside has underli ...
- Apache 服务器认证 和重写
htaccess文件是Apache服务器中的一个配置文件,它负责相关目录下的网页配置.通过htaccess文件,可以帮我们实现:网页301重定向.自定义404错误页面.改变文件扩展名.允许/阻止特定的 ...