es6新特性之 class 基本用法

天高任鳥飛吧發表於2018-05-05

javaScript 語言中,生成例項物件的傳統方法是通過建構函式,與傳統的面嚮物件語言(比如 C++ 和 Java)差異很大,ES6 提供了更接近傳統語言的寫法,引入了 class(類)這個概念,作為物件的模板。通過class關鍵字,可以定義類。

es6 class es5的物件導向的區別:

 1. 寫法不同,使用關鍵字class

 2.當new一個例項,預設有一個constructor方法,且預設返回例項物件(this),也可以返回另一物件

 3.類的所有方法都在prototype屬性上,但是不可列舉,且每方法結束不能使用分號

 4.類的呼叫必須通過new 一個例項,且類的內部預設使用嚴格模式

 5.不存在變數提升,必須先宣告,再呼叫

 6.class的this 預設指向當前類

 7.class 的靜態方法,使用關鍵字static,不需new,直接通過類來呼叫

 8. 例項屬性和靜態屬性的寫法,例項屬性在類的內部直接使用等式(=)寫法,也可以寫在constructor 方法裡,靜態屬性只需在例項屬性前加一個關鍵字static即可 

9.類的繼承使用關鍵字extends,繼承機制與es5完全不同,

  es5的繼承原理:先new子類的例項物件this,再通過將父類的方法和屬性新增到子類的this上(parents.call(this))。

  Es6的繼承原理:先創造父類的例項物件this,所以要建構函式constructor()訪問父類的屬性使用this,必須先呼叫super()方法;再通過子類的constructor()來修改this

10.類的繼承可以繼承原生的建構函式,es5不可以

 

 1. 一般寫法(es5 與es6)

//一.ES5寫法:
function Animate(name){
    this.name = name;
}
Animate.prototype.getname = function(){
    console.log(this.name)
}
var  p =new Animate("lity");
p.getname();

//二.ES6,物件導向的寫法,calss,
class Person{
    //constructor():構造方法是預設方法,new的時候回自動呼叫,如果沒有顯式定義,會自動新增
    //1.適合做初始化資料
    //2.constructor可以指定返回的物件
    constructor(name,age){
      this.name = name;
      this.age = age;
  }
    getval(){
        console.log(`你是${this.name},${this.age}歲`);
    }
}            
var c1 = new Person("lity",20);  
c1.getval();

 

ES6 的class可以看作只是一個語法糖,它的絕大部分功能,ES5 都可以做到

注意 :class 類的本質還是一個函式,類本身就指向建構函式。

typeof  Person    //function
Person === Person.prototype.constructor // true

 

我們使用Object的一些屬性或者方法檢測一下 用es6 寫的例項物件

//1.檢視例項物件c1的__proto__是否指向Person的原型(Person.prototype)
  console.log(c1.__proto__==Person.prototype)//true
  console.log(c1.__proto__)//原型物件的所有方法
                
 //2.isPrototypeOf:檢測例項物件是否是某個函式的原型
    console.log(Person.prototype.isPrototypeOf(c1));//true
            
//3.constructor:檢視某個物件的建構函式
     console.log(c1.constructor);
                
 //4.hasOwnProperty:檢測某個屬性是否是自己的屬性;不是原型物件上的屬性和方法
      console.log(c1.hasOwnProperty("name"))//true;
                
  //5.in:通過in可以檢測屬性是否在自己中(this)或者是原型中存在
       console.log("getval" in c1)//原型上存在,true
       console.log("name" in c1)//constructor(自己上存在),true
                
  //6.自定義檢測屬性是否是存在
       function hasproperty(attr,obj){
             return obj.hasOwnProperty(attr)&&(attr in obj);
       }
        console.log(hasproperty("name",c1));//true;

 

2.表示式寫法

//class表示式
const Myclass = class Me{//這裡的Me是沒有作用的
    constructor(name,jog){
        this.name = name;
        this.jog = jog;
    }
    getval(){
        console.log(`name is ${this.name},job is a ${this.jog}`);
    }
}
 var obj1 = new Myclass("lylt","teacher");
 obj1.getval();

 

3.class的私有方法(ES6不提供寫法)和私有屬性(也不提供寫法,提案用#識別)

      所謂私有方法和私有屬性,是指只能在類的內部使用,不能在類外部呼叫
 

4.ES6規定Class類沒有靜態屬性,只有靜態方法:static

     所謂靜態,不需要例項化物件,直接呼叫
class Foo {
      static classMethod() {
            return `lity`;
       }
 }
 console.log(Foo.classMethod()) // `hello`

 

5.new.target屬性

new是在建構函式生成例項的命令,ES6為new提供了一個屬性.target,
 返回通過new 命令例項物件的class(建構函式),一般用於類的內部
//ES5:原始寫法物件
function objtarge(name){
    if(new.target==undefined){
        throw new Error("必須例項化物件");
    }else{
        this.name = name
    }
}
var targets = new objtarge("litys");
console.log(targets.name);//litys

//es6寫法:class內部使用new.target,返回當前的calss
class caltartget{
    constructor(name){
        console.log(new.target==caltartget);//true
        if(new.target!==caltartget){
            throw new Error("例項化物件不是caltrget");
        }else{
            this.name = name;
        }
    }
}
var caltart = new caltartget("lity");
console.log(caltart.name);//lity

 

6.this指向

 類的方法內部如果含有this,它預設指向類的例項。但是,必須非常小心,一旦單獨使用該方法,很可能報錯

如下示例

class Logger {
  printName(name = `there`) {
    this.print(`Hello ${name}`);
  }

  print(text) {
    console.log(text);
  }
}

const logger = new Logger();
const { printName } = logger;
printName(); // TypeError: Cannot read property `print` of undefined

分析以上示例:prinName 的方法中this,預設指向 類Logger,但是將改方法單獨呼叫,就會報錯,this會指向所在執行的環境,所以因為找不到this.print()方法而報錯。

針對以上解決this指向的方法:

(1). 使用bind(this)

(2). 使用es6 的箭頭函式 ()=>{}

(3).使用Proxy 代理

//1.bind()方法
class Logger {
  constructor() {
    this.printName = this.printName.bind(this);
  }

  // ...
}

//2.箭頭函式 ()=>{}
class Logger {
  constructor() {
    this.printName = (name = `there`) => {
      this.print(`Hello ${name}`);
    };
  }

  // ...
}

//3. Porxy()
.................

 

7.class 的get() 和set() 方法 

與 ES5 一樣,在“類”的內部可以使用getset關鍵字,對某個屬性設定存值函式和取值函式,攔截該屬性的存取行為。

 

class MyClass {
  constructor() {
    // ...
  }
  get prop() {// 使用 get 攔截了該方法的返回值
    return `getter`;
  }
  set prop(value) {//當對該方法賦值時能獲取到該賦值
    console.log(`setter: `+value);
  }
}

let obj = new MyClass();

obj.prop = 123;
// setter: 123

inst.prop
// `getter`

 

8.繼承

Class 可以通過extends關鍵字實現繼承,這比 ES5 的通過修改原型鏈實現繼承,要清晰和方便很多。

 

//es5 的繼承

//父類
function Person(name,sex){
    this.name = name;//屬性
    this.sex = sex;//屬性             
}
//定義一個原型方法
Person.prototype.show = function(){
    console.log("我的姓名是"+this.name+"==="+"我的性別是"+this.sex)
}

//子類
function Worker(name,sex,job){            
    //構成函式偽裝:使用call()方法繫結this,偽裝繼承父級的屬性
    Person.call(this,name,sex);
    this.job = job;
}
//繼承父類的原型方法:(介紹三種方法)
//寫法一:通過遍歷父級的原型一個個賦給子級的原型(es5 的原型是可列舉的,es6的不可以列舉)
(var i in Person.prototype){
    Worker.prototype[i] = Person.prototype[i];
}

//寫法:重新new一個父級物件賦給子級的原型
Worker.prototype = new Person();
Worker.prototype.constructor = Worker;

//寫法三:建立一個原型物件賦給子級的原型;(es5 推薦)
Worker.prototype = Object.create(Person.prototype);
Worker.prototype.constructor = Worker;

var workers = new Worker("小明","","job")


//es6 的繼承

class Person{
    constructor(name,sex){
        this.name = name;//屬性
       this.sex = sex;//屬性
     }
}

class Worker extends Person{
     constructor(name,sex,job){
          super();
          this.job =job;
     }
}

var workers = new Worker("小明","","job")
    

 

8.1:super關鍵字:在子類中不同情況用法不同,既可以當作函式使用,也可以當作物件使用。

    (1):super作為函式,只能在constructor中使用:代表父類,返回子類的this
   (2):super作為物件,在普通函式中,cuper指向父類的原型物件,可以訪問原型物件的屬性和方法,注意,父類的例項的屬性和方法是訪問不了的
   (3):super作為物件,在靜態方法中,cuper指向的是父類,不是父類的原型物件
 
示例分析如下:
//父類
class Aniamte{
    constructor(){
        if(new.target == Aniamte){
            throw new Error("本類不能例項化,只能有子類繼承");
        }
    }
    //靜態方法
    static getval(mgs){
        console.log("父類的static",mgs)
    }
    //普通方法            
    setname(){
        console.log("該方法有子類重寫")
    }            
}

//子類
class Dog extends Aniamte{
    constructor(){
        super();//呼叫此方法,this才用可以用,代表父類的建構函式,返回的卻是子類
        //super() ==父類.prototype.constructor.call(子類/this)
        console.log(this)//Dog {}
        this.age = 20;
        }
    //靜態方法,super在靜態方法中作為物件使用,指向父類;
    static getval(mgs){
        super.getval(mgs)//父類的static niceday
        console.log("子類的static",mgs)//子類的static niceday
    }
    setname(name){
       //普通方法,super作為物件使用,指向父類的原型物件,父類.prototype;
       super.setname();//該方法有子類重寫
       this.name = name;
       return this.name
    }
};
Dog.getval("niceday");//靜態方法,直接呼叫
//var parAni = new Aniamte();//報錯

var dogs = new Dog();//new 一個示例物件
dogs.setname("DOYS");////DOYS
            
    

8.2.原生建構函式的繼承,ES5不支援,ES6利用extend可以繼承原生建構函式

//ESMAScript的建構函式有以下幾種
/* Boolean()
* Unmber()
* String()
* Array()
* Date()
* Function()
* RegExp()
* Error()
* Object()
*/
//例項一:自定義類Myarray 繼承了原生的陣列的建構函式,擁有原生陣列的屬性和方法了
class Myarray extends Array{
    constructor(){
    super();
    console.log(this.constructor.name)//Myarray
    }
}

var myarr = new Myarray();

console.log(Object.prototype.toString.call(myarr));//[object Array]
myarr.push(1,2,1);
console.log(myarr.length)//3

 

 
完結。。。謝謝

相關文章