js解密]箭头函数的this作用域解析

什么是箭头函数

箭头函数是JavaScript6的新语法，也简称称为ES6。它允许我们用简短的 => 代替 function 从八个字符浓缩到了2个字符。

const jsjiami1 = function(str){
    alert(`我是普通函数 jsjiami${str}`);
}
jsjiami1('.com');
const jsjiami2 = (str) => {
    alert(`我是箭头函数 jsjiami${str}`)
}
jsjiami2('.com');
// 可以清晰的看出来,省略了我们不少敲键盘的时间，一个函数少敲6个字符，100个函数就少敲600个字符，哈哈。

那么除了字符长度变简短意外，它还有什么特性呢，今天我们来讲讲箭头函数的其中一个特点 this 。

什么是this

this的字面意思是，这个、当前。他是一个动态的变量，在不同的环境下指向不同的对象，我们今天要搞清楚的就是在不同情况下，箭头函数的 this 究竟指向谁？顺带也讲一讲普通函数的 this。

普通函数的this

敲代码光理论是不行的，我们直接上实验课。

var jajiami = function(){
    console.log(this); // window 可以F12丢浏览器试试
}
jajiami('js在线一键解密 jsjiami.com');

从上面代码初步看，普通函数中的 this 指向的是window对象，不要急，我们接着往下看。

var obj = {
    a: 'jsjiami.v6',
    b: 'sojson.v6',
    c: function(){
        console.log(this); 
    }
}
obj.c(); // obj对象
var temp = obj.c;
temp(); // window对象

现在我们创建一个对象，对象中包含一个方法。我们试着调用他来查看函数的 this 是什么。

从打印结果可以得知，通过对象变量执行的obj.c()的 this 为obj对象本身，而通过temp()执行的 this 却是window对象，这是为什么呢？

其实我们仔细看不难发现，这里的 this 对象其实就是调用者本身，也就是谁调用的这个函数，那么这个函数的 this 就是谁。

到这里可能有一小部分基础比较薄弱的朋友会好奇，为什么 temp() 没有调用者他的 this 对象确是window呢？官方文档是这么回答的：因为在这个函数中 this 没有被设定，所以它默认为 全局/ window 对象。（因为没调用者，那它默认就是window）

普通函数的this总结

谁调用我，谁就是this

箭头函数的this

箭头函数的 this 和普通函数的 this 有点不同。具体我们还是直接动手实验。

var jsjiami = () => {
    console.log(this); // window
}
jsjiami();

初步看，箭头函数和普通函数一样，直接调用 this 就是window对象，但是咱们别急往下看。

var obj = {
    a: 'jsjiami.v6',
    b: 'sojson.v6',
    c: () => {
        console.log(this);
    }
}
obj.c(); // window
var temp = obj.c;
temp(); // window

我相信很多不懂的人都会非常疑惑，为什么这里用对象调用c方法 this也指向了window对象。

这里引用官方文档的一句话为大家解答：箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this。

现在看不出什么，我们再加一层嵌套看看

var obj = {
    a: 'jsjiami.v6',
    b: 'sojson.v6',
    c: function(){
        var d = () => {
            console.log(this);
        }
        d();
    }
}
obj.c(); // obj
var temp = obj.c;
temp(); // window

在外层嵌套了一层普通函数后，obj.c()的 this 变成了obj对象，到这里我们可以开始思考这其中的一些细节了。如下例所示

var obj = {
    a: 'jsjiami.v6',
    b: 'sojson.v6',
    c: function(){
        console.log(this);
    }
}
obj.c(); // obj
var temp = obj.c;
temp(); // window

这个例子中，obj.c()也是obj对象，那么和上边的有什么不同呢？上下对比，可以看出无论是否被箭头函数包裹，在obj.c()执行时 this 都是obj对象，那么结合官方文档的那句话(箭头函数没有自己的this)，得出结论，箭头函数中的this就是箭头函数外层作用域的this。

总结

根据大量实验我们发现：

普通函数的this => 谁调用我谁就是this，没有调用者默认就是window

箭头函数的this => 我外边作用域的this是什么，我的this就是什么

在js安全领域，js加密解密也需要过硬的js知识来支撑，其中this也是重中之重，以上就是我对箭头函数this的所有理解，有不正确的地方欢迎大家帮忙补充和纠正。