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倍。

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

赞 (0)

相关推荐

  • JavaScript 原型继承

    Object.prototype JavaScript是基于原型继承的,任何对象都有一个prototype属性.Object.prototype是所有对象的根,并且不可改变. 复制代码 代码如下: Object.prototype=null; alert(Object.prototype);//[object Object] Object与Object.prototype Object继承于Object.prototype,增加一个属性给Object.prototype上,同时也会反应到Obje

  • 关于JavaScript中原型继承中的一点思考

    关于JavaScript中原型继承中的一点思考

    我们先看一段传统的继承代码: 复制代码 代码如下: //定义超类 function Father(){ this.name = "父亲"; } Father.prototype.theSuperValue = ["NO1","NO2"]; //定义子类 function Child(){ } //实现继承 Child.prototype = new Father(); //修改共享数组 Child.prototype.theSuperValue.

  • 再谈javascript原型继承

    再谈javascript原型继承

    真正意义上来说Javascript并不是一门面向对象的语言,没有提供传统的继承方式,但是它提供了一种原型继承的方式,利用自身提供的原型属性来实现继承. 原型与原型链 说原型继承之前还是要先说说原型和原型链,毕竟这是实现原型继承的基础. 在Javascript中,每个函数都有一个原型属性prototype指向自身的原型,而由这个函数创建的对象也有一个__proto__属性指向这个原型,而函数的原型是一个对象,所以这个对象也会有一个__proto__指向自己的原型,这样逐层深入直到Object对象的

  • JavaScript的原型继承详解

    JavaScript的原型继承详解

    JavaScript是一门面向对象的语言.在JavaScript中有一句很经典的话,万物皆对象.既然是面向对象的,那就有面向对象的三大特征:封装.继承.多态.这里讲的是JavaScript的继承,其他两个容后再讲. JavaScript的继承和C++的继承不大一样,C++的继承是基于类的,而JavaScript的继承是基于原型的. 现在问题来了. 原型是什么?原型我们可以参照C++里的类,同样的保存了对象的属性和方法.例如我们写一个简单的对象 复制代码 代码如下: function Animal

  • 浅谈javascript的原型继承

    请看源码: 复制代码 代码如下: function clone(o) { var F = function(){}; F.prototype = o; return new F(); } 首先看ext(4.1的1896行开始)的原型式继承. 复制代码 代码如下: var TemplateClass = function(){}; var ExtObject = Ext.Object = { chain: function (object) { TemplateClass.prototype =

  • 浅析JavaScript原型继承的陷阱

    浅析JavaScript原型继承的陷阱

    JavaScript默认采用原型继承.虽然没有类(class)的概念,它的函数(function)可以充当构造器(constructor).构造器结合this,new可以构建出类似Java的类.因此,JavaScript通过扩展自身能模拟类式(class-based)继承. JavaScript和其它面向对象语言一样,对象类型采用引用方式.持有对象的变量只是一个地址,而基本类型数据是值.当原型上存储对象时,就可能有一些陷阱. 先看第一个例子 复制代码 代码如下: var create = fun

  • JavaScript中的原型继承基础学习教程

    大多数编程语言中,都有类和对象,一个类可以继承其他类. 在JavaScript中,继承是基于原型的(prototype-based),这意味着JavaScript中没有类,取而代之的是一个对象继承另一个对象.:) 1. 继承, the proto 在JavaScript中,当一个对象rabbit继承另一了对象animal时,这意味着rabbit对象中将会有一个特殊的属性:rabbit.__proto__ = animal; 当访问rabbit对象时,如果解释器在rabbit中不能找到属性,那么它

  • JavaScript原型继承_动力节点Java学院整理

    JavaScript原型继承_动力节点Java学院整理

    在传统的基于Class的语言如Java.C++中,继承的本质是扩展一个已有的Class,并生成新的Subclass. 由于这类语言严格区分类和实例,继承实际上是类型的扩展.但是,JavaScript由于采用原型继承,我们无法直接扩展一个Class,因为根本不存在Class这种类型. 但是办法还是有的.我们先回顾Student构造函数: function Student(props) { this.name = props.name || 'Unnamed'; } Student.prototyp

  • 详谈js原型继承的一些问题

    当我们使用原型链继承时,需要谨慎的定义原型上的方法和属性,因为这可能带来意外的结果. 一.谨慎的定义原型上的方法. 当我们想为一个构造函数的原型上定义一个方法时,一定要在更改原型后再定义,否则新的原型对象上不会有定义的这个方法,导致与我们预期的结果不同.例: function superObj(){} superObj.prototype.sayHi=function sayHi(){ console.log('hi'); }; superObj.prototype={ name:'Poly'

  • 浅析JS原型继承与类的继承

    我们先看JS类的继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS类的继承</title> </head> <body> /* -- 类式继承 -- */ <script type="text/javascript"> //先声明一个超类 var Animal = function

  • js原型继承的两种方法对比介绍

    在实际的项目中,我们通常都是用构造函数来创建一个对象,再将一些常用的方法添加到其原型对象上.最后要么直接实例化该对象,要么将它作为父类,再申明一个对象,继承该父类. 而在继承的时候有两种常用方式,今天我们就来稍作探讨 复制代码 代码如下: //父类 function Person(name){    this.name = name;}; // 子类 function Student(sex){  Person.apply(this,arguments); //继承父类的构造函数  this.s

随机推荐