JS 中改变函数的this指向，call，apply，bind方法的使用和区别

最新推荐文章于 2023-10-07 18:01:09 发布

小火车况且况且

最新推荐文章于 2023-10-07 18:01:09 发布

阅读量558

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43972992/article/details/105243205

版权

JavaScript 专栏收录该内容

51 篇文章 2 订阅

订阅专栏

                    
                        
                    
                    JS 中改变函数的this指向，call，apply，bind方法的使用和区别 
1. call()方法 文档说明 
语法 
function.call(thisArg, arg1, arg2, ...)
thisArg 是想要将this指向的那个对象或者方法
arg1,arg2...传递的参数
 
使用，使用call之后函数会立即调用 
在没有使用call的时候fn函数中的this指向的是windowfunction fn(a , b) {
    console.log(this) // window
    console.log(a + b) // 4
}
fn(2,2)
 
使用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)
 
常用在组合继承中改变this指向function Father(name,age) {
    this.name = name,
    this.age = age
}
Father.prototype.sing =function(){
    console.log("我会唱歌")
}
function Son(name,age) {
    Father.call(this,name,age)
}
const user = new Son("小火车",24)
console.log(user.name) // 小火车
 
 
2.apply()方法 文档说明 
语法 
func.apply(thisArg, [argsArray])
thisArg 是想要将this指向的那个对象或者方法
argsArray 一个数组或者类数组对象
 
使用，使用apply之后函数也会立即调用 
在没有使用apply的时候fn函数中的this指向的是windowfunction fn(a , b) {
    console.log(this) // window
    console.log(a + b) // 4
}
fn(2,2)
 
使用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])
 
常结合数组一起使用，可以直接使用一些方法寻找数组的最大值最小值等等const array = [1,88,51,2]
let max = Math.max.apply(Math,array)
console.log(max) // 88
 
 
3. bind()方法 文档说明 
语法 
function.bind(thisArg[, arg1[, arg2[, ...]]])
thisArg 是想要将this指向的那个对象或者方法
arg1,arg2...传递的参数
 
使用，使用bind()方法之后函数不会立即执行，但是bind()方法是使用最多的改变this指向 
在没有使用bind的时候fn函数中的this指向的是windowfunction fn(a , b) {
    console.log(this) // window
    console.log(a + b) // 4
}
fn(2,2)
 
使用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()
 
使用，结合setTimeout，比如按钮点击之后变成不可点击，三秒之后还原const btn = document.querySelector("button")
btn.onclick = function() {
    this.disabled = true
    setTimeout(function(){
        this.disabled = false
    }.bind(this), 3000);
}
 
因为bind()方法返回的就是一个函数，并且也不会立即执行，因此可以在计时器时间到之后再执行
 
三者之间的关系 
共同点 
都可以改变this的指向
 
区别 
call和apply会立即调用函数，并且改变函数内部的this指向
call和apply传递的参数不同，call参数的形式是arg1, arg2, ...，apply参数的形式必须是[arg1,arg2,...]
bind不会立即调用函数，可以改变函数内部的this指向
 
使用场景 
call常用于组合继承
apply经常和数组关联，借助一些函数得到数组的最大值最小值
bind一般改变定时器内部的this指向

                