JavaScript 命名空间、类和继承的简单示例答案

【问题标题】：Simple example of JavaScript namespaces, classes and inheritanceJavaScript 命名空间、类和继承的简单示例
【发布时间】：2011-08-18 00:45:21
【问题描述】：

我被要求将我们的一些 PHP 代码移植到 JavaScript，以便我们的更多逻辑在客户端运行。我想要一个简单的例子来显示：

包含两个类（“Master”和“Slave”）的命名空间（“Package”）
“Master”类有一个属性“p”、一个函数“m”和一个构造函数，该构造函数采用单个参数来设置“p”的初始值
“Slave”类从“Master”类继承“p”、构造函数和“m”

我不介意使用某种现有框架，但它必须是轻量级的——理想情况下不超过 200 LOC（未缩小）。

这是我的尝试，FWIW：

var Package = {};

Package.Master = function(pValue) {
    this.p = pValue;
    this.m = function() {
        alert("mmmmm");
    }
}

Package.Slave = function(pValue) {
    // this will inherit from Package.Master
}

// one of the many online examples:
// http://kevlindev.com/tutorials/javascript/inheritance/index.htm
KevLinDev.extend = function(subClass, baseClass) {
   function inheritance() {}
   inheritance.prototype = baseClass.prototype;

   subClass.prototype = new inheritance();
   subClass.prototype.constructor = subClass;
   subClass.baseConstructor = baseClass;
   subClass.superClass = baseClass.prototype;
}

KevLinDev.extend(Package.Slave, Package.Master);

【问题讨论】：

标签： javascript inheritance namespaces subclass

【解决方案1】：

我非常喜欢 John Resig 的 Simple Javascript Inheritance。

例如：

var Package = {};
Package.Master = Class.extend({
    init: function(pValue) {
        this.p = pValue;
    },
    m: function() {
        alert("mmmmm");
    }
});

Package.Slave = Package.Master.extend({
    init: function(pValue) {
        this._super(pValue);
    }
});

var slave = new Package.Slave(10);
slave.m();

【讨论】：

嘿...是的，昨天看到那个网站并把它关闭了，因为代码吓到我了。现在刚刚使用您的代码 sn-p 实现了它，它很有效！也比我想象的要容易得多...谢谢！
“代码吓到我了”……哈哈哈。这句台词让我咯咯笑
什么是类？当我尝试使用上面的代码时，它会显示一条错误消息“Uncaught ReferenceError: Class is not defined”

【解决方案2】：

我认为这是一种方法：

var Package = {};

Package.Master = function(pValue) {
    this.p = pValue;
    this.m = function() {
        alert("mmmmm");
    }
}

Package.Slave = function(pValue) {
    //Call constructor of super class
    Package.Master.call(this, pValue);
}

Package.Slave.prototype = new Package.Master;

【讨论】：

+1 是的，很好玩。我在这和马特的解决方案之间犹豫不决，这是公认的答案。谢谢你给了我丢失的两个 LOC！

【解决方案3】：

CoffeeScript 非常棒，并且有一个杀手级系统，比普通原型更容易处理。

这与您发布的内容大致相同。

Package = {}
class Package.Master
  constructor: (@p) ->
  m: -> alert 'mmmmm'

class Package.Slave extends Package.Master
  someSlaveMethod: -> foo 'bar'

这里生成的JS：https://gist.github.com/954177

【讨论】：

+1 我喜欢它！它结构紧凑，效果很好。不幸的是，额外的编译步骤对我们来说很困难，否则这将是完美的。感谢您向我展示新的东西！

【解决方案4】：

我正在尝试将我的全局 JavaScript 函数放入我目前正在从事的项目的命名空间中（我觉得我离恢复更近了一步，我公开承认这个），我发现这篇文章似乎很好地解释了应用命名空间的不同方法：

http://addyosmani.com/blog/essential-js-namespacing/

他谈到了五个选项，并继续推荐他认为最好的方法。

当然，这篇文章会引出更多内容丰富且有用的命名空间文章，带您踏上一段可爱的命名空间兔子洞之旅！

无论如何，希望这会有所帮助。

【讨论】：