JS中this的那些事儿

Posted 2021-02-01 Jingge

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS中this的那些事儿相关的知识，希望对你有一定的参考价值。

this是javascript中最复杂的机制之一。它是一个很特别的关键字，被自动定义在所有函数的作用域中。

一、this到底指向什么？

this既不指向函数自身，也不指向函数的词法作用域，具体指向什么，取决于你是怎么调用函数。

直接使用不带任何修饰的函数引用进行调用（即：方法名 + 括号）， this指向全局对象（非严格模式）或者undefined（严格模式）， 这种绑定称为默认绑定

function foo() {
    console.log(this.a);
}
var a = 2;
foo();  // 2

严格模式：

function foo() {
    "use strict"
    console.log(this.a);
}
var a = 2;
foo();  // undefiend

如果方法是某个对象的一个属性，通过该对象调用方法（即调用位置存在上下文对象），则this指向该对象， 这种绑定称为隐式绑定.

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

注意事项

如果多个对象之间形成了引用链，方法中的this指向其最顶层或者最后一层对象。

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

var obj2 = {
    a: 3,
    obj1: obj1
}
obj2.obj1.foo() // 42

隐式丢失，被隐式绑定的函数会丢失绑定对象，也即会应用默认绑定，从而把this绑定到全局对象或者undefined上。
这种情况常出现在回调函数上：

function foo() {
    console.log(this.a);
}
function doFoo(fn) {
    // fn 其实引用的是foo
    fn();
}
var obj = {
    a: 2,
    foo: foo
}
var a = "oops, global";

doFoo(obj.foo)      // 输出"oops, global"

使用call, apply方法调该函数时，this指向call,apply方法所传入的对象，这种方式成为显示绑定

js中几乎所有的函数都有call()和apply()方法，这两个方法的第一个参数是一个对象，他们会把这个对象绑定到this.

function foo() {
    console.log(this.a);
}
var obj = {
    a: 2,
}
foo.call(obj);      // 2

显示绑定仍然存在绑定丢失的问题：例如

function foo() {
    console.log(this.a);
}
function doFoo(fn) {
    fn();
}
var obj = {
    a: 2,
}
var a = "oops, global";

doFoo.call(obj, foo);   // 输出oops, global

解决办法：

++硬绑定++
在doFoo函数内，直接绑定obj对象

function doFoo(fn) {
    fn.call(obj);
}

硬绑定一种常见的应用常见是创建一个可重复使用的辅助函数

function foo(something) {
    console.log(this.a, something);
    return this.a + something;
}
// 简单的辅助绑定函数
function bind(fn, obj) {
    return function() {
        return fn.apply(obj, arguments);
    }
}
var obj = {a:2};
var bar = bind(foo, obj);
var b = bar(3); // 输出2 3
console.log(b); // 输出5

ES5中提供了内置的硬绑定的方法： Function.prototype.bind, 用法如下：

function foo(something) {
    console.log(this.a, something);
    return this.a + something;
}
var obj = {
    a:2;
}
var bar = foo.bind(obj);
var b = bar(3);  // 2 3
console.log(b);  // 5

bind(..) 会返回一个硬编码的新函数，它会把参数设置为 this的上下文并调用原始函数。

new绑定

在javascript中，所有的函数都可以用new来调用，这种函数调用被称为构造函数调用。使用new来调用函数时，会自动执行下面操作：

1. 创建一个全新的对象;
2. 这个新对象会被执行[[原型]链接;
3. 这个新对象会绑定到函数调用的this
4. 如果函数没有返回其他对象，那么new表达式中的函数调用会自动返回这个新对象

示例：

function foo(a) {
    this.a = a; // 在这里，this绑定到bar对象
}
var bar = new foo(2);
console.log(bar.a);     // 2

二、如果函数调用时，既满足隐式绑定、又满足显示绑定或new绑定，该怎么办？

new绑定优先级 > 显示绑定 > 隐式绑定 > 默认绑定

比较显示绑定和隐式绑定，new绑定和隐式绑定

function foo(something) {
    this.a = something;
}
var obj1 = {foo: foo};
var obj2 = {};

obj1.foo.call(obj2, 3);     // foo函数的调用同时出现了隐式绑定和显示绑定，则显示绑定优先，this指向 obj2
console.log(obj2.a);        // obj2.a = 3

var bar = new obj1.foo(4);  // 同时出现了隐式绑定和new绑定， this指向new绑定创建的对象bar, 而不是obj1
console.log(bar.a);         // 输出4

比较new绑定和显示绑定：

function foo(something) {
    this.a = something;
}
var obj1 = {};

var bar = foo.bind( obj1 );

bar( 2 );

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

var baz = new bar(3);

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

console.log( baz.a ); // 3

bar 被硬绑定到 obj1 上，但是 new bar(3) 并没有像我们预计的那样把 obj1.a
修改为 3。相反， new 修改了硬绑定（到 obj1 的）调用 bar(..) 中的 this

三、特殊情况

调用call或者apply时，参数传入null或者undefined，此时this会采用默认绑定

function foo() {
    console.log(this.a);
}
var a = 2;
foo.call(null); // 输出2

函数的间接引用，此时this采用默认绑定。间接引用最常在赋值时发生：

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

var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo(); // 3
(p.foo = o.foo)(); // 2

赋值表达式 p.foo = o.foo 的返回值是目标函数的引用，因此调用位置是 foo() 而不是p.foo() 或者 o.foo()

箭头函数

前面提到的四种绑定规则对箭头函数不适用，箭头函数中的this是根据外层作用域来决定的。

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

var obj1 = {a:2};
var obj2 = {a:3};

var bar = foo.call(obj1); // 箭头函数的外层作用域中的this指向 obj1, 所以箭头函数中this也指向obj1，箭头函数的绑定无法被修改
bar.call(obj2);     // 输出2，