The this point in JavaScript.

Source: Internet
Author: User

First, the functions in JavaScript

Before you know this point, figure out how the execution environment is created when the function executes, so that you can understand the this point in JavaScript more clearly.

function fn (x,y,name) {    var str1=x;     var str2=y;
  This.name=name; function () { alert (STR1,STR2); }}
FN (1,1,admin);

WHEN FN (1,1,admin) is called, the function first creates an active object, also called a variable object, and then creates an array-like arguments object for the function call to hold the passed arguments, then assigns the scope chain to the execution environment, initializes the variables, The function interior is initialized to undefined except for the arguments and function declarations, and finally assigns a value to the This keyword, at which point the function environment is created successfully, the parameters are assigned individually after success, and finally the alert statement is executed.

Second, the This in JavaScript

Who does this in JavaScript point to?! In different environments this can be changed at any time point, is easy to make people dizzy concept.

Knowing the creation of the function execution environment, and then looking at the this point problem in the function, the function in JavaScript can be executed either as a normal function or as an object, which is one of the reasons why this point is rich. In the mainstream object-oriented language (such as java,c#, etc.), this meaning is very clear, which is to point to the current object. It is usually bound at compile time. In JavaScript, this is bound at run time, which also causes the this in JavaScript to have multiple meanings. This in JavaScript is bound at run time, so this in JavaScript can be a global object, the current object, or any object, depending on how the function is called

The invocation of a function in JavaScript has several ways: as a constructor call, as an object method call, as a function call, and with apply () or call (). Here are some examples to understand.

  1. Call as a constructor

function Fn (a) {     this// this ? }var obj1=New Fn (1//1var obj2=point (2///2

When called as an object method, Job1 is an instantiated object created from a constructor, and This.a=1 in the constructor points to Obj1, which in the constructor points to the instantiated object.

OBJ2 does not create objects through new, so Obj2 is an empty object, obj2.a cannot be found, so it is undefined, which is this.a equivalent to WINDOW.A.

  2. Object Method Invocation

var obj={    x:1,    fn:{        fn1:function  () {            Console.log (  This . x);    }     // undefined

The This in the object method call points to the object that contains it, and here you only need to be aware that the object created by the new method is only pointing to the object that contains it, FN, and does not point to the parent of FN.

  3 . Called directly as a function

function fn () {    alert (this. a);}; var a="1";
FN ();
Div.onclick=function () {
alert (this);
}

When the function fn () is called, it is started to assign a value to this, first to determine that this is not a new object, so it does not point to the Instanced object, and then is not called by an element, so the window is finally assigned to it.

In the most commonly used click event, the OnClick event is bound by a Div, so in the event, this points to the called element, which is the point to the Div.

  4 . Invoke using call () and apply ()

The function of call () and apply () is to change this point, and their first parameter is the object to which this is directed.

function Fn (x) {      this. x = x;         This function (x) {          this. x = x;      }}    var obj1=New Fn (0var obj2={x:0}; obj1.fn1.apply (Obj2, [1]); obj1.x; 0
// 1

In the above code, OBJ1 is a new instantiation object, so this is a pointer to the instantiated object, which is obj1, so the result of obj1.x is 0, and apply changes the this point when executing the function fn1, so it points to obj2, so obj1.fn1.apply (Obj2,[1]) is actually equivalent to OBJ2.FN1 (1), and apply allows the Fn1 method in Obj1 to be assigned to OBJ2, so the result is 1.

  Iii. Summary

Through the summary of these examples, we can generally summarize the method of judging this, if you use new instantiation of the object, then the function of this point to the instantiation of the object, if it is not a new object, then find whether an element called the function, then this point to invoke its element, If this is not the case, then this points to the global variable window, which can be changed by using call () and apply ().

There are many questions to understand about this in JavaScript, and there are different changes in different "scenes" that need to be used more often. This is my understanding of this point in JavaScript, if there is a mistake, but also to correct.

Also enclosed is a great God translated article as the end, about this in the specific use of problems encountered: http://www.cnblogs.com/yuanzm/p/4150558.html

  

  

The this point in JavaScript.

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.