(精華)2020年7月4日 JavaScript高級篇 ES6(class類)

是什么

es6新提供的一種生成對象實例的寫法 es5構(gòu)造函數(shù)的另外一種寫法（語法糖）

作用

無疑讓寫法更清晰 更像面向?qū)ο蟮膶懛?/p>

回顧之前es5生成實例對象

Person.prototype.say = function(){ console.log('我會說話'); } // 這是錯誤的寫法 // Person.prototype.say = ()=>{ // console.log(`我是${this.name}`); // } function Person(name,age){ this.name = name this.age = age } let person1 = new Person('張三',18) person1.say()

1

2

3

4

5

6

7

8

9

10

11

12

13

14

class類生成實例對象

class Person{ constructor(name,age){ this.name = name this.age = age } say(){ console.log(`我是${this.name}`); } } let person2 = new Person('李四',20) person2.say() console.log(typeof Person); // function console.log(person2.constructor === Person);

1

2

3

4

5

6

7

8

9

10

11

12

13

constructor 方法

// es6類的方法都定義在類的prototype屬性上面 // 其實調(diào)用es6類的方法就是調(diào)用原型上的方法 class Car{ constructor(){ console.log(this); // 指向其他的對象 null return Object.create(null) } } let bmw = new Car() console.log(bmw instanceof Car)

1

2

3

4

5

6

7

8

9

10

11

12

共享一個原型對象

class Person{ constructor(name) { this.name = name } } Person.prototype.get = function(){ console.log('我是父類') } let person1 = new Person('張三') let person2 = new Person('李四') person1.get() person2.get()

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

取值函數(shù)和存值函數(shù)

const person = { get name(){ console.log(name); return name }, set name(value){ console.log(value); name = value } } person.name = 'tony' // console.log(); console.log(person.name); class MyClass{ get prop(){ return MyClass.prop } set prop(value){ MyClass.prop = value } } let init = new MyClass() init.prop = 123 console.log(init.prop);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

this指向問題

// 第一種 箭頭函數(shù) eat = ()=>{ this.get() } // 第二種 綁定this constructor(){ this.eat = this.eat.bind(this) }

1

2

3

4

5

6

7

8

實例屬性的新寫法

class Person{ name = 'tony' }

1

2

3

靜態(tài)屬性

// 靜態(tài)屬性 指的是class本身的屬性 Class.propname 并不是實例的屬性 class Person{ static age = 18 // 現(xiàn)在靜態(tài)屬性的寫法 name = 'tony' } let person1 = new Person() console.log(person1.age);// undefined

1

2

3

4

5

6

7

8

靜態(tài)方法

// 靜態(tài)方法 class Person{ static age = 18 // 現(xiàn)在靜態(tài)屬性的寫法 static say(){ console.log('hello'); } name = 'tony' } // let person1 = new Person() Person.say()

1

2

3

4

5

6

7

8

9

10

私有屬性

以前用閉包實現(xiàn)私有屬性

class Math{ #count = 0 add(){ this.#count ++; return this.#count } } let math = new Math() // console.log(math.#count); 會報錯 console.log(math.add());

1

2

3

4

5

6

7

8

9

10

私有方法

class MathAdd{ #a; #b; constructor(){ this.#a = 1; this.#b = 2; } #sum = ()=>{ return this.#a + this.#b } conSum(){ console.log(this.#sum()); } } let mathadd = new MathAdd() // console.log(math.#count); 會報錯 mathadd.conSum()

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

Elasticsearch JavaScript

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。