javascript原型继承工作原理和实例详解


Posted in Javascript onApril 07, 2016

先为大家分享JS原型继承实例,供大家参考,具体内容如下

一、JS原型继承

<!DOCTYPE html>
<html>

<head>
 <meta charset="UTF-8">
 <title>JS原型继承</title>
</head>

<body>
 <!--原型继承-->
 <script type="text/javascript">
 //clone()函数用来创建新的类Person对象
 var clone = function(obj) {
  var _f = function() {};
  //这句是原型式继承最核心的地方,函数的原型对象为对象字面量
  _f.prototype = obj;
  return new _f;
 }

 //先声明一个对象字面量
 var Animal = {
   somthing: 'apple',
   eat: function() {
    console.log("eat " + this.somthing);
   }
  }
  //不需要定义一个Person的子类,只要执行一次克隆即可
 var Cat = clone(Animal);
 //可以直接获得Person提供的默认值,也可以添加或者修改属性和方法
 console.log(Cat.eat());
 Cat.somthing = 'orange';
 console.log(Cat.eat());

 //声明子类,执行一次克隆即可
 var Someone = clone(Cat);
 </script>
</body>

</html>

二、JavaScript原型继承工作原理

JavaScript采用原型继承这事儿是众所皆知的,但由于它默认只提供了一个实现的实例,也就是 new 运算符,因此对于它的解释总是令人困惑,接下来阐明什么是原型继承以及在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

结论

我们已经了解了JS原型继承是什么,以及JS如何用特定的方式来实现之。然而使用真正的原型继承(如 Object.create 以及 __proto__)还是存在以下缺点:

标准性差:__proto__ 不是一个标准用法,甚至是一个不赞成使用的用法。同时原生态的 Object.create 和道爷写的原版也不尽相同。
优化性差: 不论是原生的还是自定义的 Object.create ,其性能都远没有 new 的优化程度高,前者要比后者慢高达10倍。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
表单元素事件 (Form Element Events)
Jul 17 Javascript
javascript 匿名函数的理解(透彻版)
Jan 28 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
javascript实现tab切换特效
Nov 12 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
vant 时间选择器--开始时间和结束时间实例
Nov 04 Javascript
浅析JS原型继承与类的继承
Apr 07 #Javascript
AngularJs 弹出模态框(model)
Apr 07 #Javascript
详解AngularJS 模态对话框
Apr 07 #Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 #Javascript
jQuery动态添加
Apr 07 #Javascript
javascript模块化简单解析
Apr 07 #Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 #Javascript
You might like
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
2009/11/07 Javascript
jQuery 动态酷效果实现总结
2009/12/27 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
2017/03/17 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
python实现粒子群算法
2020/10/15 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
医学实习生自我鉴定
2013/12/12 职场文书
感恩节活动方案
2014/01/27 职场文书
酒店营销策划方案
2014/02/07 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
教育见习报告范文
2014/11/03 职场文书
南京导游词
2015/02/03 职场文书
保送生自荐信
2015/03/06 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
Spring整合Mybatis的全过程
2021/06/28 Java/Android
php访问对象中的成员的实例方法
2021/11/17 PHP
JavaScript实现九宫格拖拽效果
2022/06/28 Javascript