初学bind

其实项目中还没有用到。

但自己还是想逐步了解一些高级的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>

第二个: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>

第三个:利用[,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>

时间: 2024-08-25 17:33:27

初学bind的相关文章

初学JavaScript之猜测new操作符的原理

本文是一篇原理猜测的文章,如果有不准确的地方请指正,转载请声明出处,谢谢! 原文:http://blog.csdn.net/softmanfly/article/details/34833931 点击跳转 JavaScript中构造函数与普通函数其实没有什么差别,构造函数可以当做普通函数来使用,普通函数也可以用new来模拟构造函数的调用,然而使普通函数与构造函数发生区别的其实就在于new操作符的内部原理,下面是我通过测试猜测的new操作符的执行过程,当你在用new操作符来生成一个对象时内部可能执

【Win10】UAP/UWP/通用 开发之 x:Bind

[Some information relates to pre-released product which may be substantially modified before it's commercially released. Microsoft makes no warranties, express or implied, with respect to the information provided here.] [涉及某信息预发布的版本可能在它的商业版本大幅修改.对于这里

Android初学第24天

Android初学第24天 10_FragmentArguments 代码 CrimeListFragment.java package com.bignerdranch.android.criminalintent; import android.content.Intent; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v7.widget.LinearLayo

Android初学第82天

Android初学第82天 20_MVVM 代码 BeatBox BeatBoxFragment.java package com.bignerdranch.android.beatbox; import android.databinding.DataBindingUtil; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment;

std::bind接口与实现

前言 最近想起半年前鸽下来的Haskell,重温了一下忘得精光的语法,读了几个示例程序,挺带感的,于是函数式编程的草就种得更深了.又去Google了一下C++与FP,找到了一份近乎完美的讲义,然后被带到C++20的ranges library,对即将发布的C++20满怀憧憬.此时,我猛然间意识到,看别人做,觉得自己也能做好,在游戏界叫云玩家,在编程界就叫云程序员啊! 不行,得找点事干.想起同样被我鸽了很久的<functional>系列,刚好与函数式编程搭点边,就动笔写吧!这就是本文的来历. 找

call和apply和bind的区别

在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」. apply(): 将函数作为指定对象的方法来调用,传递给它的是指定的参数数组function.apply(thisobj, args) 或者 function.apply(thisobj, args) 1.thisobj

关于bind()方法

1.Function.prototype.bind返回一个新的函数对象,该函数对象的this绑定到了thisArg参数上.从本质上讲,这允许你在其他对象链中执行一个函数. 2.bind()--也是改变函数体内this的指向; bind会创建一个新函数,称为绑定函数,当调用这个函数的时候,绑定函数会以创建它时传入bind()方法的第一个参数作为this,传入bind()方法的第二个及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数: bind与apply.call最大的区

javascript中利用柯里化函数实现bind方法

柯理化函数思想:一个js预先处理的思想:利用函数执行可以形成一个不销毁的作用域的原理,把需要预先处理的内容都储存在这个不销毁的作用域中,并且返回一个小函数,以后我们执行的都是小函数,在小函数中把之前预先存储的值进行相关的操作处理即可: 柯里化函数主要起到预处理的作用: bind方法的作用:把传递进来的callback回调方法中的this预先处理为上下文context; /** * bind方法实现原理1 * @param callback [Function] 回调函数 * @param con

UWP开发之Mvvmlight实践四:{x:bind}和{Binding}区别详解

{x:bind}是随着UWP被推出而被添加的,可以说是Win10 UWP开发专有扩展.虽然 {x:Bind} 缺少{Binding} 中的一些功能,但它运行时所花费的时间和使用的内存量均比 {Binding} 要少,且支持更好的调试. 参照网址:{x:Bind} 标记扩展,GitHub微软UWP实例之XamlBind 1,{x:Bind} 基本原理 在 XAML 加载时,{x:Bind} 将转换为你所需的绑定对象,此对象将从数据源上的某一属性中获取相关值.绑定对象可以配置为观察数据源属性值的更改