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 相关文章推荐
JavaScript 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
jQuery Jcrop插件实现图片选取功能
Nov 23 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
详细分析Node.js 多进程
Jun 22 Javascript
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
人大复印资料处理程序_补充篇
2006/10/09 PHP
一个分页的论坛
2006/10/09 PHP
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
js no-repeat写法 背景不重复
2009/03/18 Javascript
toString()一个会自动调用的方法
2010/02/08 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
python判断正负数方式
2020/06/03 Python
python中的时区问题
2021/01/14 Python
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
C#中的验证控件有几种
2014/03/08 面试题
专业幼师实习生自我鉴定范文
2013/12/08 职场文书
学校安全教育制度
2014/01/31 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
退休教师追悼词
2015/06/23 职场文书
JS数组去重详情
2021/11/07 Javascript
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python