初学bind

时间：2015-06-25 12:08:41 阅读：133 评论：0 收藏：0 [点我收藏+]

标签：

其实项目中还没有用到。

但自己还是想逐步了解一些高级的JS语法，不是为了炫技，也不像找前端的工作。

主要目的是：1.学习设计思想，提升解决问题的能力2.让自己的脑子动起来，别太笨。

简单的几句话总结一下call,apply和bind：

三者都是为了改变函数执行时的上下文环境。

We really do want to be able to ask deep_thought a question when we click the button, and more generally, we do want to be able to call object methods in their native context when responding to things like events and setTimeout calls. Two little-known JavaScript methods, apply and call, indirectly enable this functionality by allowing us to manually override the default value of this when we execute a function call. (手动重写默认的this值)

call方法的第一个参数定义了this关键字在被调用方法的执行上下文中指向和对象，call方法的剩余参数则是被调用方法的参数。

apply方法和 call方法基本一致,但是允许你以数组的形式向被调用的函数传递参数.
all是立即执行函数的，因此我们提供的 onclick handler是函数的执行结果而不是函数本身.我们需要JavaScript的另一个特性来解决这个问题：bind方法。
bind方法：对于给定函数，创建具有与原始函数相同的主体的绑定函数。在绑定函数中，this 对象将解析为传入的对象。绑定函数具有指定的初始参数。

两个参考网址：

JavaScript的this,call(),apply(),bind()http://blog.csdn.net/golden_chan/article/details/4030111

微软官方bind指南（MSDN大法好！！！）https://msdn.microsoft.com/zh-cn/library/ff841995

bind   function.bind(thisArg[,arg1[,arg2[,argN]]])

如果理解了bind，那么call和apply也就会轻松一些了，下面就直接上代码了，代码直接复制的MSDN，自己又修改了几句做了一点点测试。再说一遍：MSDN大法好！！！

第一个：bind填充this对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script language="JavaScript">
    var checkNumeericRange = function(value){
        if(typeof value !==‘number‘)
            return false;
        else
            return value>=this.minimum && value<=this.maxmum;
    }
    var checkNumeericRange1 = function(value,r){
        if(typeof value !==‘number‘)
            return false;
        else
            return value>=r.minimum && value<=r.maxmum;
    }
    var range = {minimum:10,maxmum:20};
    var boundCheckNumericRange = checkNumeericRange.bind(range);
    var result = boundCheckNumericRange(12);
    var result1=checkNumeericRange(12);
    var result2=boundCheckNumericRange(21);
    var result3=boundCheckNumericRange(‘adssad‘);
    var result4=checkNumeericRange1(12,range);
    document.writeln(result);//true
    document.writeln(result1);//false
    document.writeln(result2);//false
    document.writeln(result3);//false
    document.writeln(result4);//true
</script>
</body>
</html>

View Code

第二个：bind改变原有的this对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script language="JavaScript">
    var originalObject={
        minimum:50,
        maxmum:100,
        checkNumericRange:function(value){
            if(typeof value !== ‘number‘)
                return false;
            else
                return value>=this.minimum && value<=this.maxmum;
        }
    }

    var result=originalObject.checkNumericRange(10);
    document.writeln(result);

    var range={minimum:10,maxmum:20};

    //MSDN的原版写法
    // Create a new version of the checkNumericRange function that uses range.
    var boundObjectWithRange = originalObject.checkNumericRange.bind(range);
    // Check whether 10 is in the numeric range.
    var result = boundObjectWithRange(10);

//    这样写也可以：
//    var boundObjectWithRange=originalObject.checkNumericRange.bind(range,39);
//    var result=boundObjectWithRange()
    document.write(result);
</script>
</body>
</html>

View Code

第三个：利用[,arg1[,arg2[,argN]]]传入参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script language="JavaScript">
    var displayArgs = function(val1,val2,val3,val4){
        document.write(val1 + " " + val2 + " " + val3 + " " + val4);
    }
    var emptyObject = {};
    var displayArgs2 = displayArgs.bind(emptyObject,12,"a");
    displayArgs2("b","c");
</script>
</body>
</html>

View Code

初学bind

标签：

原文地址：http://www.cnblogs.com/yueyanglou/p/4599469.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行