关于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中的作用域到底是个什么玩意？今天见！