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

相关文章
|
2月前
call()与apply()的作用与区别?
call()与apply()的作用与区别?
|
3月前
|
C++
C++高级开发之可调用对象、function、bind(2)
std::bind 绑定器   要使用这个函数模板,在 cpp文件前面要包含如下头文件#include<funcitonal>   std::bind能够将对象以及相关的参数绑定到一起,绑定完成后可以直接调用,也可以用
47 0
|
3月前
call()与apply()的作用与区别
call()与apply()的作用与区别
20 1
|
3月前
|
JavaScript
call、apply、bind的使用场景区分(js的问题)
call、apply、bind的使用场景区分(js的问题)
16 0
|
12月前
|
JavaScript 前端开发
面试官: call、apply和 bind有什么区别?
面试官: call、apply和 bind有什么区别?
|
3月前
|
C++
C++高级开发之可调用对象、function、bind(1)
可调用对象   以前函数调用总是离不开一堆圆括号,没错“()”就是函数调用的一个明显标记,这个 “()”有一个称呼叫函数调用运算符。
61 0
|
3月前
|
存储 C++
【C++11特性篇】玩转C++11中的包装器(function&bind)
【C++11特性篇】玩转C++11中的包装器(function&bind)
|
9月前
|
JavaScript 前端开发
javascript函数的call、apply和bind的原理及作用详解
javascript函数的 call、apply和bind 本质是用来实现继承的,专业点说法就是改变函数体内部 this 的指向,当一个对象没有某个功能时,就可以用这3个来从有相关功能的对象里借用过来
45 0
|
12月前
|
JavaScript
热点面试题:JS 中 call, apply, bind 概念、用法、区别及实现?
热点面试题:JS 中 call, apply, bind 概念、用法、区别及实现?
bind、call、apply 区别
bind、call、apply 区别
66 0