1、 全局上下文
在全局执行环境中(在任何函数体外部),this 引用全局对象。在浏览器中,全局对象是 window。
console.log(this === window); // 在浏览器中,这将输出 true this.a = 37; console.log(window.a); // 输出 37
2、函数上下文
1)普通函数调用
在非严格模式下,非方法的函数调用中,this 通常指向全局对象。在严格模式下 ("use strict"),this 将是 undefined。
function f1() { return this; } console.log(f1() === window); // 在非严格模式下为 true
2)方法调用
当函数作为对象的方法被调用时,this 指向该对象。
const obj = { method: function() { return this; } }; console.log(obj.method() === obj); // true
3)构造函数
在构造函数中,this 指向一个新创建的对象。
function MyConstructor() { this.a = 11; } let obj = new MyConstructor(); console.log(obj.a); // 输出 11
3、显式设置上下文
使用 call、apply 或 bind 方法可以显式地设置 this 的值。
参考文档:Js(Javascript)中的apply方法的使用
1)call 和 apply
这两个方法在调用函数的同时允许你绑定 this 的值。call 接受一个参数列表,而 apply 接受一个参数数组。
function sayHello() { return "Hello, " + this.name; } const user = { name: 'CJavaPY' }; console.log(sayHello.call(user)); // 使用 call 设置 this console.log(sayHello.apply(user)); // 使用 apply 设置 this
2)bind
bind 方法创建一个新函数,this 被绑定到指定的对象。
const greet = function(greeting) { return greeting + ', ' + this.name; }; const user = { name: 'CJavaPY' };
const greetEmily = greet.bind(user); console.log(greetEmily('Hello')); // 输出: "Hello, CJavaPY"