zoukankan      html  css  js  c++  java
  • bind,apply,call区别总结

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <body>
    <script type="text/javascript">
    var test = {
    a : 5,
    b : 6,
    sum : function (a,b) {
    var self = this;
    function getA() {
    return self.a;
    }
    function getB(){
    return self.b;
    }
    alert(a);
    alert(b);
    return getA() + getB();
    }
    }
    var obj = {a:2,b:3};
    alert(test.sum.call(obj,4,5)); // alert顺序4,5,5
    alert(test.sum.apply(obj,[6,7])); // alert顺序6,7,5
    var sum = test.sum.bind(obj,8); // sum(b)
    alert(sum(9));

    // call
    // var a = {
    // user:"追梦子",
    // fn:function(e,ee){
    // console.log(this.user); //追梦子
    // console.log(e+ee); //3
    // }
    // }
    // var b = a.fn;
    // b.call(a,1,2);

    // //apply
    // var a = {
    // user:"追梦子",
    // fn:function(e,ee){
    // console.log(this.user); //追梦子
    // console.log(e+ee); //11
    // }
    // }
    // var b = a.fn;
    // b.apply(a,[10,1]);

    // //bind

    // var a = {
    // user:"追梦子",
    // fn:function(){
    // console.log(this.user);
    // }
    // }
    // var b = a.fn;
    // b.bind(a);
    //我们发现代码没有被打印,这就是bind和call、apply方法的不同,实际上bind方法返回的是一个修改过后的函数。

    // 那么我们现在执行一下函数c看看,能不能打印出对象a里面的user

    // var a = {
    // user:"追梦子",
    // fn:function(){
    // console.log(this.user); //追梦子
    // }
    // }
    // var b = a.fn;
    // var c = b.bind(a);
    // c();

    // // ok,同样bind也可以有多个参数,并且参数可以执行的时候再次添加,但是要注意的是,参数是按照形参的顺序进行的。


    // var a = {
    // user:"追梦子",
    // fn:function(e,d,f){
    // console.log(this.user); //追梦子
    // console.log(e,d,f); //10 1 2
    // }
    // }
    // var b = a.fn;
    // var c = b.bind(a,10);
    // c(1,2);

    // 总结:call和apply都是改变上下文中的this并立即执行这个函数,bind方法可以让对应的函数想什么时候调就什么时候调用,并且可以将参数在执行的时候添加,这是它们的区别,根据自己的实际情况来选择使用。


    bind方法生成了一个新的函数,称为绑定函数,传入bind方法的第一个参数作为这个绑定函数的this对象,传入bind的第二个参数连同后面调用绑定函数时传入的参数按照先后顺序(传入bind的在前)构成绑定函数的参数。
    现在我们把上面的例子修改一下:

    render: function () {
    this.getAsyncData(function () {

    this.specialFunction();

    }.bind(this));

    }
    .bind()创建了一个函数,当这个函数在被调用的时候,它的 this 关键词会被设置成被传入的值(这里指调用bind()时传入的参数)
    再看一个bind的使用例子:

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


    var boundFunc = bar.bind(foo);

    boundFunc(); // 3


    将bar方法和foo对象绑定后,bar中的this对象被替换为了foo,并生成了一个新的函数boundFunc,因此在全局环境中调用boundFunc时,也可以访问到foo对象的属性。
    还可以了解一下Function.prototype.bind()内部是什么样的:

    Function.prototype.bind = function (scope) {
    var fn = this;//this是调用bind方法的对象(别的方法对象)
    return function () {
    return fn.apply(scope);//把fn环境中的this替换为scope
    };
    }

    可看出,bind方法返回了一个新的函数,这个方法返回了原方法(调用bind的方法)通过apply修改作用域(传入的参数scope)后的执行结果。如果调用这个新函数则会立即执行fn.apply(scope),并返回执行后的结果。

    fn.bind()
    与call、apply的区别
    call、apply是修改函数的作用域,并且立即执行,而bind是返回了一个新的函数,不是立即执行,即call and apply call a function while bind creates a function。bind在回调函数中常用到
    </script>
    </body>
    </html>

  • 相关阅读:
    乘积最大(动规)
    电话圈(floyd)
    孪生蜘蛛
    解题报告
    最大上升子序列和
    怪盗基德的滑翔翼(还是最长x序列)
    最长公共子序列
    合唱队形(动规,最长不下降子序列)
    课堂笔记 4.6
    2015-2016 ACM-ICPC, NEERC, Southern Subregional Contest I Lottery
  • 原文地址:https://www.cnblogs.com/qdcnbj/p/8065658.html
Copyright © 2011-2022 走看看