乐趣区

关于javascript:JavaScript-笔记-最全的-this-判断方法

jiezi

JavaScript 中 this 的指向必定是大多数前端开发者最头疼的问题之一，就算是经验丰富的新手都可能被绕到迷失方向。本文想做的就是去追寻 this 的迷踪。

this 是什么

this 是 JavaScript 中的一个关键字，它是由运行环境内置的一个变量，且运行期不能从新赋值，那 this 到底是什么？

JavaScript 是基于原型的脚本语言，最后的设计是为了给 web 页面增加一些辅助解决逻辑，比方表单校验、动画成果、时钟等等。而且，晚期 JavaScript 逻辑非常简单，根本都是脚本片段，写起来也是 c 语言 面向过程的滋味，基本没有当初的代码分层、模块加载、打包公布等等高级性能。

再说说配角 this，它还有段陈年往事：作者 Brendan Eich 自己的想法是设计一门相似 Schema 的函数式的脚本语言，然而过后的网景公司决定要蹭风行语言 Java 的热度，所以取名 JavaScript。基于这些思考，作者借鉴了 c 语言 的根本语法和 self 语言 原型式面向对象机制，塑造了 JavaScript 简略轻量又灵便的特点，然而为了更像 Java 一点，最初硬生生退出了 this, new 的个性。

this 指向的各种场景

因为上述历史起因，导致 JavaScript 的 this 没有前后对立的设计，很难了解就有余奇怪了。 它不是 Java 那样指向对象实例，也不是执行上下文，它在不同的代码场景，判断规定不一样。 这就是它的复杂性所在。

不过，也不是齐全没有规定可循，总结下来，场景也就那么几种，你把握了判断技巧，就能精确判断 this。

1. 全局

全局就是不在任何函数外面，这种状况不论是否严格模式，this 都是指向全局对象，浏览器外面就是 window (前面的示例代码没有特地注明的都浏览器环境)。

console.log(this); // window

2. 一般函数

一般函数的间接调用，函数内 this 非严格模式指向全局对象，严格模式下指向 undefined。

function foo() {console.log(this); // window
}

foo();

function bar() {
    'use strict';
    console.log(this); // undefined
}

bar();

另外，函数表达式和立刻执行函数也是这个规定。

const foo = function () {console.log(this); // window
};

foo();

(function bar() {console.log(this); // window
})();

3. 属性办法

属性办法也是一个函数，不过它是一个对象的属性，调用时通过 . 操作符拜访和调用，办法内 this 指向办法所属对象。留神：类和原型的办法也是属性办法。

const foo = {bar: function () {console.log(this); // {bar}
    },
};

foo.bar();

另外，通过原型和 class 定义方法也是指向实例对象。

function Foo() {console.log(this); // Foo{}}

Foo.prototype.bar = function () {console.log(this); // Foo{}}

const f1 = new Foo();
f1.bar();

class Foobar() {function bar () {console.log(this); // Foobar{}}
}

const f2 = new Foobar();
f2.bar();

留神，上面场景 baz 属于一般函数调用，因为它不是通过对象属性来拜访的。

const foo = {bar: function () {console.log(this); // {bar}
        
        function baz() {console.log(this); // window
        }
        baz();},
};

foo.bar();

还有这种状况，对象属性弹出后也是一般函数调用，它也不是通过对象属性来拜访的。

const foo = {bar: function () {console.log(this); // window
    },
};

const baz = foo.bar;
baz();

4. new 构造函数

JavaScript 外面，一般函数都能够作为构造函数，而后应用 new 关键字结构出对象，构造函数内 this 指向新构建的对象。

function Foo() {console.log(this); // Foo{}}

const f1 = new Foo();

5. call, apply

通过 call, apply 间接调用函数（call, apply 性能统一，只是传参格局不一样），this 指向是通过第一个参数指定，须要留神的是：非严格模式下，非对象会尝试转成对象，null 和 undefined 会转为全局对象；严格模式下，则传的是什么就是什么。

function foo() {console.log(this); // window
}

foo.call(null);

function bar() {
    'use strict';
    console.log(this); // null
}

bar.call(null);

另外留神，对属性办法 call，this 也和一般函数的 call 一样，指向指定参数。

const foo = {bar: function () {console.log(this); // {value: 'baz'}
    }
};

foo.bar.call({value: 'baz'});

6. bind

bind 会创立一个绑定了指定 this 的新函数， 留神：只会失效一次。

function foo() {console.log(this); // {value: 'bar'}
}

const bar = foo.bind({value: 'bar'});

bar();

另外留神，对属性办法 bind，this 也和一般函数的 bind 一样，指向指定参数。而且，bind 之后再 call，不能批改 this 指向。

const foo = {bar: function () {console.log(this); // {value: 'baz'}
    }
};

const baz = foo.baz.bind({value: 'baz'});
baz.call({value: 'bazzz'});

💡 bind 生成的新函数，尽量不要用作构造函数，个别也只有面试题会这么干，这样做的确不会报错，this 会指向新结构的对象。

7. 箭头函数

箭头函数是 ES6 新增的一种函数，不论是独自调用，还是作为成员办法调用，this 都是指向定义时所在一般函数的 this，全局定义时指向全局对象。 留神：call, apply, bind 对它有效，它也不能用作构造函数。

function foo() {console.log(this); // {value: 'bar'}
    
    setTimeout(() => {console.log(this); // {value: 'bar'}
    });
}

foo.call({value: 'bar'});

留神，有几种特地的状况：

  • 箭头函数作为属性办法，这种状况还是属于全局定义，this 指向全局对象。
const foo = {bar: () => {console.log(this); // window
    },
};

foo.bar();
  • 箭头函数作为原型办法，这种状况还是属于全局定义，this 指向全局对象。
function Foo() {console.log(this); // Foo{}}

Foo.prototype.bar = () => {console.log(this); // window
}

const f1 = new Foo();
f1.bar();
  • 箭头函数作为类属性，这种状况 this 指向对象实例，和下面的原型式定义相比时，可能会让人蛊惑。其实这种状况相当于在构造函数内的定义：this.bar = ...。
class Foo {bar = () => {console.log(this); // Foo{}}
}

const f1 = new Foo();
f1.bar();

💡 特地补充一下， 场景 3 有个示例是在 class 中定义方法，应用的一般函数，这两种申明形式其实有着本质区别，一般函数申明是定义在原型中的，而箭头函数申明是定义在示例对象中的。

8. 其余补充

除此之外，还有一些非凡场景，this 指向全局对象， 冴羽 大佬是依据 ECMAScript 标准去解读的（见参考文章），我本人总结一下：进行了求值计算的就和属性弹出一样，属于一般函数调用，其实还是判断是否是函数调用还是办法调用。

const foo = {bar: function () {console.log(this); // window
    }
};

(foo.bar = foo.bar)();
(false || foo.bar)();
(foo.bar, foo.bar)();

总结

总结几个要点：

  • 判断是一般函数还是属性办法调用；
  • 箭头函数只看定义所在函数；
  • 构造函数指向结构对象；
  • call, apply, bind 看指定参数；
  • 优先级，bind 之后 new，new 优先，bind 之后 call，bind 优先。

参考文章

this – JavaScript | MDN

Gentle Explanation of “this” in JavaScript

JavaScript 深刻之从 ECMAScript 标准解读 this · Issue #7 · mqyqingfeng/Blog

退出移动版