[JavaScript 笔记] 最全的 this 判断方法
date
May 27, 2022
slug
JavaScript 笔记-最全的 this 判断方法
status
Published
tags
JavaScript
summary
type
Post
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); // window2. 普通函数
普通函数的直接调用，函数内
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 优先。
