this
的指向,是在调用函数时根据执行上下文所动态确定的。
- 在函数体中,简单调用该函数时(非显式/隐式绑定下),严格模式下
this
绑定到undefined
,否则绑定到全局对象window
/global
; - 一般构造函数
new
调用,绑定到新创建的对象上; - 一般由
call
/apply
/bind
方法显式调用,绑定到指定参数的对象上; - 一般由上下文对象调用,绑定在该对象上;
- 箭头函数中,根据外层上下文绑定的
this
决定this
指向。
例题组合 1:全局环境下的 this
函数在浏览器全局环境中被简单调用,非严格模式下指向 window
,严格模式下指向 undefined
。
function fn1() {
console.log(this)
}
function fn2() {
'use strict'
console.log(this)
}
fn1() // window
fn2() // undefined
在执行函数时,如果函数中的 this
是被上一级的对象所调用,那么 this
指向的就是上一级的对象; 否则指向全局环境。
const foo = {
bar: 10,
fn: function() {
console.log(this)
console.log(this.bar)
}
}
var fn1 = foo.fn
fn1() // 直接调用,this 指向 window,window.bar => undefined
foo.fn() // 通过 foo 调用,this 指向 foo,foo.bar => 10
const student = {
name: 'Lucas',
fn: function() {
return this
}
}
console.log(student.fn() === student) // true
var fn1 = student.fn;
console.log(fn1() === student) // false
例题组合 2:上下文对象调用中的 this
const person = {
name: 'Lucas',
brother: {
name: 'Mike',
fn: function() {
return this.name
}
}
}
console.log(person.brother.fn()) // this 指向最后调用它的对象,输出 => Mike
const o1 = {
text: 'o1',
fn: function() {
return this.text
}
}
const o2 = {
text: 'o2',
fn: function() {
return o1.fn()
}
}
const o3 = {
text: 'o3',
fn: function() {
var fn = o1.fn
return fn()
}
}
console.log(o1.fn()) // this 指向 o1,输出 o1
console.log(o2.fn()) // 最终调用 fn 的是 o1,所以 this 指向 o1,输出 o1
console.log(o3.fn()) // fn() 是被直接调用的,所以 this 指向 window,window.text => undefind
如果想让
console.log(o2.fn())
输出 o2
,除了使用 bind
/call
/apply
以外
console.log(o1.fn.call(o2))
console.log(o1.fn.apply(o2))
console.log(o1.fn.bind(o2)())
还可以用这种方式
const o1 = {
text: 'o1',
fn: function() {
return this.text
}
}
const o2 = {
text: 'o2',
fn: o1.fn
}
console.log(o2.fn()) // o1.fn 挂到了 o2 对象上,所以 this 指向 o2,输出 o2
this
指向最后调用它的对象,在 fn
执行时,挂到 o2
对象上即可,提前进行了赋值操作
例题组合 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')()
const foo = {
name: 'lucas',
logName: function () {
console.log(this.name)
}
}
const bar = {
name: 'mike'
}
foo.logName() // lucas; logName 由 foo 调用,this 指向 foo
foo.logName.call(bar) // mike; logName 被 call() 改变 this 的指向为 bar
例题组合 4:构造函数和 this
function Foo() {
this.bar = 'Lucas'
}
const instance = new Foo()
console.log(instance.bar) // Lucas
new 操作符调用构造函数具体做了什么?
如下:
- 创建一个新的对象
- 将构造函数的 this 指向这个新对象
- 为这个对象添加属性、方法等
- 最终返回新对象
以上过程,也可以用代码表述:
var obj = {}
obj.__proto__ = Foo.prototype
Foo.call(obj)
如果在构造函数中出现了显式 return 的情况,那么需要注意分为两种场景:
function Foo() {
this.user = 'Lucas'
const o = {}
return o
}
const instance = new Foo()
console.log(instance.user) // undefined,此时 instance 返回的是空对象 o
function Foo() {
this.user = 'Lucas'
return 1
}
const instance = new Foo()
console.log(instance.user) // Lucas,此时 instance 返回的是目标对象实例 this
结论:如果构造函数中显式返回一个值,且返回的是一个对象,那么
this
就指向这个返回的对象; 如果返回的不是一个对象,那么this
仍然指向实例。
例题组合 5:箭头函数中的 this 指向
结论:箭头函数使用
this
不适用以上标准规则,而是根据外层(函数或者全局)上下文决定。
this
出现在 setTimeout()
中的匿名函数,因此 this
指向 window
对象。
const foo = {
fn: function () {
setTimeout(function () {
console.log(this === window) // true
console.log(this === foo) // false
});
}
}
foo.fn()
如果需要 this
指向 foo
这个 object 对象,可以使用箭头函数解决。
const foo = {
fn: function () {
setTimeout(() => {
console.log(this === window) // false
console.log(this === foo) // true
});
}
}
foo.fn()
例题组合 6:this 优先级相关
我们常常把通过 call
、apply
、bind
、new
对 this
绑定的情况称为显式绑定; 根据调用关系确定的 this
指向称为隐式绑定。
function foo(a) {
console.log(this.a)
}
const obj1 = {
a: 1,
foo: foo
}
const obj2 = {
a: 2,
foo: foo
}
obj1.foo.call(obj2) // 2
obj2.foo.call(obj1) // 1
输出分别为 2、1,也就是说 call
、apply
的显式绑定一般来说优先级更高
function foo(a) {
this.a = a
}
const obj1 = {}
var bar = foo.bind(obj1)
bar(2)
console.log(obj1.a) // 2
上面代码将 bar
函数中的 this
指向为 obj1
对象。执行 bar(2)
后,obj1.a
的值为 2。即经过 bar(2)
执行后,obj1
对象为:{a: 2}
。
当再使用 bar 作为构造函数时:
var baz = new bar(3)
console.log(baz.a) // 3
console.log(obj1.a) // 2
bar
函数本身是通过 bind
方法构造的函数,其内部已经将 this
绑定为 obj1
,它再作为构造函数通过 new
调用时,返回的实例就会与 obj1
解绑,也就是说:
new 绑定修改了 bind
绑定中的 this
,因此 new
绑定的优先级比 bind
绑定更高。
function foo() {
return () => {
console.log(this.a)
}
}
const obj1 = {
a: 2
}
const obj2 = {
a: 3
}
const bar = foo.call(obj1) // 将 foo() 的 this 绑定为 obj1
bar() // 2; 此时 bar 为 foo() 中返回的箭头函数,箭头函数的 this 指向上层的 this,所以 bar 的 this 也会绑定到 obj1
bar.call(obj2) // 2; 箭头函数的绑定无法被修改,也就是说如果 bar 为普通函数,this 就可以被修改绑定
var a = 123
const foo = () => () => {
console.log(this.a)
}
const obj1 = {
a: 2
}
const obj2 = {
a: 3
}
const bar = foo.call(obj1) // 此时 foo() 为箭头函数,所以 this 指向 window
bar.call(obj2) // 123; bar 作为箭头函数指向上层,所以 this 也指向 window
如果将 var a = 123
改为 const a = 123
,将会输出 undefined
。因为使用 const
声明的变量不会挂载到 window
全局对象当中。因此 this
指向 window
时,自然也找不到 a
变量了。