(精华)2020年7月4日 JavaScript高级篇 ES6(class类)

是什么

es6新提供的一种生成对象实例的写法 es5构造函数的另外一种写法（语法糖）

作用

无疑让写法更清晰 更像面向对象的写法

回顾之前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()

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);

constructor 方法

// es6类的方法都定义在类的prototype属性上面 // 其实调用es6类的方法就是调用原型上的方法 class Car{ constructor(){ console.log(this); // 指向其他的对象 null return Object.create(null) } } let bmw = new Car() console.log(bmw instanceof Car)

共享一个原型对象

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()

取值函数和存值函数

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);

this指向问题

// 第一种 箭头函数 eat = ()=>{ this.get() } // 第二种 绑定this constructor(){ this.eat = this.eat.bind(this) }

实例属性的新写法

class Person{ name = 'tony' }

静态属性

// 静态属性 指的是class本身的属性 Class.propname 并不是实例的属性 class Person{ static age = 18 // 现在静态属性的写法 name = 'tony' } let person1 = new Person() console.log(person1.age);// undefined

静态方法

// 静态方法 class Person{ static age = 18 // 现在静态属性的写法 static say(){ console.log('hello'); } name = 'tony' } // let person1 = new Person() Person.say()

私有属性

以前用闭包实现私有属性

class Math{ #count = 0 add(){ this.#count ++; return this.#count } } let math = new Math() // console.log(math.#count); 会报错 console.log(math.add());

私有方法

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()