ES6里class杂乱随笔

Posted 2021-02-18 lsaxy

这是一篇乱七八糟的随笔。
class是ES6新增的特性，用于解决javascript没有类的困惑。

--杂谈

ES5及之前，类都是用函数来替代，包括实例。

如：

 1 function Person(name) {
 2     // this指向实例
 3     this.name = name
 4     this,,log = function () {
 5         console.log(‘name is ‘ + name)
 6     }
 7 }
 8 
 9 // 或者
10 Person.prototype.changeName = function (name) {
11     this.name = name
12     console.log(‘new name is ‘ + name)
13 }
14 
15 var p = new Person(‘zhangsan’)
16 p.name // zhangsan
17 p.log() // name is zhangsan
18 p.changeName(‘lisi‘)  // new name is Lisi

class本质上是function的语法糖，不过class的写法更加清晰可见，也更符合面向对象。

由于本质是语法糖，所以偶尔会遇到比如Class转function，function转Class的题目

上面转为class代码如下

 1 class Person {
 2     // constructor是类的构造函数
 3     constructor (name) {
 4         this.name = name
 5     }
 6     log () {
 7         console.log(`name is ${this.name}`)
 8     }
 9     changeName(name) {
10         this.name = name
11         console.log(`new name is  ${this.name}`)
12     }
13 } 
14 
15 
16 var p = new Person(‘zhangsan‘);  // 上同

相比函数来声明更加清晰易懂。

class本质也是函数

typeof Person // functionA

类的所有方法都定义在prototype上面

 所有上诉的类其实等同于下

Person,prototype = {
     log () {...},
     changeName(name) {...}
}

类里的内容，除非使用this来表示，则表示内容在实例上，否则都是属于类。

实例在调用方法时候，其实就是调用类上面的原型方法。

p.constructor === Person.prototype.constructor

// p 表示Person的实例
p.hasOwnProperty(‘name‘) // true
p.hasOwnProperty(‘log‘) // false
p.__proto__.hasOwnProperty(‘log‘) // true

类的所有实例共享一个原型对象,所以

p1.__proto__ = p2.__proto__

还可以通过__proto__来增加类的方法

p.__proto__.printName = function () { return this.name };zha

当然这样声明不好，会使得逻辑变得混乱，增加的时候也需要很谨慎，同时不方便管理

-- 其他

class还有许多新的特性，比如支持getter和setter

如：

get 和 set

静态属性，静态方法（只能在类内部使用）

私有属性，通过 #  来声明，如 #count

 

 

本来想写许多，想想还是不用记录那么多，主要用于作于记录之用，需要详细还是阅读ES6比较轻松。

 

一个热爱编程的猴子，感谢与你相遇。

知识就像海洋，搁浅都不一定能见到彼岸。

共勉。