大前端~令人头大的this问题总结

this问题举例总结

1、首先this指向谁，跟如何定义没关系，而是指向他的调用者，例如下边的例子，this指向谁？答案是：不确定，因为不知道调用者是谁。

function foo(){
    
    
   console.log(this)
}

foo() //全局作用域（因为运行环境不一样，所以不可单纯理解为windows，而是指向全局对象）

use strict
foo() // undefined 严格模式下，指向undefined

2、对于下述代码，this的指向

const obj1 = {
    
    
   foo:function(){
    
    
      console.log(this);
   }
}

答案仍然是不确定，因为不知道如何进行调用。

如果将foo赋值给一个变量，然后进行调用，则this指向全局对象，注意严格模式，在严格模式下，依旧指向undefined；

const fun = obj1.foo;
fun();//全局对象

如果直接obj1.foo(),，则指向obj1，因为函数是obj1调用的

obj1.foo() //obj1

3、对于下述代码，this的指向,this指向全局对象或者是undefined（严格模式）

const obj2 = {
    
    
    foo:function(){
    
    
       function bar(){
    
    
          console.log(this)
       }
       bar()
    }
}

因为this的指向不取决于声明，而是取决于如何调用，this所在的函数是bar()，所以this指向全局对象，在严格模式下指向undefined。

如果将foo当做构造函数，则this指向：

new obj2.foo() //全局对象

关于this的总结

1、沿着作用域向上找最近的一个function，看这个function最终是怎样执行的

2、this指向取决于所属function的调用方式，而不是如何定义

3、function调用一般分一下几种情况

• 作为函数调用，例如：foo()，则this指向全局对象，注意严格模式
• 作为方法调用，例如：foo.bar()、foo.baz.bar()，this指向最终调用这个方法的对象
• 作为构造函数调用，例如：new Foo()，this指向新的对象
• 特殊调用，foo.call()、foo.apply()，this指向参数成员