與大多數物件導向語言不同,js建立之初不支援類,在es1-es5很多庫建立了一些工具來讓js顯得好像支援類 ,直到es6正式引入類。
es6類的宣告是以class關鍵字開始後面緊跟類名,類宣告中有constructor方法可以直接定義乙個構造器。
例
類和之前的函式構造器有著很多的區別class
personclass
}
1、類宣告不會被提公升,其行為和let類似,因此在程式執行到達宣告處前,類會存在於暫時性死區內。
2、類宣告中的所有**會自動執行在嚴格模式下,並且無法退出嚴格模式。
3、類中的所有方法都是不可列舉的,函式構造器中必須使用object.defineproperty()才能將方法變為不可列舉。
4、類的所有方法沒有[[constructor]],因此不能使用new來呼叫他們。
5、呼叫類構造器時必須使用new。
6、試圖在類方法內部重寫類名會報錯。
類中的生成器方法
類中只需要在方法名稱前附加乙個"*"號就能定義乙個生成器
靜態成員class
myclass
}let instance =
newmyclass()
;let iterator = instance.
createiterator()
;
繼承//在es5及更早版本中,是直接在構造器上新增額外方法來模擬靜態成員
function
persontype
(name)
persontype.
create
=function
(name)
//像persontype.create()會被認定為乙個靜態方法,它的資料不依賴persontype任何例項
//es6中靜態方法的表示
class
persontype
static
create
(name)
}
在出現類之前,繼承的實現很繁複,類中提供了extends關鍵字來指定當前類所需要繼承的函式,還能呼叫super()方法訪問基類構造器。
迭代器// es5以及之前構造器間的繼承實現
function
personclass
(name)
personclass.prototype.
getname
=function()
function
person
(name)
person.prototype = object.
create
(personclass.prototype,})
// es6中繼承的實現方法
class
personclass
getname()
}class
person
extends
personclass
}var digua =
newperson
('digua');
console.
log(digua.getname)
// digua
es6中加入了迭代器,它是對高效處理集合資料一種補充,所有的迭代器都含有next()方法,它返回兩個值,第乙個值時集合中的下一項(value),第二項是是否還有更多的值供使用(done)。迭代器中可以選擇實現乙個throw()方法來丟擲錯誤,es6中新增了for-of來和迭代器協同工作,擴充套件運算子(…)也使用了它,同時它對非同步操作也有一定意義。
生成器
生成器是能返回乙個迭代器的函式,它的表達方法是function後加乙個(*),同時使用yield來表明每一步結果。
例子
內建的迭代器function
*create()
let obj =
create()
console.
log(obj.
next()
)//
console.
log(obj.
next()
)//
console.
log(obj.
next()
)//
console.
log(obj.
next()
)//
// next 中可以傳值,當第乙個引數被傳遞給next方法時,它會成為生成器內部yield語句的值,注意第一次呼叫時任意引數會被忽略。
function
*create2()
let sum =
create()
;console.
log(sum.
next()
)//
console.
log(sum.
next(4
))// console.
log(sum.
throw
(new
error
("err"))
);// 從生成器中丟擲了錯,後續done值為true
es6中包含陣列、map、set三種集合物件型別,這三種型別都擁有三種迭代器。
1、entries():返回乙個包含鍵值對的迭代器
2、values():返回乙個包含集合中的值的迭代器
3、keys():返回乙個包含集合中鍵的迭代器
上面提到了for-of和迭代器是協同工作的,在使用for-of時values()方法是陣列和set的預設迭代器,entries()方法是map的預設迭代器
例子:
擴充套件運算子與可迭代物件let colors =
['red'
,'green'
,'blue'];
let track =
newset([
'123'
,'224'
,'412'])
let data =
newmap()
data.
set(
"name"
,"digua"
)data.
set(
"age",12
)for
(let value of colors.
entries()
)//[ 0, "red"] [1, "green"] [2, "blue"]
// 預設情況下為values()
for(
let value of colors)
// "red" "green" "blue"
for(
let value of track.
entries()
)// ["123", "123"] ["234", "234"] ["412", "412"]
// 預設情況下為values()
for(
let value of track)
// "123" "234" "412"
for(
let value of data.
entries()
)//["name": "digua"] ["age", 12]
// 預設情況下為entries()
for(
let value of data)
//["name": "digua"] ["age", 12]
之前提到擴充套件運算子中運用了迭代器,它會使用預設迭代器來判斷需要使用哪些值,將所有值從迭代器取出插入陣列。
例子
非同步任務// set
letset
=new
set([1
,2,2
,3,4
])let arr =
[...
set]
console.
log(arr)
// [1, 2, 3, 4]
// map
let map =
newmap([
"name"
,"digua"],
["age",20
])let arr1 =
[...map]
console.
log(arr1)
// [["name", "digua"], [["age", 20]]
迭代器對非同步任務的意義在於,我們可以通過乙個看似同步的**來實現非同步操作。下面寫一段偽**來說明迭代器實現的乙個非同步操作
例子中dosomething的操作是在等read操作執行之後,那麼這時就實現乙個非同步操作。function
*getname()
es6學習總結
一 let和const 1.let宣告的變數只在它所在的 塊有效。2.let宣告的變數僅在塊級作用域內有效。3.不存在變數提公升。4.每個let宣告的變數都有各自的作用域。它所宣告的變數一定要在宣告後使用,否則報錯 5.暫時性死區 只要塊級作用域內存在let命令,它所宣告的變數就 繫結 bindin...
ES6學習總結
1.建立 let x newset 2.特性 對基本資料型別,會自動去重 3.方法 x.add 新增 x.delete 刪除 x.has 刪除是否存在,返回布林 x.clear 清空 x.keys 返回鍵名的遍歷器 x.values 返回鍵值的遍歷器 x.foreach function 遍歷 ar...
ES6學習總結 六
在運用react vue等流行框架到時候,我們發現每個 塊都是分離的,每個js檔案中定義的內容都只在本區域有作用。這就是es6引入的模組化的概念,在此之前,乙個應用的每個js檔案所定義的所有內容都由全域性作用域共享。模組與指令碼的不同 模組的載入方式是與js原先指令碼載入方式有所區別的 1 模組 自...