我已经知道apply和call是类似的函数,它们设置this(函数的上下文)。

区别在于我们发送参数的方式(manual vs array)

问题:

但是什么时候应该使用bind()方法呢?

var obj = {
  x: 81,
  getX: function() {
    return this.x;
  }
};

alert(obj.getX.bind(obj)());
alert(obj.getX.call(obj));
alert(obj.getX.apply(obj));

jsbin


当前回答

TL; diana:

简单地说,bind创建函数,调用和apply执行函数,而apply期望数组中的参数

完整的解释

假设有一个乘法函数

function multiplication(a,b){
console.log(a*b);
}

让我们使用bind创建一些标准函数

var multiby2 = multiplication.bind(this,2);

现在multiby2(b)等于乘法(2,b);

multiby2(3); //6
multiby2(4); //8

如果我在bind中传递两个参数会怎样

var getSixAlways = multiplication.bind(this,3,2);

现在getSixAlways()等于乘法(3,2);

getSixAlways();//6

即使传递参数也返回6; getSixAlways (12);/ / 6

var magicMultiplication = multiplication.bind(this);

这将创建一个新的乘法函数并将其分配给magic乘法。

哦,不,我们将乘法功能隐藏到magic乘法中。

调用 magic乘法返回一个空函数b()

在执行过程中,它运行良好 magicMultiplication (6 5);/ / 30

打电话申请怎么样?

magicMultiplication.call(这3 2);/ / 6

magicMultiplication.apply(这一点,[5,2]);/ / 10

其他回答

    function sayHello() {
            //alert(this.message);
            return this.message;
    }
    var obj = {
            message: "Hello"
    };

    function x(country) {
            var z = sayHello.bind(obj);
            setTimeout(y = function(w) {
//'this' reference not lost
                    return z() + ' ' + country + ' ' + w;
            }, 1000);
            return y;
    }
    var t = x('India')('World');
    document.getElementById("demo").innerHTML = t;

TL; diana:

简单地说,bind创建函数,调用和apply执行函数,而apply期望数组中的参数

完整的解释

假设有一个乘法函数

function multiplication(a,b){
console.log(a*b);
}

让我们使用bind创建一些标准函数

var multiby2 = multiplication.bind(this,2);

现在multiby2(b)等于乘法(2,b);

multiby2(3); //6
multiby2(4); //8

如果我在bind中传递两个参数会怎样

var getSixAlways = multiplication.bind(this,3,2);

现在getSixAlways()等于乘法(3,2);

getSixAlways();//6

即使传递参数也返回6; getSixAlways (12);/ / 6

var magicMultiplication = multiplication.bind(this);

这将创建一个新的乘法函数并将其分配给magic乘法。

哦,不,我们将乘法功能隐藏到magic乘法中。

调用 magic乘法返回一个空函数b()

在执行过程中,它运行良好 magicMultiplication (6 5);/ / 30

打电话申请怎么样?

magicMultiplication.call(这3 2);/ / 6

magicMultiplication.apply(这一点,[5,2]);/ / 10

function. prototype.call()和function. prototype.apply()都使用给定的这个值调用函数,并返回该函数的返回值。

另一方面,function .prototype.bind()使用给定的这个值创建一个新函数,并返回该函数而不执行它。

让我们取一个这样的函数:

var logProp = function(prop) {
    console.log(this[prop]);
};

现在,让我们选择一个这样的对象:

var Obj = {
    x : 5,
    y : 10
};

我们可以像这样将函数绑定到对象上:

Obj.log = logProp.bind(Obj);

现在,我们可以在代码中的任何地方运行Obj.log:

Obj.log('x'); // Output : 5
Obj.log('y'); // Output : 10

真正有趣的是,你不仅为this绑定了一个值,还为它的参数prop绑定了一个值:

Obj.logX = logProp.bind(Obj, 'x');
Obj.logY = logProp.bind(Obj, 'y');

我们现在可以这样做:

Obj.logX(); // Output : 5
Obj.logY(); // Output : 10

JavaScript调用()

const person = {
    name: "Lokamn",
    dob: 12,
    print: function (value,value2) {
        console.log(this.dob+value+value2)
    }
}
const anotherPerson= {
     name: "Pappu",
     dob: 12,
}
 person.print.call(anotherPerson,1,2)

JavaScript应用()

    name: "Lokamn",
    dob: 12,
    print: function (value,value2) {
        console.log(this.dob+value+value2)
    }
}
const anotherPerson= {
     name: "Pappu",
     dob: 12,
}
 person.print.apply(anotherPerson,[1,2])

**call和apply函数是不同的,调用单独的参数,但应用数组 如:(1、2、3) **

JavaScript绑定()

    name: "Lokamn",
    dob: 12,
    anotherPerson: {
        name: "Pappu",
        dob: 12,
        print2: function () {
            console.log(this)
        }
    }
}

var bindFunction = person.anotherPerson.print2.bind(person)
 bindFunction()

它允许设置该函数的值,而不依赖于函数的调用方式。这在处理回调时非常有用:

  function sayHello(){
    alert(this.message);
  }

  var obj = {
     message : "hello"
  };
  setTimeout(sayHello.bind(obj), 1000);

要用call实现相同的结果,应该是这样的:

  function sayHello(){
    alert(this.message);
  }

  var obj = {
     message : "hello"
  };
  setTimeout(function(){sayHello.call(obj)}, 1000);