Javascript的this指向和this指向的改变

this指向谁

是谁调用的，那么，this就指向谁。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function intro(name) {
    alert('my name is' + this.name);
}

var reason = {
  name:'wanhai',
}

reason.intro = intro;  

var intro = reason.intro();

intro();   // my name is wanhai;

如果没有声明调用者呢？

1
2
3
4
5
6
7
8
9
10
11
12
13

function t() {
     this.age = 23;
}

t() //???

调用者为 null , this 为 null 时候，js 把 this 指向 window。

alert( window.age ); //23

ES5以后，这里就变成了异常。

构造函数下的this指向

1
2
3
4
5
6
7
8
9
10

function Cat(name , color) {
    this.name = name;
    this.color = color;
}

var cat = new Cat() ; // 会得到一个新对象，方法内的this，指向该新对象

console.log(cat); // Cat

方法 new 的瞬间，得到一个空对象 {}
方法的this指向该空对象
运行方法
{}.name = name;
{}.color = color;

返回该对象

改变this的指向

改变this的指向主要依靠两个方法，一个是call，一个是apply。

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
30
31
32
33
34
35
36
37

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style>
	#test1 {
		width: 100px;
		height: 100px;
		background: gray;
	}
	#test2 {
		width: 100px;
		height: 100px;
		background: green;
	}
</style>
</head>
<body>
    <div id="test1"></div>
    <div id="test2"></div>
</body>
<script>
    var test 1 = document.getElementById('test1');
    var test 2 = document.getElementById('test2');

    function change() {
    	this.style.background = 'red';
    }

    // change中的this本来指向window，我们使用call改变了它的指向，这个时候它指向test2

    change.call(test2);
</script>
</html>

函数名，call(对象，参数1，参数2，参数3…);

1、把函数的this，指向对象
2、运行函数，传参为参数1，参数2参数3

apply也是一样的用法，只不过它返回的是数组。

June 10, 2018

javascript