Es6的super关键字和箭头函数this指向

super关键字

super关键字指向该对象的原型,super关键字只能使用在对象简写的方法中,请看下列。

Object.prototype.name = '秦司令';
var json = {
    name:'我是json',
    add(){
        return super.name;
    }
}
console.log(json.add()) // 秦司令

上面代码中,super关键字,指向json对象的原型,json的原型就是Object,所以在外面设置了一下Object原型的name。

下面在看一个列子

var obj = {
    name:'我是obj',
};
        
var json = {
    name:'我是json',
    add(){
        return super.name;
    }
}

Object.setPrototypeOf(json,obj);
console.log(json.add()); // 我是obj

上面代码中,将json的原型设置为obj,所以调用add方法指向obj的name属性。

注意,super关键字只能在对象方法简写内使用

// 报错
var json = {
  add:function(){
      return super.name
  }
};

// 报错
var json = {
    add:()=>{
        return super.name
    }
}

箭头函数的使用

var f = v => 1
console.log(f(1))  // 1

// 上面写法等同于下面

var f = function (v){
    return v
}

上面代码中,箭头函数的参数如果有一个就不用带括号,如果多个参数就得使用括号了。

var f = (v,v1) => [v,v1]
console.log(f(1,2)) // [1,2]

setTimeout(()=>{

},2600)

箭头函数this的指向

var obj = {
    f(){
        setTimeout(()=>{
            console.log(this)
        },20)
    }
};
console.log(obj.f()) // f 

var obj = {
    f:()=>{
        setTimeout(()=>{
            console.log(this)
        },20)
    }
};

console.log(obj.f()) // window

箭头函数在对象的普通函数中指向本函数,箭头函数里面根本没有自己的this，而是引用外层的this,箭头函数不能绑定this。

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function () {
    this.s2++;
  }, 1000);
}

var timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0

上面代码中,Timer函数内容部设置了两个定时器,一个普通定时器函数,一个箭头定时器函数,箭头函数往上找,找到本函数timer对象,然而普通定时器函数,直接指向window,所以，3100 毫秒之后，timer.s1被更新了 3 次，而timer.s2一次都没更新。

希望本文章能对你有所收获。