JavaScript简单继承

很多C#或C++开发人员习惯使用继承来开发项目,所以当他们想学习JavaScript语言时,第一个问题一般是:“我怎么在JavaScript中使用继承?”。

实际上JavaScript使用了一种不同于C#或C++的方法来创建面向对象语言。它是基于prototype的语言。原型概念表明行为是可以通过clone已经存在的对象来作为原型复用的。在JavaScript中每个对象都有原型,它定义了一系列对象可以使用的方法和成员。没有class,只有对象。每一个对象可以作为另一个对象的原型。

这个概念是非常灵活的,我们可以用它来模拟OOP继承。

实现继承

让我们想象我们使用JavaScript创建这个层次机构:

首先我们可以简单地创建ClassA。因为没有明确的类,我们只需创建一个函数定义一组行为:

var ClassA = function(){
    this.name = "class A";
}

使用new 关键字来实例化这个“类”:

var a = new ClassA();
ClassA.prototype.print = function(){
    console.log(this.name);
}

然后使用对象来使用它:

a.print()

很简单,对吧?

完整的样式只用了8行代码:

var ClassA = function() {
    this.name = "class A";
}

ClassA.prototype.print = function() {
    console.log(this.name);
}

var a = new ClassA();

a.print();

现在让我们来创建类之间的“继承”。这个工具只做一件简单的事:克隆原型:

var inheritsFrom = function(child, parent) {
    child.prototype = Object.create(parent,prototype);
};

奇迹发生了!通过clone原型,我们将所有成员和函数传给新类。

所以如果我们想添加第一个类的子类,只需要使用这段代码:

var ClassB = function() {
    this.name = "class B";
    this.surname = "I‘m the child";
}

inheritsFrom(ClassB, ClassA);

所以ClassB继承了ClassA的print函数,所以下面代码是有效的:

var b = new ClassB();
b.print();

所以产生以下输出:

class B

我们甚至可以覆盖ClassB的print函数:

ClassB.prototype.print = function(){
    ClassA.prototype.print.call(this);
    console.log(this.surname);
}

在这种情况下,输出是这样的:

class B
I’m the child

这里的技巧是调用ClassA.prototype来获取print函数。由于call函数我们可以对当前对象(this)调用基本函数。

创建ClassC是显而易见的:

var ClassC = function () {
    this.name = "class C";
    this.surname = "I‘m the grandchild";
}

inheritsFrom(ClassC, ClassB);

ClassC.prototype.foo = function() {
    // Do some funky stuff here...
}

ClassC.prototype.print = function () {
    ClassB.prototype.print.call(this);
    console.log("Sounds like this is working!");
}

var c = new ClassC();
c.print();

输出:

class C
I’m the grandchild
Sounds like this is working!

总结

最后,我想说明JavaScript不是C#或C++。它有自己的哲学。如果你说C++或C#程序员,并且你真的很想了解JavaScript所有精华,我给你最好的提示:不要试图将你的语言复制到JavaScript。没有最好的语言或最差的语言。只是不同的哲学!

链接: http://www.sitepoint.com/simple-inheritance-javascript/

时间: 2024-11-08 16:58:02

JavaScript简单继承的相关文章

javascript实现继承的方式

this this表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window: 如果在函数中使用this,则this指代什么是根据运行时此函数在什么对象上被调用. 我们还可以使用apply和call两个全局方法来改变函数中this的具体指向. 先看一个在全局作用范围内使用this的例子: <script type="text/javascript"> console.log(this === window);  // true console.log(w

javascript简单原型

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getS

javascript类继承

function extend(subClass, superClass) { var f = function() {}; f.prototype = superClass.prototype; subClass.prototype = new f(); subClass.superClass = superClass.prototype; } var parent = function (name, age) { this._name = name; this._age = age; };

html --- ajax --- javascript --- 简单的封装

Ajax的简单封装 Ajax的全称是AsynchronousJavaScriptAndXML 如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX 以及传智播客的视频教程:http://java.itcast.cn/news/8308d118/740a/4dcd/8dbf/c73d2fe5bc60.shtml 其实已经有好多框架对它进行了封装,但是还是有好多时候用到自己封装的 透露一下,本人是宇多田光的听众之一哦! 封装后的代码如下: 文件路径:\web\Ajax

javascript深度克隆与javascript的继承实现

1.javascript深度克隆: //注意这里的对象包括object和array function cloneObject(obj){ var o = obj.constructor === Array ? [] : {}; for(var key in obj){ if(obj.hasOwnProperty(key)){ o[key] = typeof obj[key] === "object" ? cloneObject(obj[key]) : obj[key]; } } ret

JavaScript原型继承的陷阱

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

浅话javascript的继承

javascript的继承和java或C#的继承是不一样的,后者是基于类的继承,而javascript是通过原型来继承的.所以,先得理一理原型是个什么鬼. 当一个函数对象被创建时,Function构造器产生的函数对象会运行类似这样一些代码:this.prototype={constructor:this},新对象被赋予prototype这样一个属性,它的值是一个包含constructor属性的对象.可以看出,这个constructor指向新对象本身.prototype属性指向的对象自然不会只有c

《javascript高级程序设计》读书笔记(一)javascript简单介绍

第一章:javascript简单介绍 Netscape Navigator 开发的javascript   Javascript的实现有三部分: 1.核心(ECMAScript):提供核心语言功能. 2.文档对象模型(DOM):提供訪问和操作网页内容的方法和接口. 3.浏览器对象模型(BOM):提供和浏览器交互的方法和接口. Web浏览器仅仅是ECMAScripr实现的可能宿主环境之中的一个. 五大主流Web浏览器(IE,Firefox,Safari,Chrome和Opera) 第二章:在Htm

javascript 简单工厂模式

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 var Bicycle = new Interface("Bicycle",[