[TOC] #### 1. 类的声明 --- ES6 引入的 Class 语法只是 JavaScript 原型继承的一个语法糖，它背后仍然使用的是函数和原型链机制 JavaScript 中的类其实就是函数的语法糖写法，类本质上是一个函数，具体来说： + 类本身是一个函数，可以通过 typeof 检查得到 function + 类中定义的方法实际上被放置在类的 prototype 对象上，与传统通过函数构建对象的方式一致 因此，可以认为 JavaScript 中的类就是一种特殊的函数，它具有函数的所有特性，并且通过函数的方式来创建和操作对象 ```javascript // 类的声明支持下面两种方式 class User { } let info = class { } console.log(typeof User); // function console.log(typeof info); // function ``` 类中定义方法，切记，多个方法之间无需使用逗号分隔，加了逗号会报错 ```javascript class User { // 特别注意，多个方法之间不需要逗号分隔 show() { } get() { console.log('张三'); } } let user = new User() user.get() // 调用类中的方法 ``` #### 2. 类的属性 --- 类的基本语法，对比函数，类的可用性和扩展性更高 ```javascript // 函数 function Article(title) { this.title = title } const art = new Article('这是标题') console.log(art.title); // 类 class User { constructor(name) { this.name = name } getName() { return this.name } } let user = new User('张三') console.log(user.name); ``` 对象属性声明，也就是在类的内部声明属性，也不需要使用逗号分隔 ```javascript class User { // 声明属性 title = '姓名' constructor(name) { this.name = name } getContent() { return this.title + ': ' + this.name } // 修改类的属性 changeTitle(title) { this.title = title } } const user = new User('张三') user.changeTitle('用户名') const content = user.getContent() console.log(content); // 用户名: 张三 ``` #### 3. 类的方法 --- 类的内部工作机制就是原型操作 ```javascript // 普通函数中新增方法 function info() { } info.prototype.show = function () { } // 类声明方法 class User { show() { } } // 它们原型上的构造方法都是指向到自己本身 console.log(info.prototype.constructor === info) // true console.log(User.prototype.constructor === User) // true // 都是将方法挂载到原型上 console.log(info.prototype) // { show: ƒ } console.log(User.prototype) // { show: ƒ } ``` #### 4. 严格模式下的类 --- ```javascript "use strict"; function show() { // 非严格模式下是 Window 对象 // 严格模式下是 undefined console.log(this) } show() class User { get() { // 无论是否为严格模式都是 undefined function test() { console.log(this) } test() } } new User().get() ``` #### 5. 静态属性的使用 --- 普通函数中静态属性的使用： ```javascript function info(name) { // 这个属性是属于对象的属性 this.name = name } // 给构造函数设置的属性：静态属性 info.website = 'baidu.com' let obj = new info('liang') // 对象属性 console.log(obj.name) // liang // 静态属性 console.log(info.website) // baidu.com ``` 类中的静态属性使用： ```javascript class Request { // 静态属性：某个值需要给所有对象使用时，可以定义为静态属性 static host = 'https://www.itqaq.com' user(url) { return Request.host + '/api/user/' + url } article(url) { return Request.host + '/api/article/' + url } } console.log(Request.host) // https://www.itqaq.com let obj = new Request() console.log(obj.user('add')) // https://www.itqaq.com/api/user/add console.log(obj.article('single')) // https://www.itqaq.com/api/article/single let obj2 = new Request() console.log(obj2.user('delete')) // https://www.itqaq.com/api/user/delete ``` #### 6. 静态方法的使用 --- 普通函数定义非静态方法 ```javascript function User() { // 方式一：在函数内部通过 this 添加方法 this.look = function () { } } // 方式二：在原型上添加方法（推荐用法） User.prototype.show = function () { } console.log(new User()) ``` 普通函数定义静态方法 ```javascript function User() { } // 静态方法直接定义在函数上 User.show = function () { console.log('static method: show'); } // 因为函数也是一个对象，也可以定义在函数的原型上 User.__proto__.look = function () { console.log('static method: look'); // 这里思考一下，此处可以使用 this 吗 ？ // 答案是可以的，因为函数本身就是一个对象，this 指向函数本身 // console.log(this) // ƒ User() { } // console.log(this === User) // true } console.dir(User) User.show() // static method: show User.look() // static method: look ``` 类的静态方法定义 ```javascript class User { // 方式一：使用 static 关键字定义静态方法（推荐方式） static look() { console.log('static method: look'); } } // 方式二：定义在类（函数）的原型上 User.__proto__.show = function () { console.log('static method: show'); } console.dir(User) User.show() User.look() ``` 也可以通过静态方法来获取类的实例 ```javascript class User { constructor(name, age, gender) { this.name = name this.age = age this.gender = gender } static create(...args) { return new this(...args) } } const info = User.create('liang', 18, '男') console.log(info) ``` #### 7. 在类中使用访问器 ---