ES6中的class 與prototype

 一、定義構造函數  

在以前的js中，生成一個對象實例，需要先定義構造函數，然后通過prototype 的方式來添加方法，在生成實例：

      

function Person(){
       this.name = "測試"；
       this.age = 26;
}

 Person.prototype.getName = function(){
             console.log("name:" + this.name)

}

var  p = new Person()

 

然而系現在的ES6

class Person{
     constructor(name, age){
                this.name = name;
                this.age = age;
           }
     getName() {
                return this.name;
           }
}

var p = new Person("luoqiang",26)

在ES5中原本的構造函數被constructor 替代，本來需要定義在prototype上面的，方法直接定義在class里面即可。

ES6中的類的數據類型就是函數，類本身指向構造函數，使用的時候也需要new命令。

類中所有的方法都定義在類的prototype屬性上面。

 

class B {}
let b = new B();

b.constructor === B.prototype.constructor // true

 

二、Class 的靜態方法

   ES6 中類有靜態方法，即一個方法前加上static關鍵字，就表示該方法不會被實例繼承，而是直接通過類來調用。

        

class Food {
static classMethod() {
   return 'hello'
}
}

Food.classMethod() // "hello"

var poo = new Food();
poo.classMethod() // TypeError: poo.classMethod is not a function

  通過類直接調用，輸出的是hello,實例化以后不能調用。

  PS：

    在react、 RN中，this.state ={} 這種寫法是在constructor 里面定義實例屬性。

    

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

    super(props)是繼承父類的props 屬性，state是在子類中定義實例屬性。

 

三、class 繼承

以前的繼承方式：

function Person(name,age){
           this.name = name;
           this.age = age;
}
 Person.prototype.getName = function(){
         console.log("name:" + this.name);
}
 
 function Stu(stu_class,name,age){
         Person.call(this,name,age);
         this.stu_class=stu_class;
}
 
 Stu.prototype=new Person;
 Stu.prototype.constructors=Stu;
 Stu.prototype.getClass=function(){
        console.log("班級：" + this.stu_class)
}

// 得到一個學員信息對象

var s= new Stu()
console.log(s)

ES6的繼承：

 

   class Person{
     constructor(name, age){
               this.name = name;
               this.age = age;
        }
       getName(){
                   return this.name;
        }
}

class Student extends Person{
       constructor(stu_class,name,age){
         //需注意如果一個子類繼承父類，必須調用super，才能使用constructor,使用this
               super(name,age)

       }
     getClass(){
        
		console.log("班級:"+this.stu_class)
      }

}


var p=new Person("luoqiang",26)
console.log(p)

 

注意點：

Class 定義方法是不能使用箭頭函數

Class 也可以使用表達式方式聲明

 

參考：https://blog.csdn.net/luoqiang0831/article/details/79641133