When the function executes, this always points to the object that called the function. To determine the point of this is to judge who this function belongs to.
In the book "The Essence of JavaScript", the scene of this is divided into four categories, simply to say:
object is pointed to the calling object
Point to Global object without calling Object
The new object is pointed to by using new construct
Change the meaning of this by using apply or call or bind.
1) When a function has a owning object: Point to the owning object
When a function has a owning object, it usually passes. An expression called, at which point this naturally points to the owning object. For example, the following:
?
123456789101112 |
var myObject = {value: 100};
myObject.getValue =
function () {
console.log(
this
.value);
// 输出 100
// 输出 { value: 100, getValue: [Function] },
// 其实就是 myObject 对象本身
console.log(
this
);
return this
.value;
};
console.log(myObject.getValue());
// => 100
|
GetValue () belongs to the object MyObject and is performed by Myojbect. Called, so this is a pointer to the object myObject.
2) function does not belong to object: Point to Global object
?
12345678910111213 |
var myObject = {value: 100};
myObject.getValue =
function () {
var foo =
function () {
console.log(
this
.value)
// => undefined
console.log(
this
);
// 输出全局对象 global
};
foo();
return this
.value;
};
console.log(myObject.getValue());
// => 100
|
In the above code block, the Foo function is defined in the GetValue function body, but in fact it does not belong to GetValue or MyObject. Foo is not bound to any object, so when called, its this pointer points to global object globals.
It is said that this is a design error.
3) This in the constructor: point to New object
JS, we call the constructor with the new keyword, at which point this is bound to the object.
?
1234567 |
var SomeClass = function (){ this .value = 100; } var myCreate = new SomeClass(); console.log(myCreate.value); // 输出100 |
By the way, in JS, constructors, ordinary functions, object methods, closures, these four have no definite boundaries. The boundaries are in people's hearts.
4) Apply and call calls and bind bindings: point to bound objects
The Apply () method accepts two parameters the first is the scope of the function run, and the other is a parameter array (arguments).
Call () method The meaning of the first parameter is the same as the Apply () method, except that the other parameters need to be enumerated.
In a nutshell, call is closer to the way we normally invoke a function, and apply requires that we pass an array in array form to it. They can be converted to each other.
?
123456789101112 |
var myobject = {value:100}; var foo = function () {   Console.log ( this foo (); //global variable Globals foo.apply (myObject); //{value:100} foo.call (myObject); //{value:100} var Newfoo = Foo.bind (myObject); newfoo (); //{value:100} |
This is the whole content of this article, I hope you can like it.
Four ways to use this in "Go" javascript