A little knowledge of the this keyword in Javascript

Javascript is probably one of the most popular cross-platform languages out there right now. A little bit of waste, so I want to take advantage of this free time now to add a point of omission.

Implicit binding of this

1 at first it was something I was confused about, and when I first saw it, I didn't understand it. Then, in a similar situation, the same problem can be solved in a similar way. Try to make clear the knowledge among them, convenient search.

This is a design error in the Javascript language, but it seems that this error is inevitable, functions are objects, arrays are objects, and so on. Cite the example in Javascript: The Good Parts

function add (a,b) {return a+b}

 var sum = add (3,4);

 console.log(sum); //sum = 7

So sum is equal to 7.

 > typeof add

 > 'number'

As you can see here, the type of add is numeric.

When a function is called in this mode, this is bound to a global variable.
So in our current environment, we can call this like this

 this.add(3,4)

This is the implicit binding of this, while this will be bound in a different way.

var hello = function (){

    return "Hello, " + this.name;

};

name = 'this';

console.log(hello());

And then we get Hello,this. And when the

var hello = function (){

    return "Hello, " + this.name;

};

var user = {

    hello : hello,

    name : 'phodal' . 
};

console.log(user.hello());

So hello in user points to the hello function, which in our understanding is not possible, so it's Bug.

If we define a variable in this method and assign it this, then the inner function can access this through that variable.

var that = this

So when things get a little bit more complicated 1, we need to use:

 vat that = this;

tips:

1. The scope of the this variable is always determined by its most recent enclosing function.
2. Use a local variable (me,self,that) to make the this binding available internally.

A simple example:

var M = function(){

    this.name = "M";

};
var MM = function(){

    z = new M();

    this.name = "MM";
    z.printName = function(){

        console.log(this.name);

    };

    return z.printName();

};
var mm = new MM;

So this is pointing to M, and MM is pointing to M. If we remove the this from the M, we get back one undefined. So we create an alias for the current this scope, such as that or self, etc. :

var MM = function(){

    z = new M();

    this.name = "MM";

    var self = this;

    z.printName = function(){

        console.log(self.name);

    };

    return z.printName();

};

This will return 1 MM. In addition, the bind method of the callback function can be used in ES5.

var MM = function(){

    z = new M();

    this.name = "MM";

    z.printName = function(){

        console.log(this.name);

    }.bind(this);

    return z.printName();

};

bind can bind methods to receivers.

other

And 1 hello, world

I met print('Hello')('World') on a chance, and then output 'Hello, World'.

The so-called higher-order functions, they seem to be very useful, so if you're interested, take a look at the next one.