苏秦陶侃博客

es6-class

字数统计: 875阅读时长: 3 min
2018/11/30 Share

es6

class

​ js提供的一个语法糖，用来更清晰的定义类，有constructor属性，constructor里边定义类的属性，constructor默认返回实例对象（即this），但也可以返回其他对象。

​ 它的方法都挂在prototype上。

类结构

示例代码如下：

Point {
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  constructor() {
    // ...
  }

  toString() {
    // ...
  }

  toValue() {
    // ...
  }
}

// 等同于

Point.prototype = {
  constructor() {},
  toString() {},
  toValue() {},
};

set、get关键字

在class内部可以使用set和get关键字，对某个属性设置存值函数和取值函数,示例代码：

Super{
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
constructor(name,age) {
    this.name = name
    this.test = age
}
set age(value) {
	this.test = value +1
}
get age() {
    return this.test
    }
}
var obj = new Super('aaa',2)
console.log(obj.age) // 2
obj.age = 4
console.log(obj.age) // 5

静态方法和私有方法属性

​ 有静态方法，没有私有属性和私有方法，但可以通过其他方式实现，比如symbol。

静态方法

​ 有关键字static的方法不能被实例继承，而是通过类直接调用，这种方法就叫”静态方法“。(静态方法可以和非静态方法重名；如果静态方法中有this关键字，那么这个this代表的是类，而非类的实例)

私有属性

​ 类本身的属性，而不是通过constructor挂载实例this上的属性，比如Super.props = 1.

目前有了提案：

  1. 可以直接加关键字static定义静态属性
  2. 实例属性可以不用必须写在constructor中了。

新增属性new.target

​ 新增属性new.target，用在构造函数中，用来判断实例对象是否通过new关键字来创建的，还有一种方法判断就是this instanceof Person

对比es5

很多特性都和es5是一致的，但有些特性就不同：

1. 类的内部所有定义的方法都是不可枚举的。
2. 默认就是严格模式。在类或者模块内部，默认就是严格模式。
3. 必须使用new进行调用，否则会报错。
4. 没有变量提升。

原型相关API

  1. hasOwnProperty用来判断对象是否自身拥有某属性。
  2. getPrototypeOf方法可以用来判断类的继承关系；.proto属性的替代方法，获取对象的原型。
  3. Object.keys是遍历不到prototype的，它只遍历可枚举的自身属性。
  4. Object.getOwnPropertyNames返回对象所有可枚举不可枚举的属性和方法。

继承

es5和es6

es5原型链只有一条，即prototype；

es6原型链有两条，一条是类本身实现属性继承(这样就子类就可以继承父类的静态方法)，相当于是es5中的call/apply，另一条才是prototype。

内部对象没有静态引用。

​ 子类的this需要通过父类的constructor完成塑造，得到与父类同样的实例属性和方法，然后在对其进行加工，否则子类是得不到this对象的。

getPrototypeOf()

​ 判断继承关系

super

​ 既可以当函数使用也可以当对象使用。

super()调用父类构造函数；super.method()调用父类方法

作为函数代表的是父类的构造函数，内部this指向的是子类。只能用在子类的构造函数中。

super() = A.prototype.constructor.call(this)

作为对象，在普通方法中指向的是父类的原型对象（不能访问父类的，this指向子类实例），在静态方法中指向的是父类（this指向子类）。

使用地方

可以用在class中和对象属性为method()中。

原文作者：zhanghy7

原文链接：http://zhanghy7.github.io/2018/11/30/es6-class/

发表日期：November 30th 2018, 1:57:00 pm

更新日期：November 30th 2018, 2:06:25 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. es6
    1. 1.1. class
      1. 1.1.1. set、get关键字
      2. 1.1.2. 静态方法和私有方法属性
        1. 1.1.2.1. 静态方法
        2. 1.1.2.2. 私有属性
      3. 1.1.3. 新增属性new.target
      4. 1.1.4. 对比es5
      5. 1.1.5. 原型相关API
    2. 1.2. 继承
      1. 1.2.1. es5和es6
        1. 1.2.1.1. getPrototypeOf()
        2. 1.2.1.2. super
      2. 1.2.2. 使用地方
Total : 43
2019
2018
问题 http js mysql tools English 计算机基础 git 问题及解决
shell css javaScript javaScript/es6 hybrid js vue tools react css基础 react/ssr 宏观架构