Some little knowledge about this keyword in Javascript_javascript skills-JS Tutorial-php.cn

Some little knowledge about this keyword in Javascript_javascript skills

WBOY

Release： 2016-05-16 16:09:26

Original

1313 people have browsed it

Javascript should be one of the most popular cross-platform languages now. I have been playing with some interesting things on the front end, but I found that I have not mastered this language well. It's a bit of a waste of time, so I want to take advantage of the free time now to add some missing things.

Implicit binding of this

This was something that confused me at first. When I first saw it, I didn’t understand it. Then, in similar situations, similar methods can be used to solve the same problem. So I tried to sort out the knowledge and make it easier to find.

This is a design error in the Javascript language, but it seems that this error is inevitable. Functions are objects, arrays are objects, etc. Quoting examples from "Javascript: The Good Parts"

Copy code The code is as follows:

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

var sum = add (3,4);

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

The result of sum at this time is 7.

Copy code The code is as follows:

> typeof add

> 'number'

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

When calling a function in this mode, this is bound to a global variable.
That is, in the current environment, we can call this
like this

Copy code The code is as follows:

this.add(3,4)

This is the implicit binding of this, and this will be bound in different ways.

Copy code The code is as follows:

var hello = function (){

Return "Hello, " this.name;

};

name = 'this';

console.log(hello());

At this time we will get Hello, this. And when

Copy code The code is as follows:

var hello = function (){
Return "Hello, " this.name;
};
var user = {
Hello : hello,
Name: 'phodal'，

};
console.log(user.hello());

At this time, the hello in user points to the hello function. In our understanding, how is this possible, so it is a bug.

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

var that = this

So when the situation is a little more complicated, we need to use:

Copy code The code is as follows:

vat that = this;

tips:

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

A simple example:

Copy code The code is as follows:

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;

At this time, this points to the M function, not MM itself. If we remove this in M, then the returned value is undefined. So we create an alias of the current this scope, such as that or self, etc.:

Copy code The code is as follows:

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 a MM. In addition, in ES5 you can use the bind method of the callback function.

Copy code The code is as follows:

var MM = function(){

z = new M();

This.name = "MM";

z.printName = function(){

console.log(this.name);

}.bind(this);

Return z.printName();

};

bind can bind a method to a receiver.

Others

Another hello, world

I encountered print('Hello')('World') by chance, and then output 'Hello, World'.

The so-called higher-order functions seem to be very useful. If you are interested, you can read the next article.