JavaScript中this关键字的指向规则与apply/call用法详解

JavaScript this关键字基础与指向规则

this关键字用于表示当前运行时的对象上下文。当在全局作用域中使用this时，它指向当前的页面窗口对象window；而在函数内部使用时，this的具体指向取决于函数被调用时的上下文对象。此外，可以通过使用apply和call这两个全局方法来动态修改函数内部this的指向目标。

首先展示在全局作用域中使用this的情况：

 
<script type="text/javascript">
console.log(this === window); // true
console.log(window.alert === this.alert); // true
console.log(this.parseInt("021", 10)); // 10
</script>

函数内部的this是在函数执行时确定的，而非定义时确定。具体指向如下例所示：

 
// 定义一个全局函数
function foo() {
console.log(this.fruit);
} 
// 定义一个全局变量，等价于window.fruit = "apple";
var fruit = "apple";
// 此时函数foo中this指向window对象
// 这种调用方式和window.foo();是完全等价的
foo(); // "apple"
// 自定义一个对象，并将此对象的属性foo指向全局函数foo
var pack = {
fruit: "orange",
foo: foo
}; 
// 此时函数foo中this指向window.pack对象
pack.foo(); // "orange"

使用apply和call改变函数上下文

全局函数apply和call可用于改变函数内部this的指向，示例如下：

 
// 定义一个全局函数
function foo() {
console.log(this.fruit);
} 
// 定义一个全局变量
var fruit = "apple";
// 自定义一个对象
var pack = {
fruit: "orange"
}; 
// 等价于window.foo();
foo.apply(window); // "apple"
// 此时foo中的this === pack
foo.apply(pack); // "orange"

注意：apply和call的功能相同，主要区别在于参数传递方式的定义不同。

函数作为对象的this指向示例

由于在JavaScript中函数本身也是对象，因此可以观察到以下示例：

 
// 定义一个全局函数
function foo() {
if (this === window) {
console.log("this is window.");
} 
} 
// 函数foo也是对象，所以可以定义foo的属性boo为一个函数
foo.boo = function() {
if (this === foo) {
console.log("this is foo.");
} else if (this === window) {
console.log("this is window.");
} 
}; 
// 等价于window.foo();
foo(); // this is window.
// 可以看到函数中this的指向调用函数的对象
foo.boo(); // this is foo.
// 使用apply改变函数中this的指向
foo.boo.apply(window); // this is window.