欢迎访问响应式个人博客!
男生版
女生版
初遇时,她的微笑,她往日的深情、承诺和傻劲,两个人共度的美丽时刻,一一印在回忆里,今天的感情已经比不上从前,但是我爱着恋着往日的她,舍不得离开!
排行
详情
您当前的位置>首页 > 正文
你不得不学的es6
2017-09-26 10:08:19   来源:   评论:0 点击:

,其他箭头函数 this 会指向上一层的 this,箭头函数并没有存储 this:

var obj = {
  id: 1,
  foo: ()=>{
    return this.id;
  }
}
var id = 2;
obj.foo(); // 2

除了 this 之外,箭头函数的 arguments 也是不存在,不能使用 new 来构造,也不能使用 yield 命令。

class

盼星星盼月亮,终于盼来了 JS 的继承。但是 ES6 中的继承和已经很完善的 ES5 中流行的继承库,到底有多少差异?

先来看一个例子:

//定义类
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  // 注意函数构造的方式
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
var p1 = new Point(5, 5);
p1.toString(); //"(5, 5)"

typeof Point // function
p1.constructor == Point //true

直接使用 class 关键字,constructor 作为构造方法,函数可以直接 toString(){} 的方式。

但是,class 的本质仍然是函数,是构造函数的另外一种写法。既然 class 的本质是函数,那么必不可少的一些 proto,prototype 方法也是存在的。

关于 class 的继承

通过关键字 extends 可以实现 class 的继承,

class Square extends Point{
  constructor(x){
    super(x, x);
  }
  toString(){
    return super.toString() + 'Square!';
  }
}
var s1 = new Square(4);
s1.toString(); //"(4, 4)Square!"
s1 instanceof Point // true
s1 instanceof Square // true

既然说到了继承,对 es5 中继承了解到小伙伴,肯定会疑惑关于 class 中的 proto 和 prototype 是一个什么样的关系。

子类的 proto 指向父类,子类的 prototype 的 proto 指向父类的 prototype,这和 ES5 并没有区别。

Square.__proto__ === Point
// true
Square.prototype.__proto__ === Point.prototype
// true

super 关键字

在 Java 等语言中,是有 super 继承父类函数,JS 中更加灵活,可以用作父类的构造函数,又可以用作对象。

子类的 constructor 必须要调用 super 方法,且只能在 constructor 方法中调用,其他地方调用会报错。

class A {
  constructor(a){
    this.x = a;
  }
}
A.prototype.y = 2;
class B extends A{
  constructor(a){
    super();
  }
  getY(){
    super() // 报错
    return super.y
  }
}

原生构造函数的继承

对于一些原生的构造函数,比如 Array,Error,Object,String 等,在 ES5 是无法通过 Object.create 方法实现原生函数的内部属性,原生函数内部的 this 无法绑定,内部属性获得不了。原生构造函数的继承

ES6 的 class 可以解决这个问题。

class MyArray extends Array {
  constructor(...args) {
    super(...args);
  }
}

var arr = new MyArray();
arr[0] = 12;
arr.length // 1

arr.length = 0;
arr[0] // undefined

extends 关键字不仅可以用来继承类,还能用来

相关热词搜索:

上一篇:如果要学习web前端开发,需要学习什么?
下一篇:分享一个目前可用的翻墙方法

收藏