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()thisobj对象本身,而通过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的所有理解,有不正确的地方欢迎大家帮忙补充和纠正。


你可能感兴趣的