你如何在 JavaScript 中创建类？

Question

你们如何在 JavaScript 中创建“类”！？

我正在使用：

function classFoo()
{
   var classLevelVariable = 0;

   this.classFunction = function()
   {
      alert("The classFunction has been called.");
      classFunction2(); //Crash.  classFunction2 is "undefined."  
   }

   this.classFunction2 = function()
   {
      alert("classFunction2 called.");
   }
}

我一直无法让构造函数工作。试过了

this.New = function(arguments)

这工作一次，但不是在第二类。所以，我现在完全放弃了这些，使用我自己的“初始化”函数作为构造函数。

它工作一次但不是两次的奇怪之处让我认为这两个类之间存在印刷错误......但我认为在 19 年的编码中，可能不是这样。

我正在使用 Chrome 的调试器，除了第二个函数在被调用时未定义之外，我没有收到任何错误。

Answer 1

Javascript 不使用基于类的继承。因此，您不能在 Javascript 中创建类，除非使用 workarounds 模拟它们，恕我直言笨拙和复杂。

Javascript 是一种原型语言。使用new 关键字基于构造函数对象的原型属性创建一个新对象。

您可以在此处了解如何使用原型继承来实例化基于原型对象的新对象：http://javascript.crockford.com/prototypal.html

Answer 2

我觉得您最初的咆哮（请参阅问题的修订历史）值得回应。在我看来，仅仅因为你不能make it go 就宣布一种语言被破坏是非常违背编程和计算机科学的精神的。

如果我说我很惊讶他们可以将 CS 学位授予具有如此范式无知的人，如果我冒犯了你，请原谅我。大约 5 年前，当我上学时，我用 6 种不同的语言完成了作业：MIPS、Verilog、Scheme、Java、C/C++ 和 Python。我们使用了许多范例，包括函数式和 OOP，但也使用了其他样式。如果你没有接触到这些不同的观点，它们都不是新的，你的教育是不完整的。

您有没有想过，您认为规范的 OOP 只是OOP 原则的一种表述？在 Javascript 中，对象从“原型”实例化，它与类不同。当您期望它像基于类的 OOP 语言一样工作时，它不会满足您的期望。 Java 和 C++ 不是 OOP 的黄金标准，OOP 也不是编程的万能。

当人们想到过去 3-5 年用 Javascript 编写的令人惊叹的应用程序时，一个人可以做出这样的陈述真是令人惊讶：

人们会认为我们会将过去 6 年的最佳编码实践应用到其中。不，当然不。我们有什么？函数内部的函数......类的一些奇怪的混蛋。没有一致性的完整...

要说，尽管优秀的 Javascript 开发人员团队取得了辉煌的成就，但语言却因为你难以理解而被破坏，嗯，令人惊讶。

请考虑到，您目前可能不具备理解它所需的视角，而不是语言存在缺陷。

---

PS，您提到您正在“使用 JavaScript 避免 FLASH！”看来您确定事实的策略很差，因为 Javascript 和 Actionscript 都实现了相同的规范：ECMAScript。

Answer 3

JavaScript 是一种基于原型的编程语言。类的概念不存在或类的概念与对象相同。它与 Java 编程语言完全不同。不要被他们的名字所迷惑，相似之处到此为止。

我回来时问过this question我。我得到了一个很好的答案，上面有 John Resig 的 these presentation slides 链接。看看它是否有助于理解 JavaScript 和原型链。

Answer 4

Here 是 sitepoint.com 上一篇关于 JavaScript 中面向对象编程的好文章。

Thisjavascriptkit.com 上的一个更直接。

你可以使用一个函数来创建一个对象，像这样设置它的属性和函数：

person = new Object()
person.name = "Tim Scarfe"
person.height = "6Ft"

person.run = function() {
    this.state = "running"
    this.speed = "4ms^-1"
}

或使用构造函数：

function person(name,height,speed){
    this.name = name;
    this.height = height;
    this.speed = speed;
}

var p1=new person('tom', '6ft','15kmph');

alert(p1.height);

或者您可以使用原型设计来扩展对象：

person.prototype.sayHello = function(){alert("Hi, I'm " + name;}

var p2 = new person('sam', '5.9ft', '12kmph');
p2.sayHello();//alert-> Hi, I'm sam

链接页面上有更多详细信息。

Answer 5

JavaScript 是 Prototyping Language，所以有些不同。

这里有一段代码sn-p来解释一下：

(function(){ // create an isolated scope
    // My Object we created directly
    var myObject = {
        a: function(x,y) {
            console.log('a');
        },
        b: function(x,y) {
            console.log('b');
            this.a(x,y);
        }
    };
})();

(function(){ // create an isolated scope

    // Create a Object by using a Class + Constructor
    var myClass = function(x,y) {
        console.log('myClass: constructor');
        this.b(x,y);
    };
    myClass.prototype = {
        a: function(x,y) {
            console.log('myClass: a');
        },
        b: function(x,y) {
            console.log('myClass: b');
            this.a(x,y);
        }
    };

    // Define a function that should never inherit
    myClass.c = function(x,y) {
        console.log('myClass: c');
        this.a(x,y);
    };

    // Create Object from Class
    var myObject = new myClass();
    // Will output:
    // myClass: constructor
    // myClass: b
    // myClass: a

    // Define a function that should never inherit
    myObject.d = function(x,y) {
        console.log('myObject: d');
        this.a(x,y);
    };

    // Test the world is roung
    console.log(typeof myClass.c, 'should be undefined...');
    console.log(typeof myClass.d, 'should be function...');
})();

(function(){ // create an isolated scope
    // If you are using a framework like jQuery, you can obtain inheritance like so

    // Create a Object by using a Class + Constructor
    var myClass = function(x,y) {
        console.log('myClass: constructor');
        this.b(x,y);
    };
    myClass.prototype = {
        a: function(x,y) {
            console.log('myClass: a');
        },
        b: function(x,y) {
            console.log('myClass: b');
            this.a(x,y);
        }
    };

    // Create new Class that inherits
    var myOtherClass = function(x,y) {
        console.log('myOtherClass: constructor');
        this.b(x,y);
    };
    $.extend(myOtherClass.prototype, myClass.prototype, {
        b: function(x,y) {
            console.log('myOtherClass: b');
            this.a(x,y);
        }
    });

    // Create Object from Class
    var myOtherObject = new myOtherClass();
    // Will output:
    // myOtherClass: constructor
    // myOtherClass: b
    // myClass: a
})();

(function(){ // create an isolated scope
    // Prototypes are useful for extending existing classes for the future
    // Such that you can add methods and variables to say the String class
    // To obtain more functionality
    String.prototype.alert = function(){
        alert(this);
    };
    "Hello, this will be alerted.".alert();
    // Will alert:
    // Hello, this will be alerted.
})();

有一些库可以帮助解决这个问题，例如：

• Mootools 类：http://mootools.net/docs/core/Class/Class
• jQuery BalClass：http://www.balupton.com/projects/jquery-sparkle/#using

Answer 6

通过使用 Prototype javascript 框架。