JavaScript中的类与静态方法

Question

我知道这会奏效:

function Foo() {};
Foo.prototype.talk = function () {
    alert('hello~\n');
};

var a = new Foo;
a.talk(); // 'hello~\n'

但如果我想打电话

Foo.talk() // this will not work
Foo.prototype.talk() // this works correctly

我找到一些方法来做Foo.talk工作,

1. Foo.__proto__ = Foo.prototype
2. Foo.talk = Foo.prototype.talk

还有其他方法可以做到这一点吗？我不知道这样做是否正确.您是否在JavaScript代码中使用了类方法或静态方法？

Answer 1

首先,请记住,JavaScript主要是一种原型语言,而不是基于类的语言¹.Foo不是一个类,它是一个函数,它是一个对象.您可以使用关键字从该函数实例化对象,new这将允许您使用标准OOP语言创建类似于类的内容.

我建议忽略__proto__大部分时间,因为它的浏览器支持很差,而是专注于学习如何prototype工作.

如果你有一个从函数²创建的对象的实例,并且你以任何方式访问它的一个成员(方法,属性,属性,常量等),那么访问将沿着原型层次结构向下流动,直到它(a)找到成员,或(b)没有找到另一个原型.

层次结构从被调用的对象开始,然后搜索它的原型对象.如果原型对象具有原型,则如果不存在原型则重复该原型undefined.

例如:

foo = {bar: 'baz'};
console.log(foo.bar); // logs "baz"

foo = {};
console.log(foo.bar); // logs undefined

function Foo(){}
Foo.prototype = {bar: 'baz'};
f = new Foo();
console.log(f.bar);
// logs "baz" because the object f doesn't have an attribute "bar"
// so it checks the prototype
f.bar = 'buzz';
console.log( f.bar ); // logs "buzz" because f has an attribute "bar" set

在我看来,你已经至少在某种程度上理解了这些"基本"部分,但我需要明确它们才能确定.

在JavaScript中,一切都是对象³.

一切都是对象.

function Foo(){}不只是定义一个新函数,它定义了一个可以使用的新函数对象Foo.

这就是你可以访问Foo原型的原因Foo.prototype.

你也可以做的是设置更多的功能上Foo:

Foo.talk = function () {
  alert('hello world!');
};

可以使用以下方法访问此新功能:

Foo.talk();

我希望现在你注意到函数对象和静态方法的函数之间的相似性.

可以将其f = new Foo();视为创建类实例,Foo.prototype.bar = function(){...}定义类的共享方法,以及Foo.baz = function(){...}为类定义公共静态方法.

ECMAScript 2015为这些类型的声明引入了各种语法糖,使其更易于实现,同时更易于阅读.之前的例子可以写成:

class Foo {
  bar() {...}

  static baz() {...}
}

允许bar被称为:

const f = new Foo()
f.bar()

并被baz称为:

Foo.baz()

_{1:class是ECMAScript 5规范中的"Future Reserved Word",但ES6引入了使用class关键字定义类的能力.}

_{2:本质上是一个由构造函数创建的类实例,但是有很多细微差别,我不想误导你}

_{3:原始值 - 包括undefined,null布尔值,数字和字符串 - 在技术上不是对象,因为它们是低级语言实现.布尔值,数字和字符串仍然与原型链相互作用,就像它们是对象一样,因此对于这个答案而言,即使它们不完整,也更容易将它们视为"对象".}

Answer 2

你可以实现如下:

function Foo() {};

Foo.talk = function() { alert('I am talking.'); };

您现在可以调用"talk"功能,如下所示:

Foo.talk();

你可以这样做,因为在JavaScript中,函数也是对象."zzzzBov"也回答了它,但这是一个冗长的阅读.

Answer 3

从实例调用静态方法:

function Clazz() {};
Clazz.staticMethod = function() {
    alert('STATIC!!!');
};

Clazz.prototype.func = function() {
    this.constructor.staticMethod();
}

var obj = new Clazz();
obj.func(); // <- Alert's "STATIC!!!"

简单的Javascript类项目:https://github.com/reduardo7/sjsClass

Answer 4

这是一个很好的例子来演示Javascript如何使用静态/实例变量和方法.

function Animal(name) {
    Animal.count = Animal.count+1||1;// static variables, use function name "Animal"
    this.name = name; //instance variable, using "this"
}

Animal.showCount = function () {//static method
    alert(Animal.count)
}

Animal.prototype.showName=function(){//instance method
    alert(this.name);
}

var mouse = new Animal("Mickey");
var elephant = new Animal("Haddoop");

Animal.showCount();  // static method, count=2
mouse.showName();//instance method, alert "Mickey"
mouse.showCount();//Error!! mouse.showCount is not a function, which is different from  Java

Answer 5

另外,现在可以用class和static

'use strict'

class Foo {
 static talk() {
     console.log('talk')
 };

 speak() {
     console.log('speak')
 };

};

会给

var a = new Foo();
Foo.talk();  // 'talk'
a.talk();    // err 'is not a function'
a.speak();   // 'speak'
Foo.speak(); // err 'is not a function'

Answer 6

我使用命名空间:

var Foo = {
     element: document.getElementById("id-here"),

     Talk: function(message) {
            alert("talking..." + message);
     },

     ChangeElement: function() {
            this.element.style.color = "red";
     }
};

并使用它:

Foo.Talk("Testing");

要么

Foo.ChangeElement();

Answer 7

ES6支持现在class和static关键字如魅力:

class Foo {
    constructor() {}

    talk() {
        console.log("i am not static");
    }

    static saying() {
        console.log(this.speech);
    }

    static get speech() {
        return "i am static method";
    }

}