前端this指向大揭秘

前言

this是指当前执行代码的环境对象。在绝大多数情况下，函数的调用方式决定了this的值。this不能在执行期间被赋值，并且在每次函数被调用时this的值也可能会不同。apply和call方法可以把 this 的值从一个环境传到另一个；ES5引入了bind方法来永久地设置函数的this值，而不用考虑函数如何被调用的；ES2015 引入了支持this词法解析的箭头函数。

目录

1、整体概览

1、全局环境

全局环境下，this始终指向全局对象（window），无论是否严格模式；

// 在浏览器中，全局对象为 window 对象：
console.log(this === window); // true

this.a = 37;
console.log(window.a); // 37

2、函数上下文调用

2.1普通函数

普通函数内部的this分两种情况，严格模式和非严格模式。
（1）非严格模式下，this 默认指向全局对象window。

function f1(){
   
  return this;
}
f1() === window; // true

（2）严格模式下，this指向undefined。

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

2.2 函数作为对象的方法

（1）当函数作为对象里的方法被调用时，它们的 this 是调用该函数的对象。
（2）多层嵌套的对象，内部方法的this指向离被调用函数最近的对象（window也是对象，其内部对象调用方法的this指向内部对象， 而非window）。

//方式1
var o = {
   
  prop: 37,
  f: function() {
   
    return this.prop;
  }
};
//当 o.f()被调用时，函数内的this将绑定到o对象。
console.log(o.f()); // logs 37

//方式2
var o = {
   prop: 37};
function independent() {
   
  return this.prop;
}
//函数f作为o的成员方法调用
o.f = independent; 
console.log(o.f()); // logs 37

//方式3
//this 的绑定只受最靠近的成员引用的影响
o.b = {
   g: independent, prop: 42};
console.log(o.b.g()); // 42

2.3 原型链中的this

（1）如果该方法存在于一个对象的原型链上，那么this指向的是调用这个方法的对象，就像该方法在对象上一样。

var o = {
   
  f: function() {
    
    return this.a + this.b; 
  }
};
var p = Object.create(o);
p.a = 1;
p.b = 4;

console.log(p.f())