美文网首页
this指向(箭头函数)

this指向(箭头函数)

作者: 彩云Coding | 来源:发表于2018-10-29 19:04 被阅读0次

    以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()返回一个包含一个空字符串的数组,而不是一个空数组,如果字符串和分隔符都是空字符串,则返回一个空数组。

    相关文章

      网友评论

          本文标题:this指向(箭头函数)

          本文链接:https://www.haomeiwen.com/subject/xvfitqtx.html