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

相关文章
|
运维 监控 Devops
|
JavaScript vr&ar
vue3通过ref获取dom元素并修改样式
vue3通过ref获取dom元素并修改样式
1191 0
|
存储 Linux 虚拟化
开源虚拟化平台oVirt4.3简单搭建实践(下)
开源虚拟化平台oVirt4.3简单搭建实践(下)
1605 0
开源虚拟化平台oVirt4.3简单搭建实践(下)
|
8月前
|
移动开发 JavaScript 前端开发
精通服务器推送事件(SSE)与 Python 和 Go 实现实时数据流 🚀
服务器推送事件(SSE)是HTML5规范的一部分,允许服务器通过HTTP向客户端实时推送更新。相比WebSocket,SSE更轻量、简单,适合单向通信场景,如实时股票更新或聊天消息。它基于HTTP协议,使用`EventSource` API实现客户端监听,支持自动重连和事件追踪。虽然存在单向通信与连接数限制,但其高效性使其成为许多轻量级实时应用的理想选择。文中提供了Python和Go语言的服务器实现示例,以及HTML/JavaScript的客户端代码,帮助开发者快速集成SSE功能,提升用户体验。
|
开发工具 数据安全/隐私保护 git
gitee 创建代码仓库,并提交本地代码
gitee 创建代码仓库,并提交本地代码
514 6
|
安全 前端开发 JavaScript
跨域iframe通信
跨域iframe通信
377 2
|
虚拟化 数据中心 Docker
深入探讨Docker Machine
【8月更文挑战第25天】
186 0
|
缓存 JavaScript 前端开发
js/javascript获取时间戳的5种方法
js/javascript获取时间戳的5种方法