A-A+

js (ES5)中bind方法

2016年09月25日 JavaScript 暂无评论 阅读 161 次

一:jQuery的bind是用来绑定事件的,jQuery的bind是对包装器的扩展!

$("#test").bind("click", function() { 
   console.log("点击!"); 
});

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

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

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

Functionprototype原型进行扩展,可以为IE6~8自定义bind方法。

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));    
        }
    };
}

密函

 

三、小拓展 – 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”我也不清楚其中深层次的原因,还希望有过相关研究的大人指点迷津!

ps:http://www.zhangxinxu.com/wordpress/2012/10/ecmascript-es5-bind-array-slice-call-apply/

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录