JavaScript 中 this 的用法

Posted ilinux_one

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 中 this 的用法相关的知识,希望对你有一定的参考价值。

javascript 中,this 是动态绑定,或称为运行期绑定的。一般而言,在Javascript中,this 指向函数执行时的当前对象。

由于其运行期绑定的特性,JavaScript 中的 this 可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下几种方式:没有明确的调用对象,作为对象方法调用,使用 new 关键字作为构造函数调用,和使用 apply、 call 和 eval 调用。

没有明确的当前对象时

当没有明确的执行时的当前对象时,this 指向全局对象 window

纯粹的函数调用

举个栗子

1
2
3
4
5
6
var x = 1;
function test(){
var x = 2;
alert(this.x);
}
test(); // 1

再看个复杂的栗子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var name = "window";

var Bob = {
name: "Bob",
showName: function(){
alert(this.name);
}
};

var Tom = {
name: "Tom",
showName: function(){
var fun = Bob.showName;
fun();
}
};

Tom.showName();  //window

其实也不复杂,只要按照上面那句话来判断就行。

setTimeout、setInterval和匿名函数

在浏览器中 setTimeoutsetInterval 和匿名函数执行时的当前对象是全局对象 window,这条可以看成是上一条的一个特殊情况。

1
2
3
4
5
6
7
8
9
10
11
12
var name = "Bob";  
var nameObj = {
name : "Tom",
showName : function(){
alert(this.name);
},
waitShowName : function(){
setTimeout(this.showName, 1000);
}
};

nameObj.waitShowName(); // Bob

setTimeout 可以看做是一个延迟执行的匿名函数。

1
2
3
4
5
waitShowName : function(){  
function(__callback){
__callback();
}(this.showName);
}

由于匿名函数的当前对象是 window,所以当在该匿名函数中运行回调函数时,回调函数的 this指向了 window,所以 alert 出来 window.name 。

作为对象方法调用时

使用这种调用方式时,this 被自然绑定到该对象。

通常情况

1
2
3
4
5
6
7
8
var text = \'window\'
var obj = {
text: \'obj\',
foo: function(){
console.log(this.text);
}
}
obj.foo(); // obj

内部函数调用

但是,如果在 obj 的 foo() 内部再声明一个函数,在内部函数中调用 this,像下面这样:

1
2
3
4
5
6
7
8
9
10
11
12
\'use strict\';
var obj = {
text: \'hello world\',
foo: function(){
return function(){
console.log(this.text);
}()
}
}

obj.foo();
// Uncaught TypeError: Cannot read property \'text\' of undefined

这是因为 this 指针只在 foo 方法的函数内指向 obj ,在函数内部定义的函数, this 又指向undefined 了!(在非 strict 模式下,它重新指向全局对象 window !)

修复的办法是用一个 that 变量首先捕获 this :

1
2
3
4
5
6
7
8
9
10
11
\'use strict\';
var obj = {
text: \'obj\',
foo: function(){
var that = this;
return function(){
console.log(that.text);
}()
}
}
obj.foo(); // obj

三种特殊情况

new关键字 - 作为构造函数调用时

所谓构造函数,就是通过这个函数生成一个新对象。这时,this 就指这个新对象。

1
2
3
4
5
6
7
8
9
10
function Person(__name){
this.name = __name;
// this 指向使用该构造函数构造的新对象
}
Person.prototype.show = function(){
alert(this.name);
}

var Bob = new Person("Bob");
Bob.show(); //Bob

apply 和 call

在 JavaScript 中函数也是对象,对象则有方法,apply() 和 call() 就是函数对象的方法。它们能够强制改变函数执行时的当前对象,让 this 指向其他对象。

apply() 接收两个参数,第一个参数就是需要绑定的this变量,第二个参数是 Array,表示函数本身的参数。call() 与 apply() 的唯一区别就是把函数本身的参数一个个传入。

1
2
3
// 对普通函数调用,通常把 this 绑定为 null
Math.max.apply(null, [3, 5, 4]); // 5
Math.max.call(null, 3, 5, 4); // 5

举个使用 apply() 改变当前对象的栗子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var name = "window";

var someone = {
name: "Bob",
showName: function(){
alert(this.name);
}
};

var other = {
name: "Tom"
};

someone.showName.apply(); // window
someone.showName.apply(other); // Tom

apply() 的参数为空时,默认调用全局对象。

eval

对于 eval 函数,其执行时候似乎没有指定当前对象,但实际上其 this 并非指向 window,因为该函数执行时的作用域是当前作用域,即等同于在该行将里面的代码填进去。

1
2
3
4
5
6
7
8
9
10
var name = "window";

var Bob = {
name: "Bob",
showName: function(){
eval("alert(this.name)");
}
};

Bob.showName(); //Bob

参考

  1. 对 js 中 this、apply、call 和闭包的理解
  2. Javascript中this关键字详解
  3. 深入浅出 JavaScript 中的 this
  4. Javascript的this用法

以上是关于JavaScript 中 this 的用法的主要内容,如果未能解决你的问题,请参考以下文章

sublime text 3 添加 javascript 代码片段 ( snippet )

Javascript的this用法

javascript中this的用法

JavaScript 中 this 的用法

JavaScript this用法总结

javascript关于this的用法