this指向(箭头函数)

2018-10-29  本文已影响0人  彩云Coding

以this的使用场景进行分类:

1.普通函数下,this 的指向

2.构造函数下,this 的指向

3.箭头函数下,this 的指向

普通函数下,this的指向

(1)函数的定义位置不影响其this指向,this指向只和调用函数的对象有关。

(2)多层嵌套的对象,内部方法的this指向离被调用函数最近的对象(window也是对象,其内部对象调用方法的this指向内部对象, 而非window)。

(3)setTimeout & setInterval 对于延时函数内部的回调函数的this指向全局对象window

//时延函数的普通写法下的this指向
function Person() {  
    this.age = 0;  
    setTimeout(function() {
        console.log(this);
    }, 3000);
}
var p = new Person();//3秒后返回 window 对象

构造函数下,this 的指向

(1)构造函数中的this与被创建的新对象绑定。

箭头函数下,this 的指向

(1)箭头函数不绑定this, 它会捕获其所在(即定义的位置)上下文的this值, 作为自己的this值

function Person() {  
    this.age = 0;  
    setInterval(() => {
        // 回调里面的 `this` 变量就指向了期望的那个对象了
        this.age++;
    }, 3000);
}
var p = new Person(); //三秒之后age变为1
var adder = {
  base : 1,
  add : function(a) {
    var f = v => v + this.base;
    return f(a);
  },
  addThruCall: function inFun(a) {
    var f = v => v + this.base;
    var b = {
      base : 2
    };    
    return f.call(b, a);
  }
};

console.log(adder.add(1));         // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2(而不是3,因为箭头函数不绑定this,其内部的this并没有因为call() 而改变,其this值仍然为函数inFun的this值,指向对象adder

(2)以上的箭头函数都是在方法内部,总之都是以非方法的方式使用,如果将箭头函数当做一个方法使用会怎样呢?

var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}
obj.b();  // undefined window{...}
obj.c();  // 10 Object {...}

作为方法的箭头函数this指向全局window对象,而普通函数则指向调用它的对象 。

ps: 最近遇到的一个小坑:当字符串为空时,split()返回一个包含一个空字符串的数组,而不是一个空数组,如果字符串和分隔符都是空字符串,则返回一个空数组。

上一篇下一篇

猜你喜欢

热点阅读