首页 > 其他 > 详细

解析Function.prototype.bind

时间:2014-10-25 18:31:45      阅读:130      评论:0      收藏:0      [点我收藏+]

简介

对于一个给定的函数,创造一个绑定对象的新函数,这个函数和之前的函数功能一样,this值是它的第一个参数,其它参数,作为新的函数的给定参数。

bind的作用

bind最直接的作用就是改变this的指向

// 定义函数
 var checkNumericRange = function (value) {
     if (typeof value !== ‘number‘)
         return false;
     else
         return value >= this.minimum && value <= this.maximum;
 }
 
 // 定义对象
 var range = { minimum: 10, maximum: 20 };

这时就会碰到一个问题,因为作用域不符,checkNumricRange不能操作range对象的属性。

那我们该如何做呢?

答案是修改this的值。把函数内部的this修改为range对象,这样这个函数就可以访问range的属性。

通过bind可以很好的实现。

 // 限定函数的this值为range,返回一个新的函数
 var boundCheckNumericRange = checkNumericRange.bind(range);
 
 // 使用新生成的函数。
 var result = boundCheckNumericRange (12);
 document.write(result);//  true

让我们分析分析checkNumricRange.bind(range)都做了什么?

通过bind方法,将this的值修改为range对象,返回一个新函数,这个函数this值是range,但函数的功能没有改变。

Function.prototype.bind原理解析

内部原理有一点点绕人,

下面给出一个简化的bind代码,

Function.prototype.bind = function (scope) {
    var fn = this;//这里fn为this,也就是调用bind的函数,方便下面调用
    return function () {//返回的是一个可以运行函数
        return fn.apply(scope);//利用apply方法,使用scope对象调用fn,
    };
}    

一个简单的测试用例

var foo = {
    x: 3
}
 
var bar = function(){
    console.log(this.x);
}
 
bar(); // undefined
 
var boundFunc = bar.bind(foo);
 
boundFunc(); // 3

 

解析Function.prototype.bind

原文:http://www.cnblogs.com/winderby/p/4050432.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!