标签： this指向

call()、apply()、bind()

显式绑定：使用call()、apply()、bind()方法将this进行强制绑定（硬绑定）。

call()的语法和作用与 apply()方法只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。

call()

使用call()方法会直接调用函数

function.call(this指向, 参数1, 参数2, ...)

this指向：可选，用于修改函数this指向，非严格模式下，指定null、undefined会自动指向全局window

参数1, 参数2, ...

传递给函数的实参

apply()

使用apply()方法会直接调用函数

function.apply(this指向, [参数1, 参数2, ...])

this指向：第一个参数用于修改函数this指向

[参数1, 参数2, ...]：一个数组或者类数组对象，其中的数组元素将作为单独的参数传给function函数。

Function.prototype.call() – JavaScript | MDN

Function.prototype.apply() – JavaScript | MDN

bind()

使用bind()方法不会不会不会直接调用函数

返回值

一个新函数

bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

function.bind(this指向, 参数1, 参数2, ...)

例：

bf是bind创建出来的函数，bf函数内的this指向己经被强硬指向了bind的参数obj（即对象{name:'liao'}）

function fn() {
    console.log(this)
}

let obj = {    name:'liao'}

let bf = fn.bind(obj) 

bf() 

//{name: 'liao'}

一个小坑

bind方法返回的新函数和原函数长得一样，但是内存地址不一样

function fn(){}

let fn2 = fn.bind({}) //fn2是新函数，和fn内存地址不一样

console.log(fn == fn2) //false

总结

1. call() apply() bind() 都可以替换修改函数this的指向
2. call() 和 apply() 会立马调用函数, call()参数需要一个个的传, apply()传参必须是数组形式
3. bind() 会得到一个新函数, 这个函数绑定死了 this 指向

Function.prototype.bind() – JavaScript | MDN

什么是this？

环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境

this的指向

全局环境

在一个js文件或<script>标签内，this始终指向window对象

console.log(this) // 全局环境，即window对象下，this -> window 

局部环境

严格模式下，函数中的this为undefined

1.在全局作用域下直接调用函数，this指向window

function fun() {
 console.log(this)
}
fun() // fun() 实际上是window.fun(), 所以this -> window

2.对象函数调用，哪个对象调用就指向哪个对象

let obj = {
	name: 'liao',
	sayHi: function () {
		console.log('hi~', this.name)
	},
}
let name = 'Li'
obj.sayHi() //hi~ liao this ---> obj

3.new实例对象，构造函数中的this指向实例对象

function Person(){
	this.name = "liao" // 这里的this -> obj对象
}
let obj = new Person()

4.事件中的this

在HTML事件句柄中，this指向了接收事件的HTML元素

<button onclick="console.log(this)">点我</button>
this --> button

改变this指向

call / apply / bind

总结

1.在函数调用中，this指向调用它的对象。

2.在构造函数中，this指向实例化对象。

3.在事件体中，this指向事件源。

4.箭头函数中，没有this

5.其他情况中，this指向window

JavaScript 的 this 原理 – 阮一峰的网络日志

JS中的this详解_世平那个张的博客-CSDN博客