2018-04-24发表2020-04-19更新JavaScript8 分钟读完 (大约1246个字)

《你不知道的JavaScript》笔记-this用法

this 绑定规则

this 是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调用时的各种条件。this 的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。

当一个函数被调用时，会创建一个活动记录（有时候也称为执行上下文）。这个记录会包含函数在哪里被调用（调用栈）、函数的调用方式、传入的参数等信息。this 就是这个记录的一个属性，会在函数执行的过程中用到。

优先级：显式绑定>隐式绑定

默认绑定

函数独立调用时，非严格模式时函数调用时应用了 this 的默认绑定，this 指向全局对象

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

var a = 2;

foo(); // 2

如果使用严格模式（strict mode），则不能将全局对象用于默认绑定，因此 this 会绑定到 undefined：

function foo() {
  'use strict';

  console.log(this.a);
}

var a = 2;

foo(); // TypeError: this is undefined

隐式绑定

当函数引用有上下文对象时，隐式绑定规则会把函数调用中的 this 绑定到这个上下文对象。对象属性引用链中只有上一层或者说最后一层在调用位置中起作用。

function foo() {
  console.log(this.a);
}
var obj2 = {
  a: 42,
  foo: foo,
};
var obj1 = {
  a: 2,
  obj2: obj2,
};
obj1.obj2.foo(); // 42

隐式丢失：

被隐式绑定的函数会丢失绑定对象,它会应用默认绑定
调用回调函数的函数可能会修改 this。

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

var obj = {
    a: 2,
    foo: foo
};

var bar = obj.foo; // 函数别名！

var a = "oops, global"; // a是全局对象的属性

// 应用默认绑定，把this绑定到全局对象或者undefined上，取决于是否严格模式。
bar(); // "oops, global"

setTimeout( obj.foo, 100 ); // "oops, global"

More info: Server

显式绑定

可以使用函数的 call(..)和 apply(..)方法，直接指定 this 的绑定对象,
如果你把 null 或者 undefined 作为 this 的绑定对象传入 call、apply 或者 bind，这些值在调用时会被忽略，实际应用的是默认绑无论之后如何调用函数 bar，它总会手动在 obj 上调用 foo。这种绑定是一种显式的强制绑定，因此我们称之为硬绑定。

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

var obj = {
  a: 2,
};

foo.call(obj); // 2

// 硬绑定的bar不可能再修改它的this
bar.call(window); // 2

More info: Generating

new 绑定

使用 new 来调用函数，或者说发生构造函数调用时，会自动执行下面的操作。

创建（或者说构造）一个全新的对象。
这个新对象会被执行[[Prototype]]连接。
这个新对象会绑定到函数调用的 this。
如果函数没有返回其他对象，那么 new 表达式中的函数调用会自动返回这个新对象

使用 new 来调用 foo(..)时，我们会构造一个新对象并把它绑定到 foo(..)调用中的 this 上。new 是最后一种可以影响函数调用时 this 绑定行为的方法，我们称之为 new 绑定。

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

var bar = new foo(2);

console.log(bar.a); // 2

function foo(p1, p2) {
  this.val = p1 + p2;
}

// 之所以使用null是因为在本例中我们并不关心硬绑定的this是什么
// 反正使用new时this会被修改
var bar = foo.bind(null, 'p1');

var baz = new bar('p2');

baz.val; // p1p2

判断 this

函数是否在 new 中调用（new 绑定）？如果是的话 this 绑定的是新创建的对象。

1	var bar = new foo();

函数是否通过 call、apply（显式绑定）或者硬绑定调用？如果是的话，this 绑定的是指定的对象。
1
var bar = foo.call(obj2);
如果你把 null 或者 undefined 作为 this 的绑定对象传入 call、apply 或者 bind，这些值在调用时会被忽略，实际应用的是默认绑定规则：
1
2
3
4
5
6
7
function foo() {
console.log(this.a);
}

var a = 2;

foo.call(null); // 2
函数是否在某个上下文对象中调用（隐式绑定）？如果是的话，this 绑定的是那个上下文对象。

1	var bar = obj1.foo();

如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到 undefined，否则绑定到全局对象。

1	var bar = foo();

箭头函数不使用 this 的四种标准规则，而是根据外层（函数或者全局）作用域来决定 this

function foo() {
  // 返回一个箭头函数
  return a => {
    //this继承自foo()
    console.log(this.a);
  };
}

var obj1 = {
  a: 2,
};

var obj2 = {
  a: 3,
};

var bar = foo.call(obj1);
bar.call(obj2); // 2, 不是3！

#前端