ES6里class杂乱随笔

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

--杂谈

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

如：

function Person(name) {
    // this指向实例
    this.name = name
    this,,log = function () {
        console.log('name is ' + name)
    }
}

// 或者
Person.prototype.changeName = function (name) {
    this.name = name
    console.log('new name is ' + name)
}

var p = new Person(‘zhangsan’)
p.name // zhangsan
p.log() // name is zhangsan
p.changeName('lisi')  // new name is Lisi

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

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

上面转为class代码如下

class Person {
    // constructor是类的构造函数
    constructor (name) {
        this.name = name
    }
    log () {
        console.log(`name is ${this.name}`)
    }
    changeName(name) {
        this.name = name
        console.log(`new name is  ${this.name}`)
    }
} 


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比较轻松。

 

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

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

共勉。