关于javascript:六个字解释清楚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 中的作用域到底是个什么玩意？今天见！