ECMAScript 5(ES5)中bind方法、自定义及小拓展

这篇文章发布于 2012年10月12日,星期五,17:27,归类于 JS API。 阅读 119920 次, 今日 12 次 40 条评论

 

ECMAScript 5.1 (或仅 ES5) 是ECMAScript(基于JavaScript的规范)标准最新修正。其中,新增了一个名叫bind函数扩展方法(),以前有提过,点击这里查看详细

不过,之前的介绍纯粹的翻译,含糊其辞,水土不服,这里,换身接地气的装束,让大家好好了解了解。

一、对函数扩展的bind方法

狄仁杰:元芳,你对bind怎么看?
狄仁杰

李元芳:大人,这一定是个很有用的方法!
李元芳

狄仁杰:我可以断定,bind是一个方法!
狄仁杰

李元芳:大人未经实践就知道bind是一个方法,真乃神人也!
李元芳

狄仁杰:而且是个扩展方法!
狄仁杰

李元芳:什么?扩展方法?大人,属下愚钝,听不明白!
李元芳

狄仁杰:元芳,你可认识jQuery?
狄仁杰

李元芳:jQuery? 大人,莫非就是最近江湖广为流传,从米国传过来的开发利器?
李元芳

狄仁杰:正是!你可知其中也有bind方法?
狄仁杰

李元芳:什么?这西洋利器也有bind方法。属下孤陋寡闻,望大人指点明津!
李元芳

狄仁杰:jQuery的包装器扩展了一个bind方法,可以用来绑定事件。
狄仁杰

李元芳:大人果然学贯中外,居然可以知道jQuery的bind是用来绑定事件的,属下实在佩服!!
李元芳

狄仁杰:元芳,你速去豆瓣弄件jQuery的浅色内衣。
狄仁杰

李元芳:大人,内衣弄来了,长这样:

$("#test").bind("click", function() { 
   console.log("内衣你妹!"); 
});

李元芳

狄仁杰:呵呵,这就证实了jQuery的bind是对包装器的扩展!
狄仁杰

李元芳:大人,果然事件结果都被你一一说中!
李元芳

狄仁杰:不过jQuery的bind并不是幕后主谋!
狄仁杰

李元芳:纳尼!发酵了这么久,原来不是茅台是酱油!大人,那幕后主谋究竟是?
李元芳

狄仁杰:元芳,你可知prototype.js以及MooTools.js中的bind方法?
狄仁杰

李元芳:大人,什么prototype.js还有MooTools.js?小的听糊涂了。
李元芳

狄仁杰:这可不怪你,你前些日子忙着和如燕造人,江湖消息没能及时获取。
狄仁杰

李元芳:大人,造人的事情你都知道啊!
李元芳

狄仁杰:大人我知道的事情可多着呢!prototype.jsMooTools.js都是米国过来的开发利器,不过江湖名声威望不及jQuery;但仍有不少帮派以及小村寨使用之。
狄仁杰

李元芳:原来是这样,怪不得大人让我去取豆瓣的内衣而不是点评的!大人果然深谋远虑,那这两个利器的bind方法是?
李元芳

狄仁杰:元芳,你这个问题问得好!你可以看这一集的标题,就会知道答案了!
狄仁杰

李元芳:大人,导演插了太多图片,距离太远看不到了!
李元芳

狄仁杰:恩?还有这种事!来人,给元芳拿个望远镜过来!
狄仁杰

路人甲递过一个御用望远镜……
望远镜

李元芳:原来如此,属下一下子明白了——MooTools.jsbind方法是对函数的扩展!大人这么远都能明察秋毫,真乃神人也!!
李元芳 标题文字

狄仁杰:元芳,你可知这里的bind如何使用?又有何作用呢?
狄仁杰

李元芳:这……恕属下再次愚钝,还请大人指明!
李元芳

狄仁杰:元芳,下面这段代码你怎么看?

var button = document.getElementById("button");
button.onclick = function() {
    alert(this.id); // 弹出button
};

狄仁杰

李元芳:大人,虽然我不懂洋文,但我可以确定这段代码一定藏有天大的玄机。
李元芳

狄仁杰:从这段代码可以推断,点击某个机关后会弹出一个暗器!
狄仁杰

李元芳:大人,暗藏机关您都可以一眼看出来啊!!属下终于明白周星驰常说的”我对你的敬仰犹如滔滔江水连绵不绝,又如黄河泛滥一发不可收拾…”的含义了……
李元芳

狄仁杰:周星驰是谁?
狄仁杰

李元芳:大人,我也不认识。剧本台词是这样,我就照念了~~
李元芳

狄仁杰:元芳,下面这段代码你又怎么看?

var button = document.getElementById("button"),
    text = document.getElementById("text");
button.onclick = function() {
    alert(this.id); // 弹出text
}.bind(text);

狄仁杰

李元芳:根据大人之前的推断,点击某个机关后会弹出一个暗器!
李元芳

狄仁杰:……
狄仁杰

李元芳:而且这个名字的暗器叫做”text”.
李元芳

狄仁杰:……
狄仁杰

李元芳:但是,奇怪啊,为什么弹出暗器是”text”呢?
李元芳

狄仁杰:……
狄仁杰

李元芳:莫非这就是bind的作用——改变了函数内部的上下文this?!
李元芳

狄仁杰:……元芳!!如燕喊你回家吃饭!!
狄仁杰

李元芳:大人,您这是……怎~么~了~??
李元芳

旁白:元芳此时定睛看了看短词少句的剧本,脸色立马变大便,眼睛直接变成了火影中的白眼……

李元芳:——擦,吃翔了我!!sorry啊,大人,我台词看错行了!!求鞭笞!
李元芳

狄仁杰:(稳定了情绪,长舒了一口气~~)我们这是荒诞搞笑剧,不是SM剧,鞭笞什么的就算了!不过下面我要多讲几句,寻求心理平衡!
狄仁杰

李元芳:大人应该的!
李元芳

狄仁杰:函数扩展bind使用如下:

function() {}.bind(thisArg [, arg1 [, arg2, …]]);

翻译成唐文就是:

函数.bind(this上下文参数, 普通参数1, 普通参数2, ...);

根据我的实践与调查,bind方法尤其在对象字面量编程风格下尤为受用。

var OOO = {
    color: "#cd0000",
    element: $("#text"),
    events: function() {
        $("input[type='button']").addEventListener("click", function(e) {
            this.element.style.color = this.color;
        }.bind(this));
        return this;
    },
    init: function() {
        this.events();
    }
};

元芳,你可知道《葵花宝典》?
狄仁杰

李元芳:《葵花宝典》!是不是那个几百年之后,宫中那个名叫”无二弟郎”创建的一门神功?
李元芳

狄仁杰:正是!你可知道,这门武功不是什么人都可以练的?
狄仁杰

李元芳:什么?武功也会搞歧视……大人,那这门武功看哪些人不顺眼呢?
李元芳

狄仁杰:那些可以造人的男人!
狄仁杰

李元芳:……
李元芳

狄仁杰:bind方法跟《葵花宝典》一样,不是谁都可以用的?
狄仁杰

李元芳:哦?居然还有这等玄机!莫非bind方法我又不能使用?
李元芳

狄仁杰:那倒不是。N多年前,有一族姓氏为ie的外人迁至我大唐,其目前留在世上的第6~8代后人是不能使用bind方法的,逐渐长大的第9代后人,以及还在襁褓中的第10代后人倒是可以使用!
狄仁杰

李元芳:大人如此见多识广,真可谓当代奇人啊!那这IE6~8终日不得惶恐,岂不是很悲剧?
李元芳

狄仁杰:就跟《葵花宝典》清了裤裆依然可以练一样,IE6~8也是有办法不被歧视,避免悲剧的!
狄仁杰

李元芳:大人,那这个方法是?
李元芳

狄仁杰:这个方法就是……
狄仁杰

导演:咔!!本集拍完了,广告时间,大伙休息下,马上进入下集拍摄!
导演

//zxx: 下面为广告~~注意不要勿点~~嘻嘻~~

二、为IE6~8自定义bind方法

李元芳:大人,您先~~
李元芳

狄仁杰:通过对Functionprototype原型进行扩展,可以为IE6~8自定义bind方法。元芳,你可知如何自定义?
狄仁杰

李元芳:大人,您是知道的,我不能抢你的风头。因此,属下不知,请大人道明真相!
李元芳

狄仁杰:曾泰,去我书房把案头上的密函拿来。
狄仁杰

曾泰:师傅,密函在此……
曾泰 密函

狄仁杰:曾泰,你给大伙儿念念。
狄仁杰

曾泰:咳咳……恩恩……这个……那个……恩……啊……
曾泰

狄仁杰:曾泰,你这是舌头抽筋了??
狄仁杰

曾泰:恩师,下面的密函文字都是English, 我不认识字啊!

if (!function() {}.bind) {
    Function.prototype.bind = function(context) {
        var self = this
            , args = Array.prototype.slice.call(arguments);
            
        return function() {
            return self.apply(context, args.slice(1));    
        }
    };
}

曾泰

狄仁杰:曾泰,你的脑袋还是一如既往的秀逗,既然是密文,你就用密语念就行了!
狄仁杰

曾泰:恩师当真高明!&……#&……¥&*@¥%#…%#&#%¥&*……
曾泰

狄仁杰:元芳,这段密文你怎么看?
狄仁杰

李元芳:我觉得这段密文后面一定有一个惊天大秘密!
李元芳

狄仁杰:元芳,曾泰,你们都过来,顺便把你们的鼠标都移过来,狠狠地点击这里:为函数自定义bind方法demo

然后点击那个名叫”点击我”的机关,如何?
狄仁杰

李元芳:大人,我怎么变红了!!!
李元芳

狄仁杰:呵呵,说明你可以使用bind方法!曾泰,我没记错的话,你就是ie家族第八代后人,后因坑爹致死跟妈姓才改姓曾,你也来试试机关!
狄仁杰

曾泰:恩师,我也变红了!
我勒个去,我还有如此悲惨的剧情设定啊!好吧,人在江湖漂,哪有不挨刀!被ie,被克父,被红了都认了!曾泰

狄仁杰:红了好啊,红了好啊!说明密函中的自定义方法是有效的!
IE8浏览器下点击按钮文字变红 张鑫旭-鑫空间-鑫生活

机关对应的密文更能说明这一切:

var eleBtn = document.getElementById("button")
    , eleText = document.getElementById("text");
    
eleBtn.onclick = function(color) {
    color = color || "#003399";
    this.style.color = color;
}.bind(eleText, "#cd0000");

狄仁杰

李元芳:不过大人,我还有不解,密文中Array.prototype.slice.call(arguments)是什么意思?
李元芳

狄仁杰:这个嘛……
狄仁杰

导演:咔!!本集over. 那个,我老婆催我回去早点休息了。因此,下一集我一个人来演就可以了。大家都散了吧,各回各家,各找各妈!
导演

李元芳/曾泰(异口同声):导演,我们现在红得像个卫生巾一样,回不了家啊,先帮我们还原吧!
李元芳 曾泰

导演:回不了家,那正好!路口红灯正好坏了,你们俩过去,不要浪费了资源!
导演

李元芳/曾泰:……
李元芳 曾泰

三、小拓展 – Array.prototype.slice.call

查看jQuery的源代码,会看到类似:

slice = Array.prototype.slice,

array = Array.prototype.slice.call( array, 0 );

的代码。

干嘛用的呢?

作用就是:将类似数组的对象转换为真实的数组。

真实数组具有slice方法,可以对数组进行浅复制(不影响原数组),返回的依然是数组。

类似数组虽然有length属性,可以使用for循环遍历,却不能直接使用slice方法,会报错!但是通过Array.prototype.slice.call则不会报错,本身(类似数组)被从头到尾slice复制了一遍——变成了真实数组!

上一集demo中函数内部的arguments是应该都熟知的类似数组,于是:

Array.prototype.slice.call(arguments)

所返回的就是完整参数的真实数组了!下面的code也就容易理解了。

至于为什么”类似数组不能直接slice, 而借助Array.prototype可以slice我也不清楚其中深层次的原因,还希望有过相关研究的大人指点迷津!

(本篇完)

分享到:


发表评论(目前40 条评论)

  1. 移除图片说道:

    document.querySelectorAll(‘img’).forEach(img => img.parentNode.removeChild(img));

  2. psc0606说道:

    你真是个逗比

  3. 1232323说道:

    真是有时间啊 弄这么多图片

  4. 惶惶不可终日说道:

    张老师真乃神人也

  5. 田硕说道:

    旭哥,有个问题想请教一下,定时器里的回调函数调用bind会不会内存溢出啊?还是当bind里的apply方法执行完毕之后就会销毁这个闭包作用域啊?
    如:setTimeout(arguments.callee.bind(HZEPG.Scroll), this.valueTime)

  6. thx说道:

    超级有意思,更好理解,非常喜欢这种风格!有意思的学技术,有自己独特的理解。不错的老师!哈哈!

  7. xxx说道:

    密函里返回的函数的arguments 被漏掉了

  8. E东说道:

    希望能短 一点 幽默要有个°

  9. wet说道:

    if (!function() {}.bind) {
    Function.prototype.bind = function(context) {
    var self = this
    , args = Array.prototype.slice.call(arguments);

    return function() {
    return self.apply(context, args.slice(1));
    }
    };
    }
    这个中,,, return self.apply(context, args.slice(1)); 里面这个1看不懂,求解释,我感觉应该不写这个值

  10. a说道:

    受益匪浅呀 顺便收藏了

  11. 新凉说道:

    哈哈哈,每次看你的文档,都是又涨知识又有趣!赞。怎么会有这样的人呢

  12. zichi说道:

    卧槽 旭哥真是太有才了!!!!

  13. 等我修炼成魔说道:

    12年写的,我最近才用到。写的不错啊,旭哥,前端时间我移动端项目就用你的mobilebone.js来实现的

  14. 很好说道:

    中国缺少如此幽默的技术文章,值得推荐!

  15. qq80805588说道:

    此博主的博客内容还是有很多经典的好东西, 但是越来越没看头了, 其实内容都是不错的,就是写的太搞了,搞的有点过分,甚至看不懂

  16. 呵呵说道:

    @至于为什么”类似数组不能直接slice, 而借助Array.prototype可以slice”我也不清楚其中深层次的原因,还希望有过相关研究的大人指点迷津!

    而借助Array.prototype可以slice,这里有问题吧。借助也是不可以的。
    我理解的是,一个对象没有slice函数属性,但还是可以被slice函数执行吧,这里只是调用了slice函数而已。至于为什么不直接Array.prototype.slice(arguments),slice函数本身是为Array设计的,内部肯定调用上下文this,而不是某个参数名。所以,我想[].slice(arguments)也是一样的结果吧。

  17. 布道说道:

    @wubai 写js多了吧。那么麻烦 直接找到图片。样式display:none 看的多清爽~~~~

  18. wubai说道:

    看的我好累!
    用火狐看,在firebug控制台输入如下代码,运行即可缩小那些图片:
    var imgs = document.getElementById(‘post-2689’).getElementsByTagName(‘img’);
    var imgsLen = imgs.length;
    for(var i=0; i<imgsLen; i++){
    imgs[i].style.height='50px';
    imgs[i].style.width='auto';
    }

  19. 浅笑说道:

    哈哈,笑抽了,你太有才了。

  20. icrt说道:

    写得很欢乐的文章!期待能从博主的博文中学到更多的东西!

  21. yetazhan说道:

    我一直关注你写的文章,其中这一片我觉得写的太搞笑了,实在没办法不看,
    还有一篇也极为搞笑,好吧,CSS3 3D transform变换,不过如此!
    博主,我十分想知道什么样的女人适合你

  22. 踏雪浪人说道:

    牛了吧唧的~!

  23. vgche说道:

    好创意啊!不过把配图稍微改小点可能更好。

  24. 悠然说道:

    博主好幽默

  25. petsa说道:

    这看得太累了,以前的文章很好,最近都弄这个…

  26. linxz说道:

    看着真累,配图又大,滚动鼠标都滚累了。
    不过表现形式感觉还是有点意思,就是内容太累了。

  27. awen说道:

    呃,这章写的我蛋疼

  28. 哀音说道:

    这个bind的写法不够完善,没达到扩展参数的效果
    var obj = { value: []};

    var a = function(){
    for( var i = 0; i < arguments.length; i++ ){
    this.value.push(arguments[i]);
    }

    return this.value;
    }.bind( obj,4,5,6 );

    console.log(a(1,2,3 ));

    这里可以看出,

    看到更多的是这类
    Function.prototype.bind =
    function (context) {
    var method = this,
    slice = Array.prototype.slice,
    args = slice.call(arguments, 1),
    innerArgs,finalArgs;
    return function () {
    innerArgs = slice.call(arguments);
    finalArgs = args.concat(innerArgs)
    return method.call(context,finalArgs);
    };
    };

    • adu说道:

      鑫哥我 用您的 /*Function.prototype.bind = function(context) {
      var self = this, args = Array.prototype.slice.call(arguments);
      return (function() {
      console.log(args.slice(1))
      return self.apply(context, args.slice(1));
      })
      }*/

      在ie8下测试 有问题,本来结果是 4,5,6,1,2,3 在ie8 下只有4,5,6 用楼上的这段代码是可以的

  29. Hoogle说道:

    哈哈,太搞了。。。

  30. tangoboy说道:

    真象只有一个

  31. welefen说道:

    不去搞文学真实浪费了啊

  32. tcdona说道:

    这么快就回复了,这后面一定有一个天大的机密

  33. tamamadesu说道:

    这篇写的,,,

  34. immkoala说道:

    哈哈 太搞笑了~