JavaScript中this的指向规则与箭头函数特性详解

JavaScript中this的基本概念

许多开发者常对this的本质感到困惑，疑惑其值为何频繁变动。

此处对this进行初步概括。

this是一个对象，通常存在于函数内部，代表当前函数的执行上下文。

值得注意的是，只有当函数执行后，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会指向undefined或window（通常指向window），仅在严格模式下指向undefined。上述例子中，没有明确的调用对象，且普通函数中的this不会向上继续查找对象，因此直接返回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。

this指向规则总结

总结

1、箭头函数中的this是在声明时就定义好的，而普通函数中的this则是在调用时定义好的。

2、箭头函数不绑定this，它会捕获其所在（即定义的位置）上下文的this值，作为自己的this值。正是因为它没有this，所以也就不能用作构造函数。

3、若想改变this指向，可以使用bind方法。bind方法在ES5中引入，位于Function的原型链上，即Function.prototype.bind。通过bind方法绑定后，函数将被永远绑定在其第一个参数对象上，无论其在什么情况下被调用。

以上就是本站小编整理的全部相关知识点，希望能够帮助到大家。