Javascript 静态 vs 实例，原型关键字

Question

我想知道下面两个代码片段的区别

我的理解是这是静态的，因为无需使用 new 关键字创建实例，就可以调用 getCookie 和 setCookie 函数。

var CookieHandler = function () {};

CookieHandler.getCookie = function (key) {

};

CookieHandler.setCookie = function (key, value) {
};

这是实例。在这种情况下，您需要创建一个实例来调用函数。

var CookieHandler = function () {};

CookieHandler.prototype.getCookie = function (key) {

};

CookieHandler.prototype.setCookie = function (key, value) {
};

我是一名 java 程序员，几乎不了解 JS 概念，请帮助我。

Answer 1

在Javascript中，任何函数也是一个对象，因此任何函数都可以拥有分配给它的属性。这就是您的第一段代码所做的。它只是将属性分配给 CookieHandler 函数。如果 CookieHandler 是一个对象定义，那么虽然不完全相同，但它们类似于其他 OO 语言中的 class 静态属性。

如果它不是一个对象定义，那么 CookieHandler 就像一个 Javascript 命名空间，而 getCookie 和 setCookie 就像那个命名空间中的属性。

您的第二个代码块正在为原型分配属性。这些属性将由实例化的 CookieHandler 对象继承。

因此，对于您的第一个代码块：

var CookieHandler = function () {};
CookieHandler.getCookie = function (key) {
};
CookieHandler.setCookie = function (key, value) {
};

您可以随时自由调用CookieHandler.getCookie()。 CookieHandler 就像一个命名空间对象，getCookie 和 setCookie 是命名空间上的属性。

如果您创建一个 CookieHandler 对象，例如：

var x = new CookieHandler();
x.getCookie();    // does not work
x.setCookie();    // does not work

那么，x 将不会有 getCookie() 或 setCookie() 方法。这些方法只存在于 CookieHandler 对象上。它们不是由 CookieHandler 的实例继承的。

你的第二个代码块：

var CookieHandler = function () {};
CookieHandler.prototype.getCookie = function (key) {
};
CookieHandler.prototype.setCookie = function (key, value) {
};

您正在定义 CookieHandler 的实例将继承的属性（实例继承原型上的属性）。所以，当你这样做时：

var x = new CookieHandler();
x.getCookie();    // works
x.setCookie();    // works

因此，当您想要定义对象实例将继承的属性（通常是方法）时，请使用 prototype。如果您不想定义实例方法，那么只需将方法放在任何对象上，就像在您的第一段代码中一样。

Answer 2

更多详情

@jfriend00 已经提供了有关 JavaScript 如何处理对象的非常有用的详细信息。让我添加一些有关 this 关键字在两种情况下的区别的详细信息：

静态案例

如果通过对象的属性定义静态函数，函数中的 this 关键字指的是 函数作用域，而不是父对象 。

参见示例：

var F = function(){ this.a = 500; };
F.G = function(){ return this.a; };

// call it
F.G(); // returns undefined, because `this` refers to F.G()
       // but the variable a in F.G() has not been defined yet

原型案例

如果您通过对象的原型定义函数，则函数中的 this 关键字指的是您从该原型创建的对象实例，而不是函数作用域。

参见示例：

var F = function(){ this.a = 500; };
F.prototype.G = function(){ return this.a };

// Make an object and call the function
var f = new F();
f.G(); // returns 500 because `this` refers to instance f

Javascript 静态 vs 实例，原型关键字

Javascript static vs instance, prototype keyword

javascript

static

prototype