js the call, apply and bind in the end what is the difference?

Introduction

In the js, each function points to the prototype objects Function.prototype (js prototype-based inheritance chain). Therefore, each function will have apply, call, and bind methods that are inherited from Function.
Their role is the same, are used to change the function of this point.

Instructions

apply usage may be expressed as:
A.apply (B, [X, Y, Z]);
This method may be changed this point to function A, the function to point B. The second parameter is passed in the form of an array of a function parameter list.

call usage and apply almost the only mass participation in a different way. Like this:
A.apply (B, X, Y, Z)
can pass a plurality of separate parameters, rather than apply the same, all the parameters required to pass inside to come into an array.

The same way bind the mass participation and call, but the difference is that it will be performed immediately after apply the method call and call, and then bind the method call returns a new function, it will not be executed immediately, we need to manually carried out.

For example

var name = "佚名";
var age = 20;
//global.name
//global.age

var p1 = {
    name: "张三",
    age: 12,
    func: function(){
        console.log(`姓名:${this.name},年龄:${this.age}`)
    }
}

var p2 = {
    name: "李四",
    age: 15
}

p1.func();  //姓名:张三,年龄:12
p1.func.call();  //姓名:佚名,年龄:20
p1.func.apply(p2);  //姓名:李四,年龄:15
p1.func.bind(p2)(); //姓名:李四,年龄:15

1. When the direct call p1.func method, this points to the current object p1, so the name and age are its property value of the object itself.
2. When using the method call, passing the first parameter is null, the browser environment, the this point window; at node environment, the this point global. Readers are free to change the name and age global.name and global.age verify.
3. When using the methods apply, to pass into the p2, this function corresponds to the target point p2, and therefore, the properties of the properties are at this time printed object p2
4. The bind method will generate a new function object, it is necessary to manually perform what function (ie, add a parenthesis at the end of function execution).

to sum up

Examples of finished, call, apply and bind the difference has been very clear. Which it is to change the context of this exists. So, sometimes you'll see such usage. To this point does not change, and will function normally add back the bind (this), as follows

function f(){}.bind(this)

In this case, this point baffling problem will not appear. Obviously when I want to call this function belongs to a property of the object inside the function, but why does this not visit it. (Js write novice will certainly encountered such problems)

In fact, from es6 beginning, we have supported the arrow function, I suggest that you use the arrow function, this points to a problem will not appear.

In addition, the use of call, apply also inheritance function. Before es6 the class does not appear, we need to help them to implement inheritance.