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 didn’t master this language well. I was a little bit careless, so I wanted to take advantage of the time I have time to add some missing things.
This hidden binding
At first this was something that I was confused about, but when I first saw it, I didn’t understand. Then, in similar situations, the same problem can be solved by similar methods. So I tried to sort out the knowledge in it for easy search.
This is a Javascript language design error, but it seems that this error is inevitable, functions are objects, arrays are objects, etc. Quote examples from "Javascript: The Good Parts"
The code copy is as follows:
function add (a,b) {return a+b}
var sum = add (3,4);
console.log(sum); //sum = 7
At this time, the result of sum is 7.
The code copy is as follows:
> typeof add
> 'number'
As you can see here, the type of add is a numeric value.
When calling a function in this mode, this is bound to a global variable.
That is, in the current environment, we can call this in this way
The code copy is as follows:
this.add(3,4)
This is the implicit binding of this, and this will be bound in different ways.
The code copy is as follows:
var hello = function (){
return "Hello, " + this.name;
};
name = 'this';
console.log(hello());
Then we will get Hello, this. And when
The code copy 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, and in our understanding, how is this possible? So it is a bug.
If we define a variable in this method and assign this value to it, 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:
The code copy is as follows:
vat that = this;
Tips:
1. The scope of this variable is always determined by its closest enclosing function.
2. Use a local variable (such as me, self, that) to make this binding available internally.
A simple example:
The code copy 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, which is the MM itself. If we remove this from M, then the returned undefined. So we create an alias for the current scope of this, such as that or self, etc.:
The code copy 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 way you can return a MM. In addition, the bind method of the callback function can be used in ES5.
The code copy 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 methods to the receiver.
other
Another hello, world
I encountered print('Hello')('World') by chance, and then outputted 'Hello, World'.
The so-called higher-order functions seem to be very useful. If you are interested, you can check out the next article.