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 相关文章推荐
Jquery 设置标题的自动翻转
Oct 03 Javascript
javascript hashtable实现代码
Oct 13 Javascript
一个简单的jQuery插件制作 学习过程及实例
Apr 25 Javascript
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
angularjs $http调用接口的方式详解
Aug 13 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 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/07/12 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
javascript instanceof,typeof的区别
2010/03/24 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
web打印小结
2017/01/11 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
Vue 一键清空表单的实现方法
2020/02/07 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
Vue微信公众号网页分享的示例代码
2020/05/28 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
Python制作Windows系统服务
2017/03/25 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
用Eclipse写python程序
2018/02/10 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
python中如何打包用户自定义模块
2020/09/23 Python
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
自我推荐信格式模板
2015/03/24 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
PHP策略模式写法
2021/04/01 PHP
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js
Oracle用户管理及赋权
2022/04/24 Oracle
Mysql开启外网访问
2022/05/15 MySQL
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS