JavaScript原型继承工作原理

时间:2022-10-27 03:00:23

原型继承的定义

当你阅读关于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 ,拥有三个属性:xy 和 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...)。这一过程分为三步:

  1. 创建类的实例。这步是把一个空的对象的 __proto__ 属性设置为 F.prototype 。
  2. 初始化实例。函数 F 被传入参数并调用,关键字 this 被设定为该实例。
  3. 返回实例。

现在我们知道了 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原型继承工作原理的更多相关文章

  1. 再谈javascript原型继承

    Javascript原型继承是一个被说烂掉了的话题,但是自己对于这个问题一直没有彻底理解,今天花了点时间又看了一遍<Javascript模式>中关于原型实现继承的几种方法,下面来一一说明下 ...

  2. &lbrack;转&rsqb;Javascript原型继承

    真正意义上来说Javascript并不是一门面向对象的语言,没有提供传统的继承方式,但是它提供了一种原型继承的方式,利用自身提供的原型属性来实现继承.Javascript原型继承是一个被说烂掉了的话题 ...

  3. 彻底理解Javascript原型继承

    彻底理解Javascript原型继承 之前写过一篇Javascript继承主题的文章,这篇文章作为一篇读书笔记,分析的不够深入. 本文试图进一步思考,争取彻底理解Javascript继承原理 实例成员 ...

  4. JavaScript定时器的工作原理(翻译)

    JavaScript定时器的工作原理(翻译) 标签(空格分隔): JavaScript定时器 最近在看ajax原理的时候,看到了一篇国外的文章,讲解了JavaScript定时器的工作原理,帮助我很好的 ...

  5. JavaScript学习总结&lpar;十七&rpar;——Javascript原型链的原理

    一.JavaScript原型链 ECMAScript中描述了原型链的概念,并将原型链作为实现继承的主要方法.其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.在JavaScript中, ...

  6. 我们应该如何去了解JavaScript引擎的工作原理

    “读了你的几篇关于JS(变量对象.作用域.上下文.执行代码)的文章,我个人觉得有点抽象,难以深刻理解.我想请教下通过什么途径能够深入点的了解javascript解析引擎在执行代码前后是怎么工作的,ec ...

  7. 【读书笔记】读《编写高质量代码—Web前端开发修炼之道》 - JavaScript原型继承与面向对象

    JavaScript是基于原型的语言,通过new实例化出来的对象,其属性和行为来自于两部分,一部分来自于构造函数,另一部分是来自于原型.构造函数中定义的属性和行为的优先级比原型中定义的属性和优先级高, ...

  8. 【转】我们应该如何去了解JavaScript引擎的工作原理

    原文地址:http://www.nowamagic.net/librarys/veda/detail/1579 昨天收到一封来自深圳的一位前端童鞋的邮件,邮件内容如下(很抱歉,未经过他的允许,公开邮件 ...

  9. JavaScript 原型继承开端

    1.原型继承本质       就javascript对象系统的实现来讲,对象并没有原型,而构造器有原型(构造器.prototype指向其原型).对象只有构造自某个原型的说法,并没有持有某个原型的说法. ...

随机推荐

  1. js&comma;jquery获取浏览器信息

    1.js获取: 查看:window.navigator 2.jQuery获取: chrome firefox 推荐使用navigator获取userAgent然后去正则匹配 参考匹配规则:http:/ ...

  2. UVa 112 - Tree Summing(树的各路径求和&comma;递归)

    题目来源:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=3&pa ...

  3. ARTS打卡第四周

    Algorithm 只出现一次的数字   给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 说明: 你的算法应该具有线性时间复杂度. 你可以不使用 ...

  4. 【30集iCore3&lowbar;ADP出厂源代码&lpar;ARM部分&rpar;讲解视频】30-13 emWin底层驱动接口介绍

    视频简介:该视频介绍emWin底层驱动接口. 源视频包下载地址:链接:http://pan.baidu.com/s/1nvPpC2d 密码:cbb7 银杏科技优酷视频发布区:http://i.youk ...

  5. 04 flask 项目整体构建

    本文主要的目标是创建flask基本的项目架构,总体架构: 详细的项目目录结构: Flask 项目创建的过程 一.项目(students)创建初始化工作 1. 创建项目的虚拟环境 mkvirtualen ...

  6. input 模糊搜索

    <html> <head> <title>test</title> <script type="text/javascript&quot ...

  7. python 多线程中的同步锁 Lock Rlock Semaphore Event Conditio

    摘要:在使用多线程的应用下,如何保证线程安全,以及线程之间的同步,或者访问共享变量等问题是十分棘手的问题,也是使用多线程下面临的问题,如果处理不好,会带来较严重的后果,使用python多线程中提供Lo ...

  8. C&num; 使用DateTime&period;TryParseExact将自定义日期类型转换成日期

    在C#中如果将一个字符串类型的日期转换成日期类型很方便的 即使用Convert.ToDateTime("2015/01/01").ToString()或DateTime.TryPa ...

  9. Idea Spring-boot gradle lombok

    1:build.gradle compile("org.projectlombok:lombok:1.16.16") 2:idea安装lombok插件 3:设置 4:重启

  10. JSP的EL和JSTL解析

    1. EL 简介EL 全名为Expression Language,所有EL都是以${ 为起始.以} 为结尾的.EL 语法很简单,它最大的特点就是使用上很方便. 接下来介绍EL 主要的语法结构: ${ ...