文章目录
  1. 1. 全局中的this
  2. 2. 函数调用
  3. 3. 作为对象调用
  4. 4. 作为构造函数
  5. 5. 内部函数
  6. 6. 简单地总结

JavaScript 中的this 总是让人迷惑,应该是js 众所周知的坑之一。

全局中的this

1
alert(this); //window

全局范围内的this指向全局对象,浏览器中就是window。

函数调用

1
2
3
4
5
function test(x) {
this.x = x; //这里的this指向全局
}
test(2);
console.log(x); //全局变量x=2

这里this 指向了全局对象,即window。

作为对象调用

1
2
3
4
5
6
7
8
9
var name = "out name";
var person = {
name: "inner name",
say: function(sth) {
console.log(this.name + " says "+sth); //指向person对象
}
}

person.say("hello");

输出foocoder says hello world。this 指向person 对象,即当前对象。

作为构造函数

1
2
3
4
5
function person(name) {
this.name = name; //this指向构造函数的新创建对象
}
var kiro =new person('kiro');
console.log(kiro.name);

函数内部的this 指向新创建的对象。

内部函数

1
2
3
4
5
6
7
8
9
10
11
12
var name = "out name";
var person = {
name: "inner name",
say: function(sth) {
var sayHello = function(sth) {
console.log(this.name + " says "+sth);
}
sayHello(sth);
}
}

person.say("hello");

在内部函数中,this没有按预想的绑定到外层函数对象上,而是绑定到了全局对象。这里普遍被认为是JavaScript语言的设计错误,因为没有人想让内部函数中的this 指向全局对象。一般的处理方式是将this作为变量保存下来,一般约定为that 或者self:

1
2
3
4
5
6
7
8
9
10
11
12
13
var name = "out name";
var person = {
name: "inner name",
say: function(sth) {
var that = this;
var sayHello = function(sth) {
console.log(that.name + " says "+sth);
}
sayHello(sth);
}
}

person.say("hello");

简单地总结

简单地总结以上几点,可以发现,其实只有第六点是让人疑惑的。
其实就可以总结为以下几点:

  • 当函数作为对象的方法调用时,this 指向该对象。
  • 当函数作为淡出函数调用时,this 指向全局对象(严格模式时,为undefined)
  • 构造函数中的this 指向新创建的对象
  • 嵌套函数中的this 不会继承上层函数的this,如果需要,可以用一个变量保存上层函数的this。再总结的简单点,如果在函数中使用了this,只有在该函数直接被某对象调用时,该this才指向该对象。
文章目录
  1. 1. 全局中的this
  2. 2. 函数调用
  3. 3. 作为对象调用
  4. 4. 作为构造函数
  5. 5. 内部函数
  6. 6. 简单地总结