脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS原型继承

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

 更新时间：2016年04月07日 15:50:09   投稿：lijiao  
这篇文章主要为大家详细介绍了javascript原型继承，阐明什么是原型继承,以及在JavaScript中究竟如何使用原型继承,感兴趣的小伙伴们可以参考一下

先为大家分享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实现Tooltip浮动提示框特效

    原生JavaScript实现Tooltip浮动提示框特效

    这篇文章主要为大家详细介绍了原生JavaScript设计和实现Tooltip浮动提示框特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • SpringMVC restful 注解之@RequestBody进行json与object转换

    SpringMVC restful 注解之@RequestBody进行json与object转换

    这篇文章主要介绍了SpringMVC restful 注解之@RequestBody进行json与object转换的相关资料,需要的朋友可以参考下
    2015-12-12
  • js函数setTimeout延迟执行的简单介绍

    js函数setTimeout延迟执行的简单介绍

    设置指定的JS函数在指定的时间后执行，可以利用setTimeout（）函数。
    2013-07-07
  • 基于Javascript实现文件实时加载进度的方法

    基于Javascript实现文件实时加载进度的方法

    不知道大家有没有发现在现在的移动页面上，有很多情况需要加载大量的资源。但是移动端的访问速度和pc还是有很大的差距，有些时候需要一些取巧的方式来提升用户体验，而实时显示加载进度就是其中一种。这篇文章就给大家分享了Javascript实现文件实时加载进度的方法。
    2016-10-10
  • javascript中闭包(Closure)详解

    javascript中闭包(Closure)详解

    闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。小编之前一直糊里糊涂的，没有能够弄明白JavaScript的闭包到底是什么，有什么用，本文把自己的理解些出来分享一下，希望不理解JavaScript闭包的朋友们看了之后能够理解闭包！
    2016-01-01
  • 你必须知道的Javascript知识点之"单线程事件驱动"的使用

    你必须知道的Javascript知识点之"单线程事件驱动"的使用

    本篇文章小编为大家介绍，你必须知道的Javascript知识点之"单线程事件驱动"的使用。需要的朋友参考下
    2013-04-04
  • javascript事件的绑定基础实例讲解（34）

    javascript事件的绑定基础实例讲解（34）

    这篇文章主要为大家详细介绍了javascript事件的绑定基础实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • JavaScript贪吃蛇小组件实例代码

    JavaScript贪吃蛇小组件实例代码

    本文通过实例代码给大家分享了JavaScript贪吃蛇小组件功能 ,需要的朋友可以参考下
    2017-08-08
  • 判断iOS、Android以及PC端的示例代码

    判断iOS、Android以及PC端的示例代码

    这篇文章主要给大家介绍了关于如何判断iOS、Android以及PC端的相关资料，主要是利用navigator.userAgent来实现，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧
    2018-11-11
  • 前端大文件分片下载具体实现方法(看这一篇就够了)

    前端大文件分片下载具体实现方法(看这一篇就够了)

    本文介绍了在浏览器中下载大文件的技术方案,包括分片下载、断点续传、进度条显示、取消及暂停下载和文件合并等功能,分片下载可以降低网络传输中断的风险,并减少内存占用,需要的朋友可以参考下
    2024-10-10

最新评论