In-depth understanding of the "this" in JavaScript

Source: Internet
Author: User

has always been to JS in the This , the understanding is not deep enough, also often be confused, recently in the JS * * * "in this book, see the This the explanation, feel very reasonable, the following will share to everyone.

JavaScript is a weakly typed language, a pair that is completely different from other languages This the processing mechanism.

in about five different situations. , This the points are different. Here is a description of each situation.

In the global scope

This

when used in the global scope This , it will point to the global object.

running in the browser JavaScript script, this global object is window .

Function call

Foo ();

here This also points to the global object.

in strict mode ( Strict Mode ), there is no global variable. in this case this will be undefined.

Method invocation

Test.foo ();

in this example, This Pointing Test object.

Call constructor

New Foo ();

If the function tends to and New keyword is used, then we call this function constructor Function . inside the function, This points to the newly created object.

an explicit setting This

function foo (A, B, c) {}

var bar = {};

foo.apply (Bar, [1, 2, 3]);// The array will be expanded, as shown below

Foo.call (bar, 1, 2, 3);// passed to Foo The parameters are: a = 1, b = 2, c = 3

 call  or  APPLY  method, in the function  this  

The rules for function calls are therefore not applicable in the previous example, and This is set to barwithin the foo function .

Common misconceptions

Although most of the situation is said in the past, but the first rule ( Translator Note : This should be the second rule, that is, when you call a function directly, This point to Global object) is considered to be JavaScript the language is another wrong design place because it has never been used for practical purposes.

Foo.method = function () {

function Test () {

// This will be set to the global object (translator Note: The browser environment is window object)

}

Test ();

}

A common misconception is that Test in the This will point to Foo object, which is actually not the case.

in order to Test in the Get to Foo object, we need to have a reference to the Method inside the function, create a local variable to point to Foo object.

Foo.method = function () {

var = this;

function Test () {

        // Use that to point to Foo Object

}

Test ();

}

that It's just a random name, but the name is widely used to point to the outside This object. in the closure section, we can see that This can be passed as a parameter

An assignment expression for a method

Another thing that looks strange is the function alias, which is to assign a method to a variable.

var test =someobject.methodtest;

Test ();

in the example above, Test just like a normal function is called; This will no longer be directed to Someobject object.

Although This The late binding feature does not seem friendly, but it does based on prototype inheritance the soil on which to live.

function Foo () {}

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

function Bar () {}

Bar.prototype =foo.prototype;

New Bar (). method ();

when Method is called, This will point to Bar the instance object.

Attention:

 in the literal declaration syntax of an object,This can'tused to point to the object itself. so var obj = {Me:this} in the Me does not point toObj, because This This can only occur in five of the above cases. Translator Note :In This example, if you are running in a browser,Obj.me equalsWindow object.

Reference Blog: http://www.jb51.net/onlineread/JavaScript-Garden-CN/


This article is from the "7439523" blog, please be sure to keep this source http://7449523.blog.51cto.com/7439523/1626610

In-depth understanding of the "this" in JavaScript

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.