JS 中改变函数的this指向,call,apply,bind方法的使用和区别
1. 普通函数调用,此时 this 指向 window
function a() {
console.log(this); // window
}
a();
2.构造函数调用, 此时 this 指向 实例对象
function Person(age, name) {
this.age = age;
this.name = name
console.log(this) // 此处 this 分别指向 Person 的实例对象 p1 p2
}
var p1 = new Person(18, 'zs')
var p2 = new Person(18, 'ww')
3.对象方法调用, 此时 this 指向 该方法所属的对象
var obj = {
fn: function () {
console.log(this); // obj
}
}
obj.fn();
4. call()方法 文档说明
- function.call(thisArg, arg1, arg2, …)
- thisArg 是想要将this指向的那个对象或者方法
- arg1,arg2…传递的参数
使用call之后,函数会立即执行,fn函数中的this指向被改变,指向了obj对象
const obj = {
name: "小火车"
}
function fn(a , b) {
console.log(this) // obj
console.log(a + b) // 4
}
fn.call(obj,2,2)
5.apply()方法 文档说明
- func.apply(thisArg, [argsArray])
- thisArg 是想要将this指向的那个对象或者方法
- argsArray 一个数组或者类数组对象
使用apply之后,函数会立即执行,fn函数中的this指向被改变,指向了obj对象
const obj = {
name: "小火车"
}
function fn(a,b) {
console.log(this) // obj
console.log(a + b) // 4
}
fn.apply(obj,[2,2])
6. bind()方法 文档说明
- function.bind(thisArg[, arg1[, arg2[, …]]])
- thisArg 是想要将this指向的那个对象或者方法
- arg1,arg2…传递的参数
使用bind之后,函数会立即执行,fn函数中的this指向被改变,指向了obj对象
const obj = {
name: "小火车"
}
function fn(a,b) {
console.log(this) // obj
console.log(a + b) // 4
}
const getFn = fn.bind(obj,2,2)
getFn()
共同点
都可以改变this的指向
区别
-
call和apply会立即调用函数,并且改变函数内部的this指向
-
call和apply传递的参数不同,call参数的形式是arg1, arg2,
…,apply参数的形式必须是[arg1,arg2,…] -
bind不会立即调用函数,可以改变函数内部的this指向