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语言中的类静态属性.

如果它不是一个对象定义,那么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