想要知道关于this的指向问题,首先要了解this的绑定规则。那么this到底是什么样的绑定规则呢?一起来研究一下吧!
绑定一:默认绑定
绑定二:饮食绑定
绑定三:显示绑定
绑定四:隐式绑定
1. 默认绑定
什么情况下使用默认绑定呢?独立函数调用。独立的函数调用我们可以理解成函数没有绑定到某个对象上调用:
首先在非严格模式下,this指向全局对象。在严格模式下,函数内的this指向undefined,全局中的this指向不会改变。
1.1 严格模式下的默认绑定
举个栗子:
"use strict";// var 定义的变量 a 挂载到 window 对象上
var a = 10;function foo () {// 严格模式下,函数内 this 指向 undefindconsole.log('this1 --- ', this) // undefined// 报错,Uncaught TypeError: Cannot read properties of undefined (reading 'a')console.log(this.a) console.log(window.a) // 10
}// 严格模式 不会改变全局中 this 的指向
console.log('this2', this) // windowfoo();
1.2 let、const、var 变量的默认绑定
let、const声明的全局变量,不会绑定到window上
var声明的全局变量,会被绑定到window上
let a = 10
const b = 20function foo () {console.log(this.a) // undefinedconsole.log(this.b) // undefined
}foo();console.log(window.a) // undefined
1.3 函数作用域中的this指向
关键点:
- 要判断函数是谁调用的,进而确定this绑定的作用域是哪儿个
- 要确定好打印的函数内部的变量。还是this上的变量(打印a、打印this.a不一样)
// window 中的 a
var a = 1;function foo () {// 函数中的 avar a = 2console.log(this) // Window{...}// 打印的是 this.a,不是 a,因此是 window 下的 a(是 window 调用的 foo 函数)console.log(this.a) // 1
}foo()
再举个例子:
var a = 1function foo () {var a = 2function inner () {// inner 内没有 a,因此往上面的 foo 的函数作用域找// foo 内有 a,但是 foo 是 window 调用的,foo 内的 this 就是 window// 打印的是 this a,不是 a,因此要判断正确的 this,也就是 window// 最终输出 1console.log(this.a)}inner()
}foo()
2. 隐式绑定
当函数引用有上下文对象时,如obj.foo()的调用方式,foo()
。。。。。还没写完