当前位置：首页 > article >正文

JS高级—call(),apply(),bind()

article 2025/9/7 12:38:29

文章目录

- - call()
  - - 介绍
    - 语法
    - 特点
    - 返回值
    - 使用(主要应用)
  - apply()
  - - 介绍
    - 语法
    - 特点
    - 返回值
    - 使用
  - bind()
  - - 介绍
    - 语法
    - 特点
    - 返回值
    - 使用
  - call(),apply(),bind()的区别
  - - 三者相同点
    - 不同点

call()

介绍

通过提供一个新的this值给当前调用的函数/方法，从而改变this指向。

语法

fn.call(this.Arg, arg1, arg2,...)

thisArg：当前调用函数this指向的对象
arg1, arg2：传递的其他参数（直接传给形参可不写）

特点

可以直接调用函数—fn.call()
可以改变被调用函数的this指向为指定的— fn.call(this.Arg)

返回值

使用调用者提供的值和参数调用该函数的返回值，也就是函数的返回值。若该方法没有返回值，则返回undefined。

使用(主要应用)

通过使用call()来实现继承

// 借用父构造函数继承属性
// 父构造函数
function Father(name, age) {this.uname = namethis.age = age
}
// 子构造函数
function Son(name, age) {Father.call(this, name, age)
}
var son = new Son('小明', 10)
console.log(son); // Son {uname: '小明', age: 10}

apply()

介绍

apply-应用、运用的意思。
apply()-调用一个具有给定值的函数，以及以一个数组（或一个类数组对象）的形式提供的参数this，简单理解为调用函数的，fang’shi但是它可以改变this指向。

语法

fn.apply(this.Arg, [argsArray])

thisArg：在fn函数运行时指定的this值，当不需要改变this指向时这里可以填null 。
argsArray：传递的值，必须包含在数组里面。

特点

也是调用函数—fn.apply()
可以改变函数内部的this指向—fn.apply(this)
但是它的参数必须是数组（伪数组）

返回值

apply()的返回值就是函数的返回值，因为它就是调用函数。
使用调用者提供的值和参数调用该函数的返回值。若该方法没有返回值，则返回undefined。

使用

var a = {name: '小红'
}
function fn(arr) {console.log(this); // {name: '小红'}console.log(arr); // blackpink 传字符串就输出字符串传数字就输出数字
}
fn.apply(a, ['blackpink'])
// fn.apply() // this->window arr->undefined

典型应用： 借助于数学内置对象求值。

var arr = [1, 66, 3, 99, 4]
// var max = Math.max.apply(null, arr) // 虽然这里的this指向不需要改变填null没有错
var max = Math.max.apply(Math, arr) // 但是这里最好是让this指向函数的调用者是最合适的
var min = Math.min.apply(Math, arr)
console.log(max); // 99
console.log(min); // 1

bind()

介绍

bind：绑定、捆绑
bind()：不会调用函数，但是也能改变函数内部的this指向

语法

fn.bind(thusArg, arg1, arg2, ...)

thisArg：在fn函数运行时指定的this值
arg1, arg2：传递的其他参数

特点

不会调用原来的函数，不会立即调用；
可以改变原来函数内部的this指向；
返回的是原函数改变this之后产生的新函数；

返回值

返回由指定的this值和初始化参数改造的原函数拷贝。

使用

var c = {name: '大华'
}
function fn() {console.log(this); // {name: '大华'}console.log(a + b); // 3
}
// fn.bind(c) // 这里不会有输出值
var f = fn.bind(c, 1, 2)
f() // 拷贝函数所以输出值用函数调用

典型应用：
如果有的函数我们不需要立即调用，但是又想改变这个函数内部this指向，此时用bind()，eg：点击发送验证码60秒后才能二次点击

    <button>按钮</button><button>按钮</button><button>按钮</button>

var btns = document.querySelectorAll('button')
for (var i = 0; i < btns.length; i++) {btns[i].onclick = function() {this.disabled = true // 这个this指向的是调用者btnsetTimeout(function() {// this.disabled = false; // 只用这一个不加bind的话会不管用，因为定时器里面的this指向的是windowthis.disabled = false // 此时这里的this指向的是当前点击的那个btn}.bind(this), 3000) // 这个this指向的是btn这个对象}
}