bind()与call()和apply()之间的区别

具体内容以及示例可参见网站： https://www.codingame.com/playgrounds/9799/learn-solve-call-apply-and-bind-methods-in-javascript

需要记住的基本规则

"this"指代一个对象
"this"指的是调用它包含的函数的对象。
在全局上下文中，“this”指的是窗口对象，或者如果使用“严格模式”则是未定义的。

1var car = { 
2   registrationNumber: "GA12345",
3   brand: "Toyota",
4
5   displayDetails: function(){
6       console.log(this.registrationNumber + " " + this.brand);
7   }
8}

car.displayDetails(); // GA12345 Toyota

一旦想要借用一个方法

var myCarDetails = car.displayDetails; myCarDetails();

好吧，这将不起作用，因为“this”现在将分配给既没有 registrationNumber 也没有brand属性的全局上下文。

bind()方法

var myCarDetails = car.displayDetails.bind(car); myCarDetails(); // GA12345 Toyota

bind() 方法创建了一个新函数，其中“this”指的是上述案例“car”中括号中的参数。这样，bind() 方法就可以使用指定的“this”值调用函数。

用bind()方法提供参数的方法

1var car = { 
2    registrationNumber: "GA12345",
3    brand: "Toyota",
4
5    displayDetails: function(ownerName){
6        console.log(ownerName + ", this is your car: " + this.registrationNumber + " " + this.brand);
7    }
8}

var myCarDetails = car.displayDetails.bind(car, "Vivian"); myCarDetails() // Vivian, this is your car: GA12345 Toyota

只需要将参数放置在引用对象后面，用音乐号进行分割，就可以将参数传入car对象的displayDetails方法中

call()以及apply()方法

当遇到独立于对象之外的函数时，可以使用call()或者apply()方法

1var car = { 
2    registrationNumber: "GA12345",
3    brand: "Toyota"
4}
5
6function displayDetails(ownerName) {
7    console.log(ownerName + ", this is your car: " + this.registrationNumber + " " + this.brand);
8}

使用apply()方法

displayDetails.apply(car, ["Vivian"]); // Vivian, this is your car: GA12345 Toyota

或者

displayDetails.call(car, "Vivian"); // Vivian, this is your car: GA12345 Toyota

请注意，使用 apply() 函数时，参数必须放在数组中。 Call() 接受参数数组和参数本身。

一些代码段示例

1var func = function() {
2    console.log(this)
3}.bind(1);
4
5func();

[Number: 1]

1var func = function() {
2    console.log(this)
3}.bind(1);
4 
5 var obj = {
6    callFun : func
7 }
8obj.callFun.func();

/project/target/index.js:8 obj.callFun.func(); ^ TypeError: obj.callFun.func is not a function

1function checkFun(a, b, c){
2    console.log(this);
3    console.log(a);
4    console.log(b);
5    console.log(c);
6}
7checkFun.call(1,2,3,4);

[Number: 1] 2 3 4

1function checkFun(a, b, c){
2    console.log(this);
3    console.log(a);
4    console.log(b);
5    console.log(c);
6}
7checkFun.apply(1,[2,3,4]);

[Number: 1] 2 3 4

1"use strict";
2var zipcode = {
3    checkZipcode : function() {
4        console.log(this);
5        function updateZipCode() {
6            console.log(this);
7        }
8        updateZipCode.call(this);
9    }
10}
11zipcode.checkZipcode();

{ checkZipcode: [Function: checkZipcode] } { checkZipcode: [Function: checkZipcode] }

1"use strict";
2var zipcode = {
3    checkZipcode : function() {
4        console.log(this);
5        var updateZipCode = function() {
6            console.log(this);
7        }.bind(this);
8        updateZipCode();
9    }
10}
11zipcode.checkZipcode();
12