JavaScript中this关键字与普通函数、箭头函数的区别详解

本文详细解析JavaScript中this关键字的使用场景，通过具体代码示例展示其工作原理，为开发学习提供实用参考。

普通函数中的this行为

普通函数中的this行为

在普通函数中，this的值取决于函数被调用时的上下文对象。以下示例展示了这一机制：

var x=11;
var obj={
 x:22,
 say:function(){
 console.log(this.x)
 }
}
obj.say();
//console.log输出的是22
//调用say函数的是对象obj，所以this指代对象obj，输出的就是obj对象里的x值，即22。

箭头函数中的this行为

箭头函数中的this行为

关于箭头函数的this，常见观点认为其内部没有独立的this绑定，而是继承自外层作用域的this。以下示例对此进行详细说明：

var x=11;
var obj={
 x:22,
 y:this,//window
 say:()=>{
 console.log(this.x);
 }
}
obj.say();
//输出的值为11
console.log(obj.y);
//输出的值为window对象
//obj对象中的this指代的就是window，也就是全局环境，因为箭头函数中的this就会就近找到上一个对象中this所指代的对象，从以上例子可以看出来，obj内部属性y就为obj内部this指代的对象，输出是window。

由于箭头函数不绑定自身的this，它会捕获定义位置所在上下文的this值，并将其作为自己的this值。

1、因此，call()、apply()和bind()方法对于箭头函数仅起到传入参数的作用，无法改变其this指向。

2、鉴于this在词法层面确定，严格模式中与this相关的规则对箭头函数不再适用（可忽略严格模式的影响）。

由于箭头函数能够捕获其所在上下文的this值，因此：

function Person() { 
 this.age = 0; 
 setInterval(() => {
 // 回调里面的 `this` 变量就指向了期望的那个对象了
 this.age++;
 }, 3000);
}

var p = new Person();

实例对比分析

通过以下两个例子加深理解：

普通函数示例

var a=11
function test1(){
 this.a=22;
 let b=function(){
 console.log(this.a);
 };
 b();
}
var x=new test1();
//输出11

为何输出11？因为普通函数中的this指向调用它的对象。若没有明确的调用对象，this通常指向window（非严格模式）或undefined（严格模式）。上述例子中未明确指定调用对象，且普通函数不会向上查找对象，故直接返回window。

箭头函数示例

var a=11;
function test2(){
 this.a=22;
 let b=()=>{console.log(this.a)}
 b();
}
var x=new test2();
//输出22

箭头函数会向上查找this，直到找到对应的this为止。在例子中，构造函数被实例化为对象x，此时x中的this指代对象x本身。因此，箭头函数中的this代表x对象，x内部的a值为22，最终输出22。

核心总结

总结

1、箭头函数中的this在声明时即已确定，而普通函数中的this则在调用时确定。

2、箭头函数不绑定this，它捕获定义位置上下文的this值作为自己的this。正因没有独立的this，箭头函数不能用作构造函数。

3、若需改变this指向，可使用bind方法。bind方法在ES5中引入，位于Function原型链上（Function.prototype.bind）。通过bind绑定后，函数将永久绑定到其第一个参数对象上，无论后续如何调用。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。