我更喜欢在大型项目中使用OOP,比如我现在正在做的项目。我需要在JavaScript中创建几个类,但是,如果我没有弄错的话,至少有几种方法可以做到这一点。它的语法是什么,为什么要这样做?

我希望避免使用第三方库——至少一开始是这样。 为了寻找其他答案,我找到了一篇文章《JavaScript面向对象编程,第一部分:继承- JavaScript文档》,它讨论了JavaScript中的面向对象编程。是否有更好的继承方式?


当前回答

我更喜欢使用Daniel X. Moore的{SUPER: SYSTEM}。这是一个提供诸如真正的实例变量、基于特征的继承、类层次结构和配置选项等好处的规程。下面的例子说明了真正实例变量的使用,我认为这是最大的优势。如果你不需要实例变量,并且只喜欢公共或私有变量,那么可能有更简单的系统。

function Person(I) {
  I = I || {};

  Object.reverseMerge(I, {
    name: "McLovin",
    age: 25,
    homeState: "Hawaii"
  });

  return {
    introduce: function() {
      return "Hi I'm " + I.name + " and I'm " + I.age;
    }
  };
}

var fogel = Person({
  age: "old enough"
});
fogel.introduce(); // "Hi I'm McLovin and I'm old enough"

哇,这本身并不是很有用,但是看看添加一个子类:

function Ninja(I) {
  I = I || {};

  Object.reverseMerge(I, {
    belt: "black"
  });

  // Ninja is a subclass of person
  return Object.extend(Person(I), {
    greetChallenger: function() {
      return "In all my " + I.age + " years as a ninja, I've never met a challenger as worthy as you...";
    }
  });
}

var resig = Ninja({name: "John Resig"});

resig.introduce(); // "Hi I'm John Resig and I'm 25"

另一个优点是能够拥有基于模块和trait的继承。

// The Bindable module
function Bindable() {

  var eventCallbacks = {};

  return {
    bind: function(event, callback) {
      eventCallbacks[event] = eventCallbacks[event] || [];

      eventCallbacks[event].push(callback);
    },

    trigger: function(event) {
      var callbacks = eventCallbacks[event];

      if(callbacks && callbacks.length) {
        var self = this;
        callbacks.forEach(function(callback) {
          callback(self);
        });
      }
    },
  };
}

一个让person类包含可绑定模块的例子。

function Person(I) {
  I = I || {};

  Object.reverseMerge(I, {
    name: "McLovin",
    age: 25,
    homeState: "Hawaii"
  });

  var self = {
    introduce: function() {
      return "Hi I'm " + I.name + " and I'm " + I.age;
    }
  };

  // Including the Bindable module
  Object.extend(self, Bindable());

  return self;
}

var person = Person();
person.bind("eat", function() {
  alert(person.introduce() + " and I'm eating!");
});

person.trigger("eat"); // Blasts the alert!

披露:我是丹尼尔·x·摩尔,这是我的{SUPER: SYSTEM}。这是用JavaScript定义类的最佳方式。

其他回答

我更喜欢使用Daniel X. Moore的{SUPER: SYSTEM}。这是一个提供诸如真正的实例变量、基于特征的继承、类层次结构和配置选项等好处的规程。下面的例子说明了真正实例变量的使用,我认为这是最大的优势。如果你不需要实例变量,并且只喜欢公共或私有变量,那么可能有更简单的系统。

function Person(I) {
  I = I || {};

  Object.reverseMerge(I, {
    name: "McLovin",
    age: 25,
    homeState: "Hawaii"
  });

  return {
    introduce: function() {
      return "Hi I'm " + I.name + " and I'm " + I.age;
    }
  };
}

var fogel = Person({
  age: "old enough"
});
fogel.introduce(); // "Hi I'm McLovin and I'm old enough"

哇,这本身并不是很有用,但是看看添加一个子类:

function Ninja(I) {
  I = I || {};

  Object.reverseMerge(I, {
    belt: "black"
  });

  // Ninja is a subclass of person
  return Object.extend(Person(I), {
    greetChallenger: function() {
      return "In all my " + I.age + " years as a ninja, I've never met a challenger as worthy as you...";
    }
  });
}

var resig = Ninja({name: "John Resig"});

resig.introduce(); // "Hi I'm John Resig and I'm 25"

另一个优点是能够拥有基于模块和trait的继承。

// The Bindable module
function Bindable() {

  var eventCallbacks = {};

  return {
    bind: function(event, callback) {
      eventCallbacks[event] = eventCallbacks[event] || [];

      eventCallbacks[event].push(callback);
    },

    trigger: function(event) {
      var callbacks = eventCallbacks[event];

      if(callbacks && callbacks.length) {
        var self = this;
        callbacks.forEach(function(callback) {
          callback(self);
        });
      }
    },
  };
}

一个让person类包含可绑定模块的例子。

function Person(I) {
  I = I || {};

  Object.reverseMerge(I, {
    name: "McLovin",
    age: 25,
    homeState: "Hawaii"
  });

  var self = {
    introduce: function() {
      return "Hi I'm " + I.name + " and I'm " + I.age;
    }
  };

  // Including the Bindable module
  Object.extend(self, Bindable());

  return self;
}

var person = Person();
person.bind("eat", function() {
  alert(person.introduce() + " and I'm eating!");
});

person.trigger("eat"); // Blasts the alert!

披露:我是丹尼尔·x·摩尔,这是我的{SUPER: SYSTEM}。这是用JavaScript定义类的最佳方式。

下面是不使用任何外部库的方法:

// Define a class like this
function Person(name, gender){

   // Add object properties like this
   this.name = name;
   this.gender = gender;
}

// Add methods like this.  All Person objects will be able to invoke this
Person.prototype.speak = function(){
    alert("Howdy, my name is" + this.name);
};

// Instantiate new objects with 'new'
var person = new Person("Bob", "M");

// Invoke methods like this
person.speak(); // alerts "Howdy, my name is Bob"

真正的答案要比这复杂得多。例如,在JavaScript中没有类这种东西。JavaScript使用基于原型的继承方案。

此外,还有许多流行的JavaScript库,它们在JavaScript中具有类似类的功能。您至少需要了解Prototype和jQuery。

决定哪一个是“最好的”是在Stack Overflow上开始一场圣战的好方法。如果您正在着手一个较大的javascript较多的项目,那么学习一个流行的库并按照它们的方式来做绝对是值得的。我是一个原型的人,但Stack Overflow似乎倾向于jQuery。

至于只有“一种方法可以做到这一点”,不依赖任何外部库,我写的方法就差不多了。

简单的方法是:

function Foo(a) {
  var that=this;

  function privateMethod() { .. }

  // public methods
  that.add = function(b) {
    return a + b;
  };
  that.avg = function(b) {
    return that.add(b) / 2; // calling another public method
  };
}

var x = new Foo(10);
alert(x.add(2)); // 12
alert(x.avg(20)); // 15

这样做的原因是,如果您将一个方法作为事件处理程序提供,那么它可以绑定到其他东西,因此您可以在实例化期间保存该值,并在以后使用它。

编辑:这绝对不是最好的方法,只是一种简单的方法。我也在等待好的答案!

var Animal = function(options) {
    var name = options.name;
    var animal = {};

    animal.getName = function() {
        return name;
    };

    var somePrivateMethod = function() {

    };

    return animal;
};

// usage
var cat = Animal({name: 'tiger'});

我认为你应该阅读Douglas Crockford的《JavaScript中的原型继承》和《JavaScript中的经典继承》。

来自他的页面的例子:

Function.prototype.method = function (name, func) {
    this.prototype[name] = func;
    return this;
};

效果吗?它将允许你以更优雅的方式添加方法:

function Parenizor(value) {
    this.setValue(value);
}

Parenizor.method('setValue', function (value) {
    this.value = value;
    return this;
});

我也推荐他的视频: 先进的JavaScript。

你可以在他的个人主页http://javascript.crockford.com/上找到更多视频 在John Reisig的书中,你可以从Douglas Crockfor的网站上找到许多例子。