Open yuanyuanbyte opened 2 years ago
context = this instanceof Fn ? this : context || this
这里的Fn用self代替会不会更加的直观
else if(typeof rest === 'object')
此处如果传入一个对象就会导致报错,是否可以在里面添加逻辑:如果是可迭代对象就将它转化为数组再传给fn,如果是不可迭代对象就抛出错误
else if(typeof rest === 'object') 此处如果传入一个对象就会导致报错,是否可以在里面添加逻辑:如果是可迭代对象就将它转化为数组再传给fn,如果是不可迭代对象就抛出错误
可以呢~
context = this instanceof Fn ? this : context || this这里的Fn用self代替会不会更加的直观
会,详细的讲解:JavaScript 深入系列之 bind 方法的模拟实现
本系列的主题是 JavaScript 深入系列,每期讲解一个技术要点。如果你还不了解各系列内容,文末点击查看全部文章,点我跳转到文末。
如果觉得本系列不错,欢迎 Star,你的支持是我创作分享的最大动力。
call 和 apply 方法的模拟实现
注意两点:
第一步
我们该怎么模拟实现这两个效果呢?
试想当调用 call 的时候,把 foo 对象改造成如下:
这个时候 this 就指向了 foo,是不是很简单呢?
但是这样却给 foo 对象本身添加了一个属性,这可不行呐!
不过也不用担心,我们用 delete 再删除它不就好了~
所以我们模拟的步骤可以分为:
以上个例子为例,就是:
fn 是对象的属性名,反正最后也要删除它,所以起成什么都无所谓。
根据这个思路,我们可以尝试着去写第一版的 call2 函数:
正好可以打印 1 !接着往下走~
第二步
实现可传参
一开始也讲了,call 函数还能给定参数执行函数。举个例子:
注意:传入的参数并不确定,这可咋办?
不急,我们可以从 Arguments 对象中取值,取出第二个到最后一个参数,然后放到一个数组里。这里我们就可以把 Arguments 对象解构到数组里,再用slice方法取第二个到最后一个参数。
第二版代码如下:
第三步
模拟代码已经完成 80%,还有两个小点要注意: 1.this 传 null 或 undefined 或者不传值时,this 的值将会被绑定为全局对象。浏览器中是window,其它环境(如node)则是global。
2.函数是可以有返回值的!
实现call方法的最终版代码:
参考
查看全部文章
博文系列目录
交流
各系列文章汇总:https://github.com/yuanyuanbyte/Blog
我是圆圆,一名深耕于前端开发的攻城狮。
实现bind
❗️❗️❗️ 注意,下面的内容只贴了 bind 方法的代码,实现 bind 方法详细的讲解请查看:JavaScript 深入系列之 bind 方法的模拟实现
在实现bind之前,先介绍了解一下bind:
实现bind需要注意的两个特点:
详细步骤和解析全部放在代码里,最终实现bind方法的代码: