本文實(shí)例講述了es6中class類(lèi)靜態(tài)方法，靜態(tài)屬性，實(shí)例屬性，實(shí)例方法。分享給大家供大家參考，具體如下：

es6新增了一種定義對(duì)象實(shí)例的方法，使用class關(guān)鍵字定義類(lèi)，與class相關(guān)的知識(shí)點(diǎn)也逐步火熱起來(lái)，但是部分理解起來(lái)相對(duì)抽象，簡(jiǎn)單對(duì)class相關(guān)的知識(shí)點(diǎn)進(jìn)行總結(jié)，更好的使用class。對(duì)于基本概念，請(qǐng)參見(jiàn)阮一峰老師的es6入門(mén)教程。本文主要總結(jié)class靜態(tài)相關(guān)。

關(guān)于類(lèi)有兩個(gè)概念，1，類(lèi)自身,；2，類(lèi)的實(shí)例對(duì)象

總的來(lái)說(shuō)：靜態(tài)的是指向類(lèi)自身，而不是指向?qū)嵗龑?duì)象，主要是歸屬不同，這是靜態(tài)屬性的核心。

難點(diǎn)1：靜態(tài)方法的理解

class Foo {
 static classMethod() {
  return 'hello';
 }
}

靜態(tài)方法使用：在方法前加上static關(guān)鍵字

為什么使用靜態(tài)方法：阻止方法被實(shí)例繼承，類(lèi)的內(nèi)部相當(dāng)于實(shí)例的原型，所有在類(lèi)中直接定義的方法相當(dāng)于在原型上定義方法，都會(huì)被類(lèi)的實(shí)例繼承，但是使用static靜態(tài)方法定義的不會(huì)被實(shí)例繼承，而且可以被實(shí)例直接應(yīng)用Foo.classMethod()，此時(shí)寫(xiě)成new Foo.classMethod()會(huì)提示不存在此方法

靜態(tài)方法中this指向：this指向類(lèi)而不是類(lèi)的實(shí)例

class Foo {
 static bar () {
  this.baz();
 }
 static baz () {
  console.log('hello');
 }
 baz () {
  console.log('world');
 }
}
Foo.bar() // hello

繼承相關(guān)：靜態(tài)方法可以被子類(lèi)繼承，也可以被super調(diào)用

難點(diǎn)2：靜態(tài)屬性的理解，以及和實(shí)例屬性的區(qū)別

理解了靜態(tài)的本質(zhì)就知道靜態(tài)屬性是class類(lèi)自身的屬性

相對(duì)的實(shí)例屬性是指類(lèi)的實(shí)例的屬性，調(diào)用時(shí)使用 new Foo().'屬性名'

定義實(shí)例屬性的方法：2種

類(lèi)的實(shí)例屬性可以用等式，寫(xiě)入類(lèi)的定義之中

1，在類(lèi)中定義

class MyClass {
 myProp = 42;
 constructor() {
  console.log(this.myProp); // 42
 }
}
//上面代碼中，myProp就是MyClass的實(shí)例屬性。在MyClass的實(shí)例上，可以讀取這個(gè)屬性。

2，在constructor中定義（react中經(jīng)典寫(xiě)法）

class ReactCounter extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   count: 0
  };
 }
}

//等價(jià)于
class ReactCounter extends React.Component {
 state = {
  count: 0
 };
}

定義靜態(tài)方法，

1，就和普通的Object添加屬性一樣，object.a = a;（目前唯一一種方法）

缺點(diǎn)：老寫(xiě)法的靜態(tài)屬性定義在類(lèi)的外部。整個(gè)類(lèi)生成以后，再生成靜態(tài)屬性。容易忽略

2，靜態(tài)屬性的提案： 相對(duì)于實(shí)例方法定義，在定義實(shí)例方法的前面加上static關(guān)鍵字，該方法未發(fā)布

class MyClass {
 static myStaticProp = 42;
 constructor() {
  console.log(MyClass.myStaticProp); // 42
 }
}

感興趣的朋友可以使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專(zhuān)題：《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論