bind、call、apply 三者之间区别?如何实现一个bind?

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

一、三者的作用?

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

二、三者的用法

call

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

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

function fun(...args) {
    console.log(this, args);
}
let obj = {
    myname: "张三"
}
fun.call(obj, 1, 2); // this会变成传入的obj,传递参数没有硬性要求
fun(1, 2) // this指向window

当第一个参数为null、undefined的时候,默认指向window(在浏览器中)、


例如以下代码

fn.call(null,[1,2]); // this指向window
fn.call(undefined,[1,2]); // this指向window

apply

apply接受两个参数,第一个参数是this的指向,第二个参数是函数接受的参数,以数组的形式传入

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

function fun(...args) {
    console.log(this, args);
}
let obj = {
    myname: "张三"
}
fun.apply(obj, [1, 2]); // this会变成传入的obj,传入的参数必须是一个数组
fun(1, 2) // this指向window

当第一个参数为null、undefined的时候,默认指向window(在浏览器中)


例如以下代码

fn.apply(null,[1,2]); // this指向window
fn.apply(undefined,[1,2]); // this指向window

bind

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

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

function fun(...args) {
    console.log(this, args);
}
let obj = {
    myname: "张三"
}
const data = fun.bind(obj); // this也会变成传入的obj ,bind不是立即执行需要执行一次
data(1, 2) // this指向obj
fun(1, 2) // this指向window

三、三者的区别

apply、call、bind三者的区别在于:

1.三者都可以改变函数的this对象指向

2.三者第一个参数都是this要指向的对象,如果如果没有这个参数或参数为undefined或null,则默认指向全局window

3.三者都可以传参,但是apply是数组,而call是参数列表,且apply和call是一次性传入参数,而bind可以分为多次传入

4.bind是返回绑定this之后的函数,apply、call 则是立即执行

四、如何实现一个bind?

let obj = {
    name: "张三",
    age: 20
}
// 声明一个函数
function fn(a, b, c) {
    console.log("函数内部this指向:", this);
    console.log("参数列表:", a, b, c);
}
// 使用bind创建一个新函数
let newFn = fn.bind(obj, 10, 20, 30);
// 调用新函数
newFn();
// 调用旧函数
fn(10, 20, 30);

结果为:

8cad1c9c61064a70999f18db3db9dec9.png

相关文章
|
6月前
|
小程序
bindtap和catchtap的区别?
bindtap和catchtap的区别?
70 0
|
2月前
i++和++i的区别
i++和++i的区别
42 3
bis和bic区别与实现
bis和bic区别与实现
141 0
#{} 和 ${} 的区别是什么?
#{} 和 ${} 的区别是什么?
91 0
|
安全 前端开发 Java
WebMvcConfigurationSupport 和 WebMvcConfigurer 区别你知道吗
WebMvcConfigurationSupport 和 WebMvcConfigurer 的使用过程中你是否踩坑了它们的区别是什么快来看看吧
586 0
||、&&、!的使用与区别
||、&&、!的使用与区别
132 0
|
安全
s=s+1,s+=1,++1,1++没有区别?
s=s+1,s+=1,++1,1++没有区别?
c++ *和&的区别
c++ *和&的区别
341 0
|
JavaScript 前端开发 索引
for...in和for...of的区别
前言 在JavaScript中遍历数组通常是使用for...i循环,在ES5具有遍历数组功能的还有forEach、map、filter、some、every、reduce、reduceRight等。 for...in和for...of是两种增强型循环,for...in是ES5标准,在ES6中新增了for...of的循环方式。
115 0
for...in和for...of的区别