Javascript learning notes function (2): how this works _ basic knowledge-js tutorial

Source: Internet
Author: User
Compared with other programming languages, Javascript uses this in a completely different way. The value of this varies in five cases. GLOBAL SCOPE

This;
When this is used in the global scope, it points to the global object.
The following describes global objects in detail:

A Global object is an object created before any execution context is entered;
This object only has one copy, and its attributes can be accessed anywhere in the program. The life cycle of the global object ends at the moment when the program exits.
The Math, String, Date, and parseInt attributes of the global object are initialized in the initial creation phase, you can also create additional objects as attributes (which can point to the global object itself ). For example, in DOM, the window attribute of a global object can reference the global object itself.
Therefore, the input window and this. window in the console are the same.

When calling a function

Foo ();
Here, this also points to a global object.

When calling a method

Test. foo ();

In this example, this will point to the test object.

When calling a constructor

New foo ();

A function is called together with the keyword new, which is called a constructor. In this case, this points to the new object in the function.

Explicit setting

function foo(a, b, c) {}//var bar = {};foo.apply(bar, [1, 2, 3]); // array will expand to the belowfoo.call(bar, 1, 2, 3); // results in a = 1, b = 2, c = 3

When the apply and call methods of Function. prototype are used, the value of this is explicitly set as the first parameter of the method.
Therefore, unlike the rule for calling a function, in the above example, this points to bar.

Here we will introduce the call and apply methods:

Call Method:

Syntax: call ([thisObj [, arg1 [, arg2 [, [,. argN])
Definition: call a method of an object to replace the current object with another object.

Apply Method:

Syntax: apply ([thisObj [, argArray])
Definition: apply a method of an object and replace the current object with another object.
Note that this cannot point to the object itself when the object is declared as a literal. As follows:

var obj = {me: this}

Here, this does not point to obj, and the application of this is limited to the above five situations.

Summary

Although most of the above cases are meaningful, this in the second case (that is, when a function is called) is actually rarely used, this is considered another mistake in Javascript design.

Foo.method = function() {  function test() {    // this is set to the global object  }  test();}

As described above, this will point to the global object instead of the Foo function.
To obtain the path pointing to Foo in test, we need to create a local variable pointing to Foo in method.

Foo.method = function() {  var that = this;  function test() {    // Use that instead of this here  }  test();}

That is just a common variable name, but it is often used to point to the external this.
Another interesting thing is related to the function alias. When a method is assigned to a variable.

var test = someObject.methodTest;test();

In the above example, test will be treated as a common function, so according to the second situation (that is, when a function is called), its internal this will point to the global variable rather than the someObject.
Although this late binding seems to be a bad decision, it is actually the basis of the original type inheritance work.

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

When method is called, it points to the Instance Object of Bar.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.