JS中的this指向问题(详细版plus)_type="module"时 this 为空-优快云博客

本文详细探讨了JavaScript中this的指向问题，包括全局作用域、普通函数、箭头函数、事件绑定、定时器、ES5和ES6构造函数、严格模式、call/apply/bind方法以及对象和对象函数中的this行为。通过对各种场景的分析，帮助读者全面掌握this的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS中的this指向问题

在全局作用域中

=>this -> window

<script>
   console.log(this); //this->window
</script>

在普通函数中

=>this取决于谁调用，谁调用我，this就指向谁，跟如何定义无关

 var obj = {
            fn1:function() {
                console.log(this); 
            },
            fn2:function(){
                fn3() 
            }
        }
        function fn3() {
            console.log(this); 
        }
        fn3();//this->window
        obj.fn1();//this->obj
        obj.fn2();//this->window

箭头函数中的this

=>箭头函数没有自己的this，箭头函数的this就是上下文中定义的this，因为箭头函数没有自己的this所以不能用做构造函数。

 var div = document.querySelector('div'); 
    var o={
        a:function(){
            var arr=[1];
          //就是定义所在对象中的this
          //这里的this—>o
            arr.forEach(item=>{
              //所以this -> o
                console.log(this);
            })
        },
      //这里的this指向window o是定义在window中的对象
        b:()=>{
            console.log(this);
        },
        c:function() {
            console.log(this);
        }
    }
    div.addEventListener('click',item=>{
        console.log(this);//this->window 这里的this就是定义上文window环境中的this
    });
    o.a(); //this->o
    o.b();//this->window
    o.c();//this->o 普通函数谁调用就指向谁

事件绑定中的this

事件源.onclik = function(){ } //this -> 事件源

事件源.addEventListener(function(){ }) //this->事件源

var div = document.querySelector('div'); 
    div.addEventListener('click',function() {
        console.log(this); //this->div
    });
    
    div.onclick = function() {
    console.log(this) //this->div
    }

定时器中的this

定时器中的this->window，因为定时器中采用回调函数作为处理函数，而回调函数的this->window

  setInterval(function() {
        console.log(this); //this->window 
    },500)
    
    setTimeout(function() {
        console.log(this); //this->window 
    },500)

ES5构造函数中的this

构造函数配合new使用, 而new关键字会将构造函数中的this指向实例化对象，所以构造函数中的this->实例化对象

new关键字会在内部发生什么

//第一行，创建一个空对象obj。
var obj  ={};
//第二行，将这个空对象的__proto__成员指向了构造函数对象的prototype成员对象.
obj.__proto__ = CO.prototype;
//第三行，将构造函数的作用域赋给新对象，因此CA函数中的this指向新对象obj，然后再调用CO函数。于是我们就给obj对象赋值了一个成员变量p，这个成员变量的值是” I’min constructed object”。
CO.call(obj);
//第四行，返回新对象obj。
return obj;

=> 在实例化方法中或者类中的this都是指向实例化对象

=>在ES5中如果不使用new 执行函数，函数也是可以执行的，但是不会返回实例化对象，当作函数执行

function Person(name,age) {
        this.name = name;
        this.age = age;
    }
    var person1 = new Person();
    person1.name = 'andy';
    person1.age = 18;
    console.log(person1);//Person {name: "andy", age: 18}
    var person2 = new Person();
    person2.name = 'huni';
    person2.age = 20;
    console.log(person2);// Person {name: "huni", age: 20

ES6中构造函数的this

=> 在实例化方法中或者类中的this都是指向实例化对象

=>在ES6中 static fn( ) 静态方法中的this是当前类也是构造函数

就是当前类名或者constructor

=>构造函数和类名就是相同的
```
const box = new Box() 
//实例化对象中的constructor都是构造函数
box.constructor === Box //true
```

this指向undefned

=>在ES6的严格模式中，如果调用函数中的this，this将会被指向indefined，或者全局作用域中的this也会指向undefied

<script type="module"> //注意是严格模式下
	function fn() {
		console.log(this) //this->undefined
	}
	console,log(this) //this->undefined
</script>

call,apply,bind

=>如果使用call，apply，bind时如果带入null或者undfined，此时this指向window

=>如果call，apply，bind的第一个参数不是null和undefined，那么此时该函数的this指向该对象
```
fn.call(null)
fn.apply(null)
fn.bind(null) // this -> window
```

对象中的this

=>对象中的this也是上下文环境

var c = 20;
var obj = {
	c:10
	a:this.c //this->window
	b:function(){
		console.log(this.a) //this-obj
	}
}
obj.b() //20

var a = 100;
var obj = {
 	a:10,
 	c:50, 
 	b:{
 		a:0,
 		c:this.a,//this->window. 当执行b对象时，b对象还没有完全建立只能去上一层寻找
 		run:function() {
 			console.log(this.c);//this->b
 		}
 	}
}
obj.b.run() //100

arguments中的this

=>在函数中使用回调函数时，利用arguments的参数来执行回调函数，被执行的回调函数中this指向的是当前函数arguments.caller的this
```
var a;
function fn() {
	console.log(this === a)
}
function fn1(f) {
	a = arguments
	arguments[0]();
}
fn1(fn);  //this指向fn1中的arguments
```

对象函数中的this

=>this指向当前对象

var obj = {
	c:10
	a:this.c //this->window
	b:function(){
		console.log(this.a) //this-obj
	}
}
obj.b();

JS中的this指向问题(详细版plus)