Javascript中的类继承

Question

我想知道如何在 JavaScript 中模拟类继承。我知道 class 不适用于 JavaScript，我们使用的方式是 Functions 来创建对象并通过 Prototype 对象进行继承。

例如，如何将此结构转换为 JavaScript：

public class Mankind {
    public string name;
    public string lastname;
}

public class Person: Mankind {
    public void Run(string fromWhat) {
        //write the run logic
    }
}

这段代码在 JavaScript 中的等价物是什么。

编辑：

我还找到了另一个链接，其中 Douglas Crockford 解释了不同的继承模型，就像 CMS 所做的那样：Classical Inheritance in JavaScript。

希望它也对其他人有所帮助。

Answer 1

在 JavaScript 中有很多实现继承和行为重用的方法，也许与您的 基于类 OOP 示例更相似的方法是伪经典继承：

function Mankind (name, lastname) {
  this.name = name;
  this.lastname = lastname;
}

function Person (name, lastname) {
  this.name = name;
  this.lastname = lastname;

  this.run = function() {
    // run logic
  };
}
Person.prototype = new Mankind();
Person.prototype.walk = function () {
  // walk logic
};

run 和walk 的区别在于，第一个方法将存在于Person 的每个对象实例上，而第二个方法walk 将只存在于Person.prototype 中，并通过原型链。

在这个模式中你会看到一些代码重复，我们需要在继承的构造函数上初始化字段的逻辑，另一个避免这种情况的模式是构造函数应用程序：

function Mankind (name, lastname) {
  this.name = name;
  this.lastname = lastname;
}

function Person (name, lastname) {
  Mankind.apply(this, arguments);
  this.run = function() {
    // run logic
  };
}

更多信息：

• How to inherit from a class in JavaScript（各种例子）
• Inheritance Patterns in JavaScript（文章）
• Classical Inheritance in JavaScript（文章）

Answer 2

为 ES 6 更新：

class Mankind {
    constructor (lastName, firstName) {
      this.lastName = lastName;
      this.firstName = firstName;
    }
}

class Person extends Mankind {
    run (fromWhat) {
        //write the run logic
    }
}

Answer 3

查看 mooTools

http://mootools.net/docs/core/Class/Class

Answer 4

(function(){
function Mankind() {
    this.name = "joe";
}
function Person(){
    this.Run = function(fromWhat){
        alert(this.name + ' runs from ' + fromWhat + '!');
    }
}
Person.prototype = new Mankind;

var dude = new Person;
dude.Run('bear');
})()

javascript 使用函数来动态构建数据结构原型，而不是使用静态数据结构（类类型）定义。这是一个很大的飞跃，因为它允许您在收集足够的上下文以了解您真正需要的内容时构建一个结构。原型链也是动态的，这是另一个重大飞跃，我刚刚开始思考它。

不是更多的话，而是检查以下来源卢克：

(function(){
// prototype chaining example
function f1(){this.foo = "foo"}
function f2(){this.bar = "bar"}
function f3(){this.bat = "bat"}
f2.prototype = new f1();
f3.prototype = new f2();
var a = new f1;
var b = new f2;
var c = new f3;
// state is inherited
var member_list = [
a.foo, // "foo"
a.bar, // undefined
a.bat, // undefined
b.foo, // "foo"
b.bar, // "bar"
b.bat, // undefined
c.foo, // "foo"
c.bar, // "bar"
c.bat // "bat"
];
// prototypes are chained
var instanceof_list = [
a instanceof f1, // true
a instanceof f2, // false
a instanceof f3, // false
b instanceof f1, // true
b instanceof f2, // true
b instanceof f3, // false
c instanceof f1, // true
c instanceof f2, // true
c instanceof f3 // true
];

// try to break chain
function f4(){this.fu = "fu"}
f2.prototype = new f4;

// state is preserved
var member_list2 = [
a.foo, // "foo"
a.bar, // undefined
a.bat, // undefined
b.foo, // "foo"
b.bar, // "bar"
b.bat, // undefined
c.foo, // "foo"
c.bar, // "bar"
c.bat // "bat"
];
// chain not broken, but link is removed 
var instanceof_list2 = [
a instanceof f1, // true
a instanceof f2, // false
a instanceof f3, // false
b instanceof f1, // true
b instanceof f2, // false
b instanceof f3, // false
c instanceof f1, // true
c instanceof f2, // false
c instanceof f3 // true
];
// no new link is added
var instanceof_list3 = [
a instanceof f4, // false
b instanceof f4, // false
c instanceof f4 // false
];
debugger    
})()