深入理解ES6之 JS類的相關知識

2022-11-24 19:31:20 字數 4377 閱讀 3427

類宣告以class關鍵字開始,其後是類的名稱;剩餘部分的語法看起來像物件字面量中的方法簡寫,並且在方法之間不需要使用逗號。

class person 

sayname()

}let per = new person("cf");

per.sayname();//cf

console.log(typeof person);//function

構造器最大的用處就是在建立物件時執行初始化,當建立一個物件時,系統會為這個物件的例項進行預設的初始化。如果想改變這種預設的初始化,就可以通過自定義構造器來實現。

類宣告不會被提升。類宣告的行為類似let,因此在程式的執行到達宣告處之前,類會存在於暫時性死區內。

類宣告中的所有**會自動執行在嚴格模式下,並且也無法退出嚴格模式

類的所有方法都是不可列舉的

類的所有方法內部都沒有[[construct]],因此使用new來呼叫他們會丟擲錯誤

呼叫類構造器時不使用new會丟擲錯誤。

試圖在類的內部修改重寫類名,會丟擲錯誤。

類與函式有相似之處,即它們都有兩種形式:宣告與表示式

let personclass = class 

sayname()

}let per = new personclass("cc");

per.sayname();

類表示式和類宣告都不會被提升

let personclass = class personclass2 

sayname()

}let per = new personclass("cc");

per.sayname();

此例中的類表示式被命名為personclass2.personclass2只在類定義內部存在,因此只能用在類方法內部。

在程式設計中,能被當做值來使用的就成為一級公民,意味著他能作為引數,能作為函式返回值,能用來給變數賦值。js的函式就是一級公民。

let createobject = function (classdef) 

let obj = new createobject(class

})obj.sayhi();

自有屬性需要在類構造器中建立,而類還允許你在原型上定義訪問器屬性。為了建立一個getter ,要使用 get 關鍵字,並要與後方識別符號之間留出空格;建立 setter 用相同方式,只是要換用 set 關鍵字

class customhtmlelement 

get html()

set html(value)

}

類方法與類訪問器屬性也能使用需計算的名稱。語法相同於物件字面量中的需計算名稱:無須使用識別符號,而是用方括號來包裹一個表示式

let methodname = "sayname";

class personclass

[methodname]()

}let per = new personclass("cc");

per.sayname();

可以使用symbol.iterator來定義生成器方法,從而定義出類的預設迭代器。

class collection 

*[symbol.iterator]()

}let collection = new collection();

collection.items.push(1);

collection.items.push(2);

collection.items.push(3);

for (let num of collection.items)

靜態成員不能通過例項來訪問,你始終需要直接用類自身來訪問

class personclass 

sayname()

static create()

}let per = new personclass.create("cc");

class rectangle 

getarea()

}class square extends rectangle

}let sq = new square(10);

console.log(sq.getarea());//100

繼承了其他類的類被稱為派生類。如果派生類指定了構造器,就需要使用super(),否則就會出錯。如果不定義構造器,super()方法會被自動呼叫,並會使用建立新例項時提供的所有引數。例如:

class square extends rectangle 

let sq = new square(10, 10);

console.log(sq.getarea());//100

使用super需要牢記以下幾點

你只能在派生類中使用super。

在構造器中,你必須在訪問this之前呼叫super()。由於super()負責初始化this,因此試圖先訪問this自然後報錯。

唯一能避免呼叫super()的辦法,是從類構造器中返回一個物件。

派生類中的方法總是會遮蔽基類的同名方法。例如:你可以將getarea()方法新增到square類,以便重新定義它的功能。

class rectangle 

getarea()

}class square extends rectangle

getarea() input $`

}}

你也可以使用super.getarea()方法來呼叫基類中的同名方法

class square extends rectangle 

getarea()

}

如果基類包含靜態成員,那麼這些靜態成員在派生類中也是可用的。

class rectangle 

getarea()

static create(length, width)

}

class square extends rectangle

}let sqr = square.create(10, 10);

console.log(sqr.getarea());//100

在es6中派生類的最強大能力,或許就是能夠從表示式中派生類。只要一個表示式能夠返回一個具有[[constructor]]屬性以及原型的函式,你就可以對其使用extends。

function rectangle(length,width)

rectangle.prototype.getarea = function()

class square extends rectangle

}let x = new square(10);

console.log(x.getarea());//100

extends後面能接受任意型別的表示式,這帶來了巨大的可能性,例如動態的決定要繼承的類。

function rectangle(length, width) 

rectangle.prototype.getarea = function ()

function getbase()

class square extends getbase()

}let x = new square(10);

console.log(x.getarea());

任意表示式都能在extends關鍵字後使用,但並非所有表示式的結果都是一個有效的類。

null

生成器函式

在es6類的繼承中,this的值會先被基類建立,隨後才被派生類的構造器所修改。結果是this初始就擁有作為基類的內建物件的所有功能,並能正確的接收與之關聯的所有功能。

class myarray extends array 

let arr = new myarray();

arr[0] = 'red';

console.log(arr.length);

arr.length = 0;

console.log(arr[0]);

繼承內建物件的一個有趣方面是:任意能返回內建物件例項的方法,在派生類上卻會自動返回派生類的例項。

class myarray extends array 

let arr = new myarray(1, 2, 3);

let subitems = arr.slice(1, 2);

console.log(subitems);

深入理解ES6之 物件

在js中比較兩個值時,你可能會用相等運算子 或者嚴格相等運算子 為了避免在比較時發生強制型別轉換,許多開發者更傾向於使用後者。object.is 接受兩個引數,並且會在二者的值相等時返回true,此時要求二者的資料型別相同並且值也相等。console.log object.is 0,0 false ...

深入理解ES6之 資料解構

物件解構語法在賦值語句的左側使用了物件字面量 let node 既宣告又賦值 let node 或者先宣告再賦值 let type,name node console.log type true console.log name falsetype與name識別符號既宣告瞭本地變數,也讀取了物件的相...