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 相关文章推荐
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
Oct 19 Javascript
jQuery阻止事件冒泡具体实现
Oct 11 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
javascript实现动态表头及表列的展现方法
Jul 14 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 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 移除数组重复元素的一点说明
2008/11/27 PHP
PHP扩展开发入门教程
2015/02/26 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
使用Apache的rewrite
2021/03/09 Servers
JQuery 常用方法基础教程
2009/02/06 Javascript
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
vue-test-utils初使用详解
2019/05/23 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
Python中matplotlib中文乱码解决办法
2017/05/12 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
对Django url的几种使用方式详解
2019/08/06 Python
Python3 元组tuple入门基础
2020/02/09 Python
Python基于template实现字符串替换
2020/11/27 Python
国际花店:Pickup Flowers
2020/04/10 全球购物
奶茶店创业计划书范文
2014/01/17 职场文书
成人继续教育实施方案
2014/03/01 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
学生自我评语
2015/01/04 职场文书
怎样写离婚协议书
2015/01/26 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
MYSQL 运算符总结
2021/11/11 MySQL
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL