六个字解释清楚JavaScript中的this指向

六个字解释清楚JavaScript中的this指向

在前端的学习和工作中，我们经常遇到this的使用，尤其是this的指向。

在MDN中可以看到，this的解释比较简单：当前执行上下文（global、function 或 eval）的一个属性，在非严格模式下，总是指向一个对象，在严格模式下可以是任意值。

我们先看几个例子

1、一个普通函数的this指向

var name ='test'
function fn(){
    console.log(this.name)
}
fn(); // 'test'

2、一个对象函数调用时的this指向

var name ='test'
let tom = {
   name:'test2',
   fn:function(){
     console.log(this.name)
   }
}

tom.fn(); // 'test2'

3、构造函数调用时的this指向

let Student = function(name){
   this.name = name
}
let tom = new Student('tom')
console.log(tom.name) // 'tom'

4、箭头函数调用时的this指向

var name = '666'
let test = {
   name:'777',
   fn:()=>{
    console.log(this.name)
   } 
}

console.log(test.fn()) // '666'

在非严格模式中，我们可以看到，前三种调用方式可以这么理解：谁调用，指向谁

对于第一种，fn方法实际上一个全局global方法，我们调用global.fn就是获取对应global的name属性

对于第二种方法，则是获取对应obj的name属性

对于第三种方法，我们是用new关键字，创建了tom这个对象，然后自然就是给tom赋值啦

对于箭头函数比较特殊，我们要知道，箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值。

我们把最后一个例子再稍微改改，看看输出是什么？

var name = '666'
let test = {
   name:'777',
   fn:{
     name:888,
     fn:()=>{
       console.log(this.name)
     }
   }
}

console.log(test.fn.fn()) // '666'

可能有同学不理解了，为什么这里不是输出888。

具体我们下文分享，js中的作用域到底是个什么玩意？明天见！