js 中的this

Posted 2021-12-01 fineday

与其他语言相比，函数this在 javascript 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别.在绝大多数情况下，函数的调用方式决定了this的值。this不能在执行期间被赋值，并且在每次函数被调用时this的值也可能会不同。ES5引入了bind方法来设置函数的this值，而不用考虑函数如何被调用的，ES2015 引入了支持this词法解析的箭头函数（它在闭合的执行上下文内设置this的值）。

(1)无论是否在严格模式下，在全局执行上下文中（在任何函数体外部）this 都指代全局对象。

// 在浏览器中, window 对象同时也是全局对象：
console.log(this === window); // true

a = 37;
console.log(window.a); // 37
(2)在函数内部，this的值取决于函数被调用的方式

function f1(){
　　return this;
}
//在浏览器中：
f1() === window; //在浏览器中，全局对象是window

//在Node中：
f1() === global;

然而，在严格模式下，this将保持他进入执行上下文时的值，所以下面的this将会默认为undefined。

function f2(){
　　"use strict"; // 这里是严格模式
　　return this;
}

f2() === undefined; // true

如果要想把 this 的值从一个上下文传到另一个，就要用 call 或者apply 方法。

// 将一个对象作为call和apply的第一个参数，this会被绑定到这个对象。
var obj = {a: ‘Custom‘};

// 这个属性是在global对象定义的。
var a = ‘Global‘;

function whatsThis(arg) {
return this.a; // this的值取决于函数的调用方式
}

whatsThis(); // ‘Global‘
whatsThis.call(obj); // ‘Custom‘
whatsThis.apply(obj); // ‘Custom‘
当一个函数在其主体中使用 this 关键字时，可以通过使用函数继承自Function.prototype 的 call 或 apply 方法将 this 值绑定到调用中的特定对象。