JS中this详解

本文最后更新于:1 年前

this详解

1、谁最终调用函数,this指向谁,this指向永远只可能是对象,不可能是函数
this指向谁不取决于this写在哪,而且取决于函数在哪调用
this指向的对象,我们称之为函数的上下文context,也叫函数的调用者

2、this指向的规律(与函数调用的方式息息相关)
this指向的情况,取决于函数调用的方式有哪些:
①通过函数名()直接调用:this指向window

②通过对象.函数名()调用:this指向这个对象

③函数作为数组的一个元素,通过数组下标调用的:this指向这个数组

④函数作为window内置函数的回调函数调用:this指向window
例如setInterval、setTimeout等

⑤函数作为构造函数,用new关键字调用时,this指向新new出的对象

不同情况举例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//通过函数名()直接调用,this指向window
function func(){
console.log(this);
}
func();

//通过对象.函数名()调用:this指向这个对象
//狭义对象
var obj = {
name:"obj",
func1 : func,
}; //this 指向obj
obj.func1();
//广义对象
document.getElementById("div").onclick = function(){
this.style.backgroundColor = "red";
} //this指向div

//函数作为数组的一个元素,通过数组下标调用的:this指向这个数组
var arr = [func,1,2,3];
arr[0](); //this指向arr

//函数作为window内置函数的回调函数调用:this指向window
setTimeout(func,1000); //this指向window

//函数作为构造函数,用new关键字调用时,this指向新new出的对象
var obj = new func(); //this指向新new出的obj



本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!