bind,call,apply在实际项目中什么地方会用到 ?

讨论 已结
10 197
洪点
洪点 2018-7-6
悬赏:20飞吻
经常看到介绍call或者apply的文章,然后会以下面这种代码来举例说明
function identify() {
console.log("Hello,I'm " + this.name);
}
let me = {
name: "Kyle"
};
let you = {
name: "Reader"
};
identify.call(me); // Hello,I'm Kyle
identify.call(you); // Hello,I'm Reader
我有点不理解的是,实际开发的时候以参数的形式传给 indentify(obj) 方法不是更好吗,
// 传参形式
function identify(obj) {
console.log("Hello,I'm " + obj.name);
}
let me = {
name: "Kyle"
};
let you = {
name: "Reader"
};
identify(me); // Hello,I'm Kyle
identify(you); // Hello,I'm Reader
那么bind,call,apply一般在实际项目中什么地方会用到 ?
回帖
  • @洪点 如果你很清楚他们的用途,为啥一定要回避this这个参数呢?他们最主要的作用就是this,如果实现中压根都不需要用到这个this,那这两个的方法是没有什么用的。这个只能慢慢使用中去体会了,要现在找个人说服你的想法是很难的我觉得。只有实际遇到问题了才能体会。关键是this!举个例子吧。

    官网的这个tabDelete的监听,说明中说了,执行这个监听的时候this指向的是当前li的dom。这个时候的实现要怎么做才能做到,非call或者apply这两个莫属。如果非要来讨论说为啥要这样设置this是指定li而不是把li的dom当成个参数传过来这个问题就说的不是一个没有任何可比性的问题了。回到这个this要让他指向li这个问题,其实源码里面关于这个事件this指向的写法是错的。

    被注释掉的就是原来代码写的,这样的写法写了跟没写差不多,根本无法像文档中说明的那样this就是li的dom,点击X按钮关闭的时候this是按钮,用element.tabDelete()去关闭的话this就是element之类的,如果真要像文档所说的this就是li本身,那么就应该想下面注释下面那样子写。如果一开始文档没有这个限定说this就是这个li的dom我写着监听的时候如果需要用到这个don自己回去通过一些方法去找,但是既然有一个很明确的this就是我要的了,那么就直接用就可以了。
    所以关键还是看是不是需要这个this。如果你设定的函数中没有需要规定this指向一个明确的东西。那么直接调用就好了,如果有规定this是一个明确的东西,那么就得确保执行的时候this就是你限定的东西。就像你写的fn(elem)里面压根就没有使用这个this,后面爱怎么调用怎么调用,但是如果用到这个this而且明确它是某个东西,那么就不是随便想怎么调用就怎么调用了,某些时候就得写成fn.call(that, elem)这种形式了。
    0 回复
  • 随海逸
    2018-7-6
    这几个函数最重要的作用就是改变this指向,如果你的函数里面有this,在不同环境下就可能代表不同东西,但是在任何时候你都想让this代表一个东西,这时候你就要改变this指向,就会用上了
    1 回复
  • 楼上正解,要理解call和apply的作用得对this有一定的认识。他们最大的作用就是可以指定函数方法在执行的时候this的指向问题。你上面的例子其实写的不好,所以没有突出this的问题,call和apply中的第一个参数就是你要指定的this。实际上你换成下面的写法也许就更加能有体会了。
    //html
    <button onclick="fn()" id="sayHello" data-text="hello"></button>
    // js
    function fn(){
    alert($(this).data('text'));
    }

    // js 直接调用fn预期要达到跟点击按钮出来的效果一致
    fn(); // 结果跟预期是有差别的。原因是this指向的是window
    // 这个才是跟点击按钮一样的出来的效果。
    fn.call(documnet.getElementById('sayHello'));
    我的理解大概是这样子不知道对不对。
    0 回复
  • 洪点
    2018-7-6
    @岁月小偷 call apply的用途我都清楚 , 比如你的代码示例 ,我在写业务代码的时候可能还是会这么写
    <button onclick="fn(this)" id="sayHello" data-text="hello"></button>

    function fn(ele){
    alert($(ele).data('text'));
    }

    fn(document.getElementById('sayHello'));
    我觉得这样写会不会更简单...
    那么在实际业务中 , 在哪些地方用call apply传递参数比用形参实参来传递参数要更好呢...
    0 回复
  • 洪点
    2018-7-6
    @岁月小偷 懂了懂了, 自己总结一下还是代码写少了, 平时要多写多思考.. 工作中使用layui的很多问题都是从你的回答中找到方法 , 真心感谢~
    0 回复
  • @洪点 不客气[微笑] ,其实这个是个过程,只有接触多了使用多了有一些观念才会被理解和接受,俺也是自己因为公司需要自己转的web,完全没人带的情况下自己吭哧吭哧的搞,很长一段时间对于this之类的都是很没有概念的,更不用说call和apply这些了,直到利用一个假期看了一本书才搞明白一些以前一直糊里糊涂的概念[偷笑] ,哎呀真心有人带一带多好哈,没有的话就只能自己多看看书看看别人总结的东西,然后自己多实践实践理解理解了。手动表情[奋斗]face [嘻嘻]
    0 回复
  • 洪点
    2018-7-6
    @岁月小偷 什么书? [挤眼] 我也去买一本.. 现在确实需要提升一下了..
    0 回复
  • @洪点 《JavaScript语言精粹》很薄的一本书不知道看过没。
    0 回复
  • 洪点
    2018-7-6
    @岁月小偷 OKOK [ok] 谢谢
    0 回复
  • @洪点 不客气[微笑]
    0 回复