以下两个声明有什么区别?
Class.method = function () { /* code */ }
Class.prototype.method = function () { /* code using this.values */ }
可以将第一个语句视为静态方法的声明,而将第二个语句视为实例方法的声明吗?
#1楼
是的,第一个函数与该构造函数的对象实例无关,您可以将其视为“静态方法” 。
在JavaScript函数中, 一类对象是一流的 ,这意味着您可以像对待任何对象一样对待它们,在这种情况下,您只需向函数object添加一个属性。
第二个函数,当您扩展构造函数的原型时,将对使用new
关键字创建的所有对象实例可用,并且该函数内的上下文( this
关键字)将引用您调用它的实际对象实例。 。
考虑以下示例:
// constructor function
function MyClass () {
var privateVariable; // private member only available within the constructor fn
this.privilegedMethod = function () { // it can access private members
//..
};
}
// A 'static method', it's just like a normal function
// it has no relation with any 'MyClass' object instance
MyClass.staticMethod = function () {};
MyClass.prototype.publicMethod = function () {
// the 'this' keyword refers to the object instance
// you can access only 'privileged' and 'public' members
};
var myObj = new MyClass(); // new object instance
myObj.publicMethod();
MyClass.staticMethod();
#2楼
当创建多个MyClass实例时,内存中仍然仍然只有一个publicMethod实例,但是如果使用privateMethod,则最终将创建许多实例,而staticMethod与对象实例没有任何关系。
这就是为什么原型可以节省内存。
另外,如果您更改父对象的属性,并且未更改子对象的相应属性,则会对其进行更新。
#3楼
对于视觉学习者,在定义不带.prototype
的函数时
ExampleClass = function(){};
ExampleClass.method = function(customString){
console.log((customString !== undefined)?
customString :
"called from func def.");}
ExampleClass.method(); // >> output: `called from func def.`
var someInstance = new ExampleClass();
someInstance.method('Called from instance');
// >> error! `someInstance.method is not a function`
使用相同的代码,如果添加了.prototype
,
ExampleClass.prototype.method = function(customString){
console.log((customString !== undefined)?
customString :
"called from func def.");}
ExampleClass.method();
// > error! `ExampleClass.method is not a function.`
var someInstance = new ExampleClass();
someInstance.method('Called from instance');
// > output: `Called from instance`
为了更清楚一点
ExampleClass = function(){};
ExampleClass.directM = function(){} //M for method
ExampleClass.prototype.protoM = function(){}
var instanceOfExample = new ExampleClass();
ExampleClass.directM(); ✓ works
instanceOfExample.directM(); x Error!
ExampleClass.protoM(); x Error!
instanceOfExample.protoM(); ✓ works
****请注意上面的示例,someInstance.method()不会被执行,
ExampleClass.method()导致错误,执行无法继续。
但是为了便于说明和易于理解,我保留了此顺序。****
从chrome developer console
和JS Bin
生成的结果
单击上面的jsbin链接以逐步执行代码。
使用ctrl切换注释的部分+ /
#4楼
是的,第一个是static method
也称为class method
,而第二个是instance method
。
考虑以下示例,以更详细地了解它。
在ES5中
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
Person.isPerson = function(obj) {
return obj.constructor === Person;
}
Person.prototype.sayHi = function() {
return "Hi " + this.firstName;
}
在上面的代码中, isPerson
是静态方法,而sayHi
是Person
的实例方法。
下面是如何从Person
构造函数创建对象的方法。
var aminu = new Person("Aminu", "Abubakar");
使用静态方法isPerson
。
Person.isPerson(aminu); // will return true
使用实例方法sayHi
。
aminu.sayHi(); // will return "Hi Aminu"
在ES6中
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
static isPerson(obj) {
return obj.constructor === Person;
}
sayHi() {
return `Hi ${this.firstName}`;
}
}
查看如何使用static
关键字声明静态方法isPerson
。
创建一个Person
类的对象。
const aminu = new Person("Aminu", "Abubakar");
使用静态方法isPerson
。
Person.isPerson(aminu); // will return true
使用实例方法sayHi
。
aminu.sayHi(); // will return "Hi Aminu"
注意:这两个示例在本质上是相同的,JavaScript仍然是一种无类语言。 ES6中引入的class
主要是在现有的基于原型的继承模型上的语法糖。