this指向

引言

要理解this的设计，我们需要先了解Javascript中内存的数据结构；

Javascript内置七种数据类型，可以分为基本数据类型和对象数据类型，在这里我们主要讲解一下对象数据类型在内存中的存储方式；

1	var obj = { name: 'Heternally'};

Javascript引擎在处理上面代码时，会在堆内存中，生成一个对象{ name: 'Heternally'}，然后把这个对象在内存中的地址赋值给变量obj。所以在读取obj.name时，需要先从变量obj拿到地址，然后再从对应地址中拿到对象，再返回它的name属性。

对象的属性可能是一个函数，当引擎遇到对象属性是函数的情况，会将函数单独保存在堆中，然后再将函数的地址赋值给对象属性；而Javascript是允许在函数体内引用当前环境的其他变量，那么问题来了，函数可以在不同的运行环境执行，所以我们就需要一种机制，能够在函数内获得当前运行环境，由此诞生了this，它的设计目的就是指向函数运行时所在的环境。

如何正确判定this指向

总结了this的绑定规则总共是有下面5种：请记住一点：==谁调用这个函数或方法,this关键字就指向谁。==

1、默认绑定（严格/非严格模式）
2、隐式绑定
3、显式绑定
4、new绑定
5、ES6箭头函数绑定

默认绑定

全局上下文

无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指向全局对象。

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

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

this.b = "MDN";
console.log(window.b)  // "MDN"
console.log(b)         // "MDN"

备注：你可以使用 globalThis获取全局对象，无论你的代码是否在当前上下文运行。

函数上下文

函数内部，this的值取决于函数被调用的方式。

因为下面的代码不在严格模式下，且 this 的值不是由该调用设置的，所以 this 的值默认指向全局对象，浏览器中就是 window。

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

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

然而，在严格模式下，如果进入执行环境时没有设置 this 的值，this 会保持为 undefined，如下：

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

f2() === undefined; // true

类上下文

this 在类中的表现与在函数中类似，因为类本质上也是函数，但也有一些区别和注意事项。

在类的构造函数中，this 是一个常规对象。类中所有非静态的方法都会被添加到 this 的原型中：

class Example {
  constructor() {
    const proto = Object.getPrototypeOf(this);
    console.log(Object.getOwnPropertyNames(proto));
  }
  first(){}
  second(){}
  static third(){}
}

new Example(); // ['constructor', 'first', 'second']

备注：静态方法不是 this 的属性，它们只是类自身的属性。

派生类

不像基类的构造函数，派生类的构造函数没有初始的 this 绑定。在构造函数中调用 super()会生成一个 this 绑定，并相当于执行如下代码，Base为基类：

1	this = new Base();

警告：在调用 super() 之前引用 this 会抛出错误。

派生类不能在调用 super() 之前返回，除非其构造函数返回的是一个对象，或者根本没有构造函数。

class Base {}
class Good extends Base {}
class AlsoGood extends Base {
  constructor() {
    return {a: 5};
  }
}
class Bad extends Base {
  constructor() {}
}

new Good();
new AlsoGood();
new Bad(); // ReferenceError

隐式绑定

当函数作为对象的属性存在，通过对象属性执行函数时，此时隐式绑定规则会将this绑定到对象上；

var name = 'Heternally';
function foo() {
  console.log(this.name);
}

var obj = {
  name: 'zl',
  foo,
}

obj.foo(); // zl

注意上面代码中函数执行方式是通过对象属性执行

var name = 'Heternally';
function foo() {
  console.log(this.name);
}

var obj = {
  name: 'zl',
  foo,
}

foo(); // Heternally

var foo1 = obj.foo; 

foo1(); // Heternally

obj.foo(); // zl

由上面代码可以发现，通过赋值操作后执行函数，会应用默认绑定，此时在非严格模式下this会指向全局对象。

同样的，函数传参也是一种隐式赋值，此时在回调函数中会丢失this绑定。

function foo() {
  console.log(this.name);
}

function Foo(fn) {
  fn();
}

var obj = {
  name: 'zl',
  foo,
}

var name = 'Heternally';

Foo(obj.foo); // Heternally
// 在Foo中相当于先执行了 var fn = obj.foo;

显式绑定

通过 call apply bind绑定

function add(c, d) {
  return this.a + this.b + c + d;
}

var o = {a: 1, b: 3};

// 第一个参数是用作“this”的对象
// 其余参数用作函数的参数
add.call(o, 5, 7); // 16

// 第一个参数是用作“this”的对象
// 第二个参数是一个数组，数组中的两个成员用作函数参数
add.apply(o, [10, 20]); // 34

在非严格模式下使用 call 和 apply 时，如果用作 this 的值不是对象，则会被尝试转换为对象。null 和 undefined 被转换为全局对象。原始值如 7 或 'foo' 会使用相应构造函数转换为对象。因此 7 会被转换为 new Number(7) 生成的对象，字符串 'foo' 会转换为 new String('foo') 生成的对象。严格模式下不会进行转换。

function bar() {
  console.log(Object.prototype.toString.call(this));
}

bar.call(7);     // [object Number]
bar.call('foo'); // [object String]
bar.call(undefined); // [object global]

ECMAScript 5 引入了 Function.prototype.bind()。调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数，但是在这个新函数中，this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。

function f(){
  return this.a;
}

var g = f.bind({a:"azerty"});
console.log(g()); // azerty

var h = g.bind({a:'yoo'}); // bind只生效一次！
console.log(h()); // azerty

var o = {a:37, f:f, g:g, h:h};
console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty

通过new绑定

我们先看看构造函数在使用new后，执行了什么操作：

它创建（构造）了一个全新的对象
它会被执行[[Prototype]]（也就是__proto__）链接
它使this指向新创建的对象
通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上
如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error)，那么new表达式中的函数调用将返回该对象引用

当一个函数用作构造函数时（使用new关键字），它的this被绑定到正在构造的新对象。

var name = 'zl';

function foo(name) {
  this.name = name;
}

var bar = {
  name: 'object',
  foo1: new foo('Heternally'),
}

console.log(bar.foo1.name); // Heternally

当构造函数返回值为对象时，直接返回这个对象；否则返回new创建的对象

所以使用new绑定时，需要判断函数返回的值是否为一个对象，如果是对象，那么this会绑定到返回的对象上。

ES6箭头函数绑定

它的 this 是通过作用域链查到外层作用域的 this ，且指向函数定义时的 this 而非执行时。

function foo() {
  return (name) => {
    console.log(this.name);
  }
}

var obj = {
  name: 'Heternally'
}

var obj1 = {
  name: 'text'
}

var name = 'zl';

var foo1 = foo();
foo1(); // zl

var foo2 = foo.call(obj);
foo2(); // Heternally

foo2.call(obj1); // Heternally 可以看到，箭头函数的`this`绑定后无法被修改

规则优先级

1、new绑定
var obj = new Foo();
this绑定新的对象上

2、显示绑定 call/apply/bind
var obj = foo.call(bar);
this绑定到指定对象上

3、隐式绑定
var obj = bar.foo();
this绑定到调用方法的对象上
如果存在链式调用， this 永远指向最后调用它的那个对象 
隐式绑定丢失：起函数别名，通过别名运行；函数作为参数会造成隐式绑定丢失。

4、默认绑定
foo();
this在严格模式下绑定到undefined
在非严格模式下绑定到全局对象

箭头函数

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。

箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

(param1, param2, …, paramN) => { statements }

(param1, param2, …, paramN) => expression //相当于：(param1, param2, …, paramN) =>{ return expression; }

// 当只有一个参数时，圆括号是可选的：
(singleParam) => { statements }
singleParam => { statements }

// 没有参数的函数应该写成一对圆括号。
() => { statements }

//加括号的函数体返回对象字面量表达式：
params => ({foo: bar})

//支持剩余参数和默认参数
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => {
    statements }

//同样支持参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

引入箭头函数有两个方面的作用：更简短的函数并且不绑定this。

没有单独的`this`

在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值：

如果该函数是一个构造函数，this指针指向一个新的对象
在严格模式下的函数调用下，this指向undefined
如果该函数是一个对象的方法，则它的this指针指向这个对象
等等

This被证明是令人厌烦的面向对象风格的编程。

function Person() {
  // Person() 构造函数定义 `this`作为它自己的实例.
  this.age = 0;

  setInterval(function growUp() {
    // 在非严格模式, growUp()函数定义 `this`作为全局对象,
    // 与在 Person()构造函数中定义的 `this`并不相同.
    this.age++;
  }, 1000);
}

var p = new Person();

在ECMAScript 3/5中，通过将this值分配给封闭的变量，可以解决this问题。

function Person() {
  var that = this;
  that.age = 0;

  setInterval(function growUp() {
    // 回调引用的是`that`变量, 其值是预期的对象.
    that.age++;
  }, 1000);
}

或者，可以创建绑定函数，以便将预先分配的this值传递到绑定的目标函数（上述示例中的growUp()函数）。

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。因此，在下面的代码中，传递给setInterval的函数内的this与封闭函数中的this值相同：

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| 正确地指向 p 实例
  }, 1000);
}

var p = new Person();

与严格模式的关系

鉴于 this 是词法层面上的，严格模式中与 this 相关的规则都将被忽略。

普通函数严格模式下this指向undefined。

1 2	var f = () => { 'use strict'; return this; }; f() === window; // 或者 global

严格模式的其他规则依然不变。

通过call、apply或bind调用不能绑定this

由于箭头函数没有自己的this指针，通过 call() 、 apply() 或bind()方法调用一个函数时，只能传递参数（不能绑定this），他们的第一个参数会被忽略。

var adder = {
  base : 1,

  add : function(a) {
    var f = v => v + this.base;
    return f(a);
  },

  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base : 2
    };

    return f.call(b, a);
  }
};

console.log(adder.add(1));         // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2

不绑定`arguments`

箭头函数不绑定Arguments 对象。因此，在本示例中，arguments只是引用了封闭作用域内的arguments：

var arguments = [1, 2, 3];
var arr = () => arguments[0];

arr(); // 1

function foo(n) {
  var f = () => arguments[0] + n; // 隐式绑定 foo 函数的 arguments 对象. arguments[0] 是 n,即传给foo函数的第一个参数
  return f();
}

foo(1); // 2
foo(2); // 4
foo(3); // 6
foo(3,2);//6

在大多数情况下，使用剩余参数是相较使用arguments对象的更好选择。

function foo(arg) {
  var f = (...args) => args[0];
  return f(arg);
}
foo(1); // 1

function foo(arg1,arg2) {
    var f = (...args) => args[1];
    return f(arg1,arg2);
}
foo(1,2);  //2

使用箭头函数作为方法

如上所述，箭头函数表达式对非方法函数是最合适的。让我们看看当我们试着把它们作为方法时发生了什么。

'use strict';
var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}
obj.b();
// undefined, Window{...}
obj.c();
// 10, Object {...}

箭头函数没有定义this绑定。

不能使用 `new` 操作符

箭头函数不能用作构造器，和 new一起用会抛出错误。

1 2	var Foo = () => {}; var foo = new Foo(); // TypeError: Foo is not a constructor

没有`prototype`属性

箭头函数没有prototype属性。

1 2	var Foo = () => {}; console.log(Foo.prototype); // undefined

不能使用 `yield` 关键字

yield 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作函数生成器。

函数体

箭头函数可以有一个“简写体”或常见的“块体”。

在一个简写体中，只需要一个表达式，并附加一个隐式的返回值。在块体中，必须使用明确的return语句。

var func = x => x * x;
// 简写函数 省略return

var func = (x, y) => { return x + y; };
//常规编写 明确的返回值

返回对象字面量

记住用params => {object:literal}这种简单的语法返回对象字面量是行不通的。

var func = () => { foo: 1 };
// Calling func() returns undefined!

var func = () => { foo: function() {} };
// SyntaxError: function statement requires a name

这是因为花括号（{} ）里面的代码被解析为一系列语句（即 foo 被认为是一个标签，而非对象字面量的组成部分）。

所以，记得用圆括号把对象字面量包起来：

1	var func = () => ({foo: 1});

换行

箭头函数在参数和箭头之间不能换行。

1
2
3

var func = ()
           => 1;
// SyntaxError: expected expression, got '=>'

但是，可以通过在 ‘=>’ 之后换行，或者用 ‘( )’、’{ }’来实现换行，如下：

var func = (a, b, c) =>
  1;

var func = (a, b, c) => (
  1
);

var func = (a, b, c) => {
  return 1
};

var func = (
  a,
  b,
  c
) => 1;

// 不会有语法错误

解析顺序

虽然箭头函数中的箭头不是运算符，但箭头函数具有与常规函数不同的特殊运算符优先级解析规则。

let callback;

callback = callback || function() {}; // ok

callback = callback || () => {};
// SyntaxError: invalid arrow-function arguments

callback = callback || (() => {});    // ok