前言
javaScript中的 this
,因其灵活的指向、复杂的使用场景一直都是面试中的热点。这个概念虽然基础,但是非常重要,也是开发者在进阶的过程中比较头疼的一个知识点。this
指向多变,很多隐藏的 bug 都源于它。同时 this
强大灵活,如果能熟练掌握,会让我们写出的代码有质的飞跃
this 的指向
我们先看看 MDN 对于 this
的介绍:
与其他语言相比,函数的 this
关键字在 JavaScript 中的表现略有不同,此外,在严格模式和非严格模式之间也会有一些差别。
在绝大多数情况下,函数的调用方式决定了 this
的值(运行时绑定)。this
不能在执行期间被赋值,并且在每次函数被调用时 this
的值也可能会不同。ES5 引入了 bind 方法来设置函数的 this
值,而不用考虑函数如何被调用的。ES2015 引入了箭头函数,箭头函数不提供自身的 this 绑定(this
的值将保持为闭合词法上下文的值)。
之前看过一篇文章里面有关于this指向的问题:请用一句话总结 this
的指向,注意只用一句话。
之前有一种广泛流传的说法是:谁调用它,this
就指向谁。
当我看完这篇文章作者对于 this
的总结,让我学习到了关于 this
的一个更好的结论,接下来我分享给大家:
事实上,调用函数会创建新的属于函数自身的执行上下文,执行上下文的调用创建阶段会决定 this
的指向。
我们可以得到一个新的结论:
this
的指向,是在调用函数时根据执行上下文所动态确定的。
具体环节和规则,可以先“死记硬背”以下几条规律,后面再慢慢一一分析:
1.在函数体内。简单调用该函数时(非显示/隐式绑定下),严格模式下 this
绑定到undefined
,否则绑定到全局对象 window
/global
;
2.一般构造函数 new 调用,绑定到新创建的对象上;
3.一般有 call/apply/bind 方法显式调用,绑定到指定参数的对象上;
4.一般有上下文调用,绑定在该对象上;
5.箭头函数,根据外层上下文绑定的this
决定this
的指向
实战例题分析
例题1:全局环境下的 this
函数在浏览器全局环境中被简单调用,非严格模式下 this
指向 window
;在 use strict
指明严格模式的 情况下就是 undefined
function f1 () {
console.log(this)
}
function f2 () {
'use strict'
console.log(this)
}
f1() // window
f2() // undefined
例题2:上下文对象调用中的 this
this
指向最后调用它的对象
const student = {
name: 'Lucas',
fn: function() {
return this
}
}
console.log(student.fn() === student) // true
例题3:bind/call/apply 改变 this
指向
bind/call/apply
都是用来改变相关函数 this
指向的,但是 call/apply
是直接进行相关函数调用;bind
不会执行相关函数,而是返回一个新的函数,这个新的函数已经自动绑定了新的 this
指向,开发者需要手动调用即可。
const target = {}
fn.call(target, 'arg1', 'arg2')
相当于
const target = {}
fn.apply(target, ['arg1', 'arg2'])
相当于
const target = {}
fn.bind(target, 'arg1', 'arg2')()
例题4:构造函数和 this
一般构造函数 new 调用,绑定到新创建的对象上
function Foo() {
this.bar = "Lucas"
}
const instance = new Foo()
console.log(instance.bar) // Lucas
例题5:箭头函数中的this
指向
箭头函数的 this
,根据外层(函数或者全局)上下文绑定的this
决定this
的指向
var globalObject = this;
var foo = () => this;
console.log(foo() === globalObject); //true
总结
javaScript
中的 this
纷繁多象,不容易彻底掌握。只有“记死”,才能“活用”。阅读本文,如有解释不当之处,请大家给予纠正。让我们一起进步。