第一句子网 - 唯美句子、句子迷、好句子大全
第一句子网 > JavaScript:Class.method与Class.prototype.method

JavaScript:Class.method与Class.prototype.method

时间:2020-02-24 11:38:48

相关推荐

JavaScript:Class.method与Class.prototype.method

以下两个声明有什么区别?

Class.method = function () { /* code */ }Class.prototype.method = function () { /* code using this.values */ }

可以将第一个语句视为静态方法的声明,而将第二个语句视为实例方法的声明吗?

#1楼

是的,第一个函数与该构造函数的对象实例无关,您可以将其视为“静态方法”。

在JavaScript函数中,一类对象是一流的,这意味着您可以像对待任何对象一样对待它们,在这种情况下,您只需向函数object添加一个属性。

第二个函数,当您扩展构造函数的原型时,将对使用new关键字创建的所有对象实例可用,并且该函数内的上下文(this关键字)将引用您调用它的实际对象实例。 。

考虑以下示例:

// constructor functionfunction MyClass () {var privateVariable; // private member only available within the constructor fnthis.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 instanceMyClass.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 instancemyObj.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 methodExampleClass.prototype.protoM = function(){}var instanceOfExample = new ExampleClass();ExampleClass.directM();✓ worksinstanceOfExample.directM(); x Error!ExampleClass.protoM();x Error!instanceOfExample.protoM(); ✓ works

****请注意上面的示例,someInstance.method()不会被执行,

ExampleClass.method()导致错误,执行无法继续。

但是为了便于说明和易于理解,我保留了此顺序。****

chrome developer consoleJS 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是静态方法,而sayHiPerson的实例方法。

下面是如何从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主要是在现有的基于原型的继承模型上的语法糖。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。