JavaScript的bind，call，apply区别

最新推荐文章于 2024-10-06 13:20:09 发布

刚刚觉醒的小菜鸡

最新推荐文章于 2024-10-06 13:20:09 发布

阅读量337

点赞数 6

分类专栏： JavaScript 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/wang1664178416/article/details/136488354

版权

JavaScript 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

本文详细解释了JavaScript中的call、apply和bind方法，它们如何改变函数执行时的this指向，以及各自接收的参数类型和行为差异。call和apply通过传递this和参数数组临时改变this指向，而bind创建一个长期绑定到特定对象的新函数。

摘要由CSDN通过智能技术生成

call、apply、bind作用是改变函数执行时的上下文，简而言之就是改变函数运行时的this指向

apply接受两个参数，第一个是this的指向，第二个是函数接受的参数，以数组的形式传入，这种方法只是临时改变this指向一次

apply

function fn(...args){
    console.log(this,args);
}
let obj = {
    myname:"张三"
}

fn.apply(obj,[1,2]); // this会变成传入的obj，传入的参数必须是一个数组；
fn(1,2) // this指向window

当第一个参数为null或者undefined时，默认指向window

call

call方法的第一个参数也是this的指向，后面传入的是一个参数列表

跟apply一样，改变this指向后原函数会立即执行，且此方法只是临时改变this指向一次

function greet(greeting) {
  console.log(greeting + ', ' + this.name);
}

var person = {
  name: 'Alice'
};

greet.call(person, 'Hello'); // 输出: Hello, Alice

bind

bind方法和call很相似，第一参数也是this的指向，后面传入的也是一个参数列表(但是这个参数列表可以分多次传入)

改变this指向后不会立即执行，而是返回一个永久改变this指向的函数

function fn(...args){
    console.log(this,args);
}
let obj = {
    myname:"张三"
}

const bindFn = fn.bind(obj); // this 也会变成传入的obj ，bind不是立即执行需要执行一次
bindFn(1,2) // this指向obj
fn(1,2) // this指向window