code2021-l
Version:
前端自定义工具
49 lines (41 loc) • 1.72 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>函数的call/apply/bind()</title>
</head>
<body>
<!--
1. 区别call()/apply()/bind()
call(obj)/apply(obj): 调用函数, 指定函数中的this为第一个参数的值
bind(obj): 返回一个新的函数, 新函数内部会调用原来的函数, 且this为bind()指定的第一参数的值
一旦调用新函数，原函数就会调用，且 this 是bind 指定的第一个参数
如果直接调用原函数，this不是bind指定的第一个参数
注意: 如果obj是null/undefined, this为window
2. 应用
call()/bind()应用: 根据伪数组生成真数组
bind(): react中组件的自定义方法 / vue中的事件回调函数内部
3. 自定义call()/apply()
1). 给obj添加一个临时方法, 方法名任意, 值为当前函数
2). 通过obj调用这个临时方法, 并将接收的参数传入
3). 删除obj上的这个临时方法属性
4. 自定义实现bind()
1). 返回一个新函数
2). 在新函数内部通过原函数对象的call方法来执行原函数
指定this为obj
指定参数为bind调用的参数和后面新函数调用的参数
-->
<script src="../dist/2021-utils-1.js"></script>
<script>
function fn(a,b) {
console.log(a,b,this)
}
fn(1,2)
const obj = {m:0}
aUtils.call(fn,obj,1,2)
aUtils.apply(fn,obj,[2,3])
aUtils.bind(fn,obj,1,2)
</script>
</html>