JavaScript 的继承

【废话】
　　面试时被经理问到其中一个问题让我印象很深刻，因为我想了很久没能答上来。题目是 JavaScript是怎样实现继承的？ 面向对象是在开发过程中一直使用的，因此，继承也是最基础的一部分，自己开始接触JS到现在差不多两年多了，这个基础我竟然都没过关，看来我的理论功还要加大力度提升啊！！！我重新查了资料，终于深刻理解下来了。废话就这么多了，Coding Action...
【正文】
　　大家都知道，C#中使用的是传统的类继承是很简单，但在JS中，可就没这么简单了，因为它使用的是原型(prototype )继承，实现起来相对复杂了一点。


代码如下:

//定义 People 对象
var People = function () { };
People.prototype = {
Height: 175,
Walk: function () {
alert("People are walking...");
}
}
//定义 Me 对象
var Me = function () { };
//设置 Me 的 prototype 属性为 People 对象
Me.prototype = new People();
//将创建 Me 对象的引用指回给 Me
Me.prototype.constructor = Me;
//修改 Height 属性
Me.prototype.SetHeight = function (v) {
Me.prototype.Height = v;
}
//新增 Stop 动作
Me.prototype.Stop = function () {
alert("I'm Stop.");
}
var m = new Me();
//结果为 People are 175cm tall.
alert("People are " + m.Height + "cm tall.");
m.SetHeight(185);
//结果为 I'm 185cm tall.
alert("I'm " + m.Height + "cm tall.");
//结果为 People are walking...
m.Walk();
//结果为 I'm Stop.
m.Stop();
var y = new Me();
//结果为 You're 185cm tall.
alert("You're " + y.Height + "cm tall.");

从上面例子可以看出，Me对象即继承了People对象，可以访问People原型的属性和动作，又可以有Me自己的动作和属性。需特别注意的是，上面例子中实例化了一个y=new Me()，但显示它的Height属性时，并不是原始是175，而是被m实例修改后的185， 因此，new Me() 并不会创建一个新的People实现，而是重复使用它原型上的实例。因此上面例子，所有的Me对象都会共享相同的Height属性，这一点在继承使用中要特别留意。

赞 (0)

相关推荐

  • javascript类继承机制的原理分析

    目前 javascript的实现继承方式并不是通过"extend"关键字来实现的,而是通过 constructor function和prototype属性来实现继承.首先我们创建一个animal 类 js 代码 复制代码 代码如下: var animal = function (){ //这就是constructor function 了 this .name = 'pipi'; this .age = 10; this .height = 0; } //建立一个动物的实例 var

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

    先为大家分享JS原型继承实例,供大家参考,具体内容如下 一.JS原型继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS原型继承</title> </head> <body> <!--原型继承--> <script type="text/javascript"> //cl

  • 学习javascript面向对象 javascript实现继承的方式

    本文实例为大家介绍了javascript实现继承的6种方式,分享给大家供大家参考,具体内容如下 1.[原型链继承]实现的本质是重写原型对象,代之以一个新类型的实例.实际上不是SubType的原型的constructor属性被重写了,而是SubType的原型指向了另一个对象--SuperType的原型,而这个原型对象的construtor属性指向的是SuperType function SuperType(){ this.property = true; } SuperType.prototype

  • javascript关于继承的用法汇总

    本文实例汇总了javascript关于继承的用法.分享给大家供大家参考.具体如下: 例子: 复制代码 代码如下: /** * 实现子类继承父类,但不会产生多余的属性和方法 * @returns {Function} */ define(function(){ return function(subType, superType){ var proto = new Object(superType.prototype); proto.constructor = subType; subType.p

  • 详述JavaScript实现继承的几种方式(推荐)

    详述JavaScript实现继承的几种方式(推荐)

    ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的. 原型链 原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.每一个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的指针.如果:我们让原型对象A等于另一个类型B的实例,那么原型对象A就会有一个指针指向B的原型对象,相应的B的原型对象中保存着指向其构造函数的指针.假如B的原型对象又是另一个类型的实例,那么上述的关系依旧成立,如此层层递进,就构成了实例与原型的

  • 学习JavaScript设计模式(继承)

    学习JavaScript设计模式(继承)

    1.继承 在javascript中继承是一个非常复杂的话题,比其他任何面向对象语言的中的继承都复杂得多.在大多数其他面向对象语言中,继承一个类只需要使用一个关键字即可.与它们不同,在javascript中要想达到传承公用成员的目的,需要采取一系列措施.更有甚者,javascript属于使用原型式继承的少数语言之一.利益于这种语言的灵活性,你既可使用标准的基于类的继承,也可使用更微妙一些的原型式继承. 2.为什么需要继承? 一般来说,在设计类的时候,我们希望能减少重复性的代码,并且尽量弱化对象间的

  • JavaScript类继承及实例化的方法

    本文实例讲述了JavaScript类继承及实例化的方法.分享给大家供大家参考.具体如下: (function(){ var Class = { //扩展类 create: function(aBaseClass, aClassDefine){ var $class = function(){ for(var member in aClassDefine){ this[member] = aClassDefine[member]; } if('undefined'===typeof aClassD

  • 理解javascript对象继承

    先从一个问题进行研究深入,什么是javascript对象继承? 比如我们有一个"动物"对象的构造函数. function animal() { this.type = '动物'; } 还有一个"猫"对象的构造函数. function cat(name,color) { this.name = name; this.color = color; } 我们知道猫也属于动物,如果这个猫对象想要继承动物对象的属性,我们该怎么做呢? 构造函数绑定 使用构造函数绑定是最简单的方

  • JavaScript 原型继承之构造函数继承

    上回说到<JavaScript 原型继承之基础机制>,这一篇将具体说说构造函数的继承. 从一个简单的示例开始,创建描述人类的 People 构造函数: 复制代码 代码如下: function People(){ this.race = '愚蠢的人类'; } 然后,创建描述黄种人的 Yellow 构造函数: 复制代码 代码如下: function Yellow(name, skin){ this.name = name; this.skin = skin; } 要使得黄种人 Yellow 能继承

  • JavaScript中继承用法实例分析

    本文实例分析了JavaScript中继承的用法.分享给大家供大家参考.具体如下: // define the Person Class function Person() {} Person.prototype.walk = function(){ alert ('I am walking!'); }; Person.prototype.sayHello = function(){ alert ('hello'); }; // define the Student class function

随机推荐