The three methods in js are used to change the orientation of this. Why are they used as follows

var obj = {
    num : 1.fun : function () {
        console.log(this.num); }}var a = obj.fun;
a()     // undefined
obj.fun()  / / 1
Copy the code

The value of a variable can be retrieved by executing it directly, but not by reassigning it. The value of a variable can be retrieved by reassigning this to the object on which it was called.

Although we can execute directly to get the value, sometimes we have to assign the object to another variable to save it, so we can use the following methods

1, call ()

var obj = {
    num : 1.fun : function () {
        console.log(this.num); }}var a = obj.fun;
a.call(obj)     / / 1
Copy the code

Obj’s “this” refers to “A” by calling obj’s “this”.

The call() method can add multiple arguments in addition to the first one, as follows

var obj = {
    num : 1.fun : function (x,y) {
        console.log(this.num); / / 1
        console.log(x+y);      / / 5}}var a = obj.fun;
a.call(obj,2.3)     
Copy the code

The apply() method is similar to the call() method

var obj = {
    num : 1.fun : function () {
        console.log(this.num); }}var a = obj.fun;
a.apply(obj)     / / 1
Copy the code

You can also pass multiple arguments, except that the second argument must be an array

var obj = {
    num : 1.fun : function (x,y) {
        console.log(this.num); / / 1
        console.log(x+y);      / / 5}}var a = obj.fun;
a.apply(obj,[2.3])     
Copy the code

or

var obj = {
    num : 1.fun : function (x,y) {
        console.log(this.num); / / 1
        console.log(x+y);      / / 5}}var a = obj.fun;
var b = [2.3];
a.apply(obj,b)     
Copy the code

If the first argument to call() and apply() is null, this points to the window object

var obj = {
    num : 1.fun : function () {
        console.log(this); }}var a = obj.fun;
a.call(null)     // window
a.apply(null)    // window
Copy the code

Bind () bind() also changes the direction of this, but is a little different from the previous two, as follows

var obj = {
    num : 1.fun : function () {
        console.log(this.num); }}var a = obj.fun;
a.bind(obj)
Copy the code

We noticed that no result was printed. Yes, bind() actually returns a modified function, which is the difference between the two

var obj = {
    num : 1.fun : function () {
        console.log(this.num); }}var a = obj.fun;
var b = a.bind(obj)
console.log(b)  / / ƒ () {the console. The log (enclosing num); }
Copy the code

Similarly, bind() can pass multiple arguments, and the arguments can be added again as they are executed, but note that the arguments are executed in the order of the parameters

var obj = {
    num : 1.fun : function (x, y, z) {
        console.log(this.num);  / / 1
        console.log(x, y, z);   / / 11 12 13}}var a = obj.fun;
var b = a.bind(obj, 11)
b(12.13)
Copy the code

Conclusion: Call and apply change this in the context and execute the function immediately. Bind allows the corresponding function to be called whenever it wants, and can add parameters at execution time. This is the difference between call and apply.