JS基础防抖节流

本文介绍了JavaScript中的call, apply, bind三种改变this指向的方法,详细阐述了它们的区别和用法,包括传参方式、是否立即执行函数。同时,文章通过模拟实现这些方法的原理,帮助读者深入理解其工作机制。" 138011474,23013029,使用Locust进行WebSocket协议压力测试实践,"['网络协议', '网络', '压测工具', 'Websocket']

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


[](()call,apply,bind都是用于改变this指向的

区别:

传参不同

[](()call用逗号分隔的形式传参

函数名.call(目标对象,参数1,参数2,…参数n)

例如:getName.call(obj,‘王五’,25,‘北京’)

[](()apply参数用数组的形式传递

函数名.apply(目标对象,[参数1,参数2,…参数n])

例如:getName.apply(obj,[‘王五11’,25,‘上海’])

[](()bind用逗号形式传参

getName.bind 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 (obj,‘王五11’,25,‘上海’)() 或 getName.bind(obj)(‘王五11’,25,‘上海’)

函数是否被执行

[](()cal和apply是直接调用函数
[](()bind是返回函数本身,如果要执行,必须再后面再加()调用
[](()getName.bind(obj)()
[](()call,apply实现原理
[](()call的实现原理(不用call,自己手动模拟实现一个call的功能)

call是基于函数实现的

给作用的目标对象添加一个临时函数,处理赋值操作

接收参数处理

最后再删除这个临时函数

实例化对象=new 构造函数() //其中构造函数也称为类,一个类可以生成多个实例化对象

var f1=new Function() // 其中的构造函数中this===f1 永远相等

var p1=new Person() //其中的构造函数中this===p1 永远相等

//call模拟实现原理代码:

Function.prototype.call2 = function (context) {

//目标对象

context = context || window;

//this===实例化的函数,函数本质上也是对象

//给context添加一个临时函数

context.fn = this;

//接收参数处理 arguments

console.log(‘arguments:’,arguments)

var args = [];

for (var i = 1; i < arguments.length; i++) {

// [“arguments[0]”, “arguments[1]”, “arguments[2]”]

args.push(‘arguments[’+i+‘]’)

// args.push(arguments[i])

}

//传参执行context.fn()函数

eval(‘context.fn(’ + args + ‘)’)

//删除临时函数

delete context.fn

}

[](()apply实现原理

Function.prototype.apply2 = function (context,arr) {

//目标对象

context = context || window;

//this===实例化的函数,函数本质上也是对象

//给context添加一个临时函数

context.fn = this;

if (!arr) {

context.fn()

} else {

//接收参数处理 arguments

var args = [];

for (var i = 0; i < arr.length; i++) {

// [“arguments[0]”, “arguments[1]”, “arguments[2]”]

args.push(‘arr[’+i+‘]’)

// args.push(arguments[i])

}

//传参执行context.fn()函数

eval(‘context.fn(’ + args + ‘)’)

}

//删除临时函数

delete context.fn

}

[](()bind实现原理

var obj = {

init: 1,

add: function(a, b) {

return a + b + this.init;

}

}

obj.add(1, 2); // 4

var plus = obj.add;

plus(3, 4); // NaN,因为 this.init 不存在,这里的 this 指向 window/global

plus.call(obj, 3, 4) // 8

plus.apply(obj, [3, 4]); // 8, apply 和 call 的区别就是第二个参数为数组

plus.bind(obj, 3, 4); // 返回一个函数,这里就是 bind 和 call/apply 的区别之一,bind 的时候不会立即执行

[](()总结
[](()就是简单的使用 bind 来改变 this 指向,和 call/apply 的区别,有一个延迟执行的作用
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值