JavaScript 中的 this 关键字与箭头函数
KONGJUNE / / 前端 / 阅读量

最近在学 Vue,但我自己的 Js 功底又不咋地,总是出现一点朦朦胧胧搞不明白的东西。这次把 this 关键字与箭头函数总结一下。

this 关键字

众所周知,Java 中的 this 关键字指的是该对象自己,由于 Java 是面向对象的语言,所以这个“对象自己”就很好理解。而 Js 并非面向对象,在函数中使用 this 就会莫名其妙。一句话来说,Js 的 this 指的是直接上一级调用它的对象。这里的 “直接上一级” 可能较难理解,我们用以下几个例子来说明:

  • 当函数直接在全局被调用

    此时this关键字指的是 Window 对象(即浏览器的全局对象),如下例子:

    var num = 10;
    
    function a() {
        var num = 12;
        console.log(this.num); // 如下方调用后输出 10
        console.log(num); // 如下方调用后输出 12
        console.log(this); // 如下方调用后输出 Window
    }
    
    a(); // 在此调用函数
    

    因为是全局调用,故 this 对象直接指这个调用了函数的对象,而 window 这个对象中的 num 则为 10。不使用 this 关键字时才指的是函数内定义的 num,故console.log(num)语句输出的是12

  • 当函数存在上一级调用者

    此时 this 指的是上一级调用者,如下例子:

    var test = {
        num: 10,
        fn: function() {
            console.log(this.num); // 如下方调用输出 10
            console.log(this); // 如下方调用输出 Object { num: 10, fn: fn() }
        }
    }
    
    test.fn();
    

    这里的 this 指的就是 test 对象,因为 test.fn() 语句其实是 text 对象调用了他的参数中的函数。

  • 当函数有多层调用者

    其实上面的例子中,我们就可以认为text.fn()其实是 Window 对象调用了 text 对象再调用了 fn() 函数,而这里的 this 指的不再是 Window 对象而是 text 对象,因为 text 才是上一级直接调用者。(否则所有的 this 关键字不指的都是 Window 对象了么)

    或者我们可以看一下下面的例子:

    var test = {
        num: 10,
        nextObj: {
            num: 12,
            fn: function() {
                console.log(this.num); // 输出 12
            }
        }
    }
    
    test.nextObj.fn();
    

    这里的 this 同样指的是直接的上一级调用者 nextObj。

箭头函数

如下例子:

var fn = x => x * x;
console.log(fn(2)); // 输出 4

其中的 fn (x => x * x)相当于如下的一个函数:

function (x) {
    return x * x;
}

箭头函数将一个函数很简单地表达,省略了 return 等语句。

箭头函数还会有以下变形:

  • 函数体有多条语句

    x => {
        if (x >= 0) {
            return x;
        } else return -x;
    }
    
  • 函数有多个参数

    (x, y) => x * x + y * y;
    
  • 函数返回一个对象

    x => ({ data: x });
    

    () 是为了与多条语句的情况相区别。

箭头函数中的 this 关键字

箭头函数中的 this 是词法定义域,即:

  • 箭头函数没有自己的this,它的this是继承而来;
  • 箭头函数中的 this 默认指向在定义它时所处的对象(宿主对象)而不是执行时的对象。

如下例子:

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};
obj.getAge(); // 25

此时 obj 下的 getAge 下的 fn 中的 this 指向 obj 对象,因为它的 this 继承制他的上一级 getAge。如果将其中的箭头函数换为一般函数,则 this 指向 getAge。

支付宝捐赠
请使用支付宝扫一扫进行捐赠
微信捐赠
请使用微信扫一扫进行赞赏
有 0 篇文章