Question

我正在学习JavaScript。我来自C＃背景。在C＃中，存在部分类的概念。换句话说，一种跨文件拆分类定义的方法。有没有办法在JavaScript中执行此操作？

目前，我有一个像这样的目录结构：

/
  MyClass.js
  child-folder
    MyClassAdditions.js

MyClass.js

function MyClass() {
}

有没有办法从MyClassAdditions.js向MyClass添加其他功能？如果是这样，怎么样？

Answer 1

更新2018-05-21 - JavaScript现在有正式的类，语法如下：

class MyClass {
  constructor(param1) {
    this.param1 = param1;
  }
  // This is the same as MyClass.prototype.printParams
  printPrams() {
    console.log("The value of param1 is", this.param1);
  }
}

2015年的原始答案：

虽然JS目前没有正式类，但您可以创建可以实例化的构造函数对象。您甚至可以扩展这些对象或稍后添加它们。这是一个简单的例子：

// create your constructor
var MyClass = function(param1) {
    // create instance properties here
    this.param1 = param1;
};

// all instances of your class will point to the constructors prototype
MyClass.prototype.printParams = function () {
    console.log("The value of param1 is", this.param1);
};

// lets create two instances so we can see how the prototype thing works
var foo = new MyClass("foo");
var bar = new MyClass("bar");

foo.printParams(); // => The value of param1 is foo
bar.printParams(); // => The value of param1 is bar

foo.param1 = "oof";
foo.printParams(); // => The value of param1 is oof

// Now, lets change how printParams works.
// Remember, we still have instances of foo and bar already created.
// Since they both point to their constructors prototype, you 
// can change things later... at any time.
MyClass.prototype.printParams = function () {
    console.log("PARAM1 SAID WHAT??", this.param1);
};
MyClass.prototype.sayNothing = function () {
    console.log("nothing");
};

// All instances get these new methods, yay prototypal inheritance
foo.printParams(); // => PARAM1 SAID WHAT?? oof
bar.printParams(); // => PARAM1 SAID WHAT?? bar
foo.sayNothing(); // => nothing
bar.sayNothing(); // => nothing

// Lets say we want foo to have it's own sayNothing method, 
// you can define one on the instance itself - not really cool, but doable
foo.sayNothing = function () {
    console.log("nothing at all");
    // If you want to be cool, you can call the shared prototype method too
    this.constructor.prototype.sayNothing.call(this);
};

// bar is still going to use the method defined on the prototype
// while foo will have its own implementation of sayNothing
foo.sayNothing(); // => nothing at all
                  // => nothing
bar.sayNothing(); // => nothing

Answer 2

由于我有类似的问题，我推荐这种方式，我认为你无处可寻，我发现每个部分都在一个单独的文件中：

加载主js文件时，定义类MyClass（）：

<强> MyClass = {}

然后在您应该处理笔记本电脑信息的MyClass.js文件中，您可以定义一些这样的功能和属性：

MyClass.laptop = { brand : "Dell", model: "1525", color: "silver", getBrandAndModel: function(){ return MyClass.laptop.brand + ", " + MyClass.laptop.model; }, getBrandAndColor: function(){ return MyClass.laptop.brand + ", " + MyClass.laptop.color; }, colorizeIt: function(colorName){ return MyClass.laptop.brand + ", " + colorName; } }

现在在你要处理手机信息的MyClassAdditions.js中你会这样：

MyClass.cellphone = { brand : "Samsung", color: "Black", width: 8, height: 15, getDimention: function(){ return MyClass.cellphone.width + " * " + MyClass.cellphone.height; }, }

通过这种方式，您将两个独立的js文件中的两个部分添加到名为 MyClass 的对象中。

现在测试这些示例以确保它确实有效：

    MyClass.laptop.brand  //"Dell"
    MyClass.laptop.getBrandAndColor() //"Dell, silver"
    MyClass.cellphone.color //"Black"
    MyClass.cellphone.getDimention() //"8 * 15"

就像您首先创建了以下对象一样：

  MyClass = {
    laptop : {
        brand : "Dell",
        model: "1525",
        color: "silver",
        getBrandAndModel: function(){
            return MyClass.laptop.brand + ", " + MyClass.laptop.model;
        },
        getBrandAndColor: function(){
            return MyClass.laptop.brand + ", " + MyClass.laptop.color;
        },
        colorizeIt: function(colorName){
            return MyClass.laptop.brand + ", " + colorName;
        }
     },
     cellphone :{
        brand : "Samsung",
        color: "Black",
        width: 8,
        height: 15,
        getDimention: function(){
            return MyClass.cellphone.width + " * " + MyClass.cellphone.height;
        },
     }
  }

顺便说一句，您可以通过关键字delete删除对象的一部分，如下所示：

delete  MyClass.cellphone

现在MyClass.cellphone返回undefined，而MyClass.laptop返回对象。

多个文件中的JavaScript类定义

2 个答案: