JavaScript中this的9种应用场景及三种复合应用场景

【场景1】全局环境中的this指向全局对象 this.a = 10; alert(a);//10 b = 20; alert(this.b);//20 var c = 30; alert(this.c);//30 【场景2】对象内部函数的this指向调用函数的当前对象 var a = 10; var bar = { a: 20, test: function(){ alert(this.a); } } bar.test();//20 【场景3】全局环境函数的this指向全局对象 var a = 10; function foo(){ alert(this.a); } foo( 在JavaScript中，`this`关键字是一个非常重要的概念，它的值取决于函数被调用的方式。以下是对9个主要应用场景以及3个复合应用场景的详细解释： **场景1：全局环境中的this** 在全局环境中，`this`指向全局对象，在浏览器中通常是`window`对象。因此，当在全局作用域中定义变量并使用`this`访问它们时，`this`将指向全局对象。 ```javascript this.a = 10; alert(a); // 10 ``` **场景2：对象内部函数的this** 当在对象的方法中使用`this`时，它会指向调用该方法的对象。例如： ```javascript var bar = { a: 20, test: function() { alert(this.a); // 20 } }; bar.test(); ``` **场景3：全局环境函数的this** 独立的函数（非对象方法）在全局环境下调用时，`this`同样指向全局对象。 ```javascript function foo() { alert(this.a); } foo(); // 10 ``` **场景4：匿名函数中的this** 匿名函数作为独立函数调用时，`this`同样指向全局对象。 ```javascript var foo = { a: 20, fn: (function() { alert(this.a); // 10 })() }; ``` **场景5：setInterval和setTimeout中的this** 定时器函数中的`this`也指向全局对象。 ```javascript var oTimer1 = setInterval(function() { var a = 20; alert(this.a); // 10 clearInterval(oTimer1); }, 100); ``` **场景6：eval中的this** `eval`函数内部的`this`取决于它被调用的上下文。 ```javascript function Foo() { this.bar = function() { eval("alert(this)"); } } var foo = new Foo(); foo.bar(); // [object Object] ``` **场景7：构造函数中的this** 在构造函数中，`this`指向新创建的对象实例。 ```javascript function Person(name, age) { this.name = name; this.age = age; this.sayName = function() { alert(this.name); } } var p1 = new Person('lily', '20'); p1.sayName(); // 'lily' ``` **场景8：new Function中的this** `new Function`创建的函数的`this`指向全局对象。 ```javascript (function() { var f = new Function("alert(this)"); f(); // [object Window] })(); ``` **场景9：apply和call中的this** `apply`和`call`方法可以显式设置`this`的值为指定的对象。 ```javascript var foo = { a: 20, fn: function() { alert(this.a); } }; var bar = { a: 30 }; foo.fn.apply(); // 10 (若参数为空，默认指向全局对象) foo.fn.apply(foo); // 20 foo.fn.apply(bar); // 30 ``` **复合场景1：原型链上的函数调用** 当一个对象的方法来自其原型链，`this`仍然指向调用该方法的对象。 ```javascript var someone = { name: "Bob", showName: function() { alert(this.name); } }; var other = { name: "Tom", showName: someone.showName }; other.showName(); // Tom ``` **复合场景2：匿名函数与对象内部函数的组合** 在对象方法内部调用匿名函数时，`this`的指向取决于它被嵌套的深度和调用方式。 ```javascript var a = { name: 3, fn: (function() { alert(this.name); // 2 })(), fn1: function() { alert(this.name); // 3 } }; a.fn; a.fn1; ``` **复合场景3：异步操作中的this** 在异步操作如`setTimeout`中，为了保持`this`的正确指向，通常需要保存引用，例如使用`that`。 ```javascript var nameObj = { name: "Tom", showName: function() { alert(this.name); }, waitShowName: function() { var that = this; setTimeout(function() { that.showName(); }, 1000); } }; nameObj.waitShowName(); // "Tom" ``` 这九个场景和三个复合场景覆盖了JavaScript中`this`关键字的常见用法。理解`this`的动态绑定和不同上下文中的行为是JavaScript编程的基础，对于编写高效、可维护的代码至关重要。