JavaScript advanced series-how this works

JavaScript has a set of processing mechanisms completely different from other languages for this. In five different cases, this points to different.

• Within the global scope

• Function call

• Method call

• Call Constructor

• Explicitly set this

• Common Mistakes

• Method value expression

JavaScript has a set of processing mechanisms completely different from other languages for this. In five different cases, this points to different.

Within the global scope

this;

When this is used in all ranges, it will point to the global object.

Function call

foo();

This also points to a global object.

Method call

test.foo();

In this example, this points to the test object.

Call Constructor

new foo();

If a function tends to be used with the new Keyword, we call this function a constructor. Inside the function, this points to the newly created object.

Explicitly set this

Function foo (a, B, c) {} var bar = {}; foo. apply (bar, [1, 2, 3]); // The array will be extended, as shown below foo. call (bar, 1, 2, 3); // The parameters passed to foo are: a = 1, B = 2, c = 3

When the call or apply method on Function. prototype is used, this in the Function will be explicitly set as the first parameter of the Function call.

Therefore, the function call rules are no longer applicable in the above example. In the foo function, this is set to bar.

Common Mistakes

Although most cases have been mentioned, the first rule (note: this refers to the second rule, that is, when a function is called directly, this points to a Global Object) it is considered another incorrect design of the JavaScript language because it has never been used practically.

Foo. method = function () {function test () {// this will be set as a global object (in the browser environment, it is also a window object)} test ();}

A common misunderstanding is that this in test will point to the Foo object, which is actually not like this.

To obtain the reference to the Foo object in test, we need to create a local variable inside the method function to point to the Foo object.

Foo. method = function () {var that = this; function test () {// use that to point to the Foo object} test ();}

That is just a random name, but this name is widely used to point to the external this object. In the closure section, we can see that can be passed as a parameter.

Note: In the literal declaration Syntax of an object, this cannot be used to point to the object itself. Therefore, the me IN var obj = {me: this} does not point to obj, because this may only occur in the preceding five cases. Note: In this example, if you are running in a browser, obj. me is equal to the window object.

Method value expression

Another strange thing is the function alias, that is, assigning a method to a variable.

var test = someObject.methodTest;test();

In the preceding example, test is called as a normal function. Therefore, this in the function is no longer directed to the someObject object.

Although this late binding feature does not seem friendly, it is indeed the soil for survival based on prototype inheritance.

function Foo() {}Foo.prototype.method = function() {};function Bar() {}Bar.prototype = Foo.prototype;new Bar().method();

When method is called, this will point to the Instance Object of Bar.

The above is the working principle of the JavaScript advanced series-this. For more information, see the PHP Chinese website (www.php1.cn )!