Simple analysis of this usage in JavaScript

Source: Internet
Author: User
Tags constructor

This article mainly introduces the use of this in JavaScript, examples of JavaScript in the use of this and related skills, the need for friends can refer to the

This example describes this usage in JavaScript. Share to everyone for your reference. The specific analysis is as follows:

When I was learning JavaScript, this is not always clear, this is not as well understood as this in Java. I later also read a lot of other people wrote the article, just understand come over. Now put the things that others write to come over, afraid to forget later.

In total, this point is divided into three kinds. Point to Global window, the object, constructor.

Conclusion: In JavaScript, this points to the current object when the function executes. The simple point is that the calling method belongs to which object, and this points to that object.

1. Global window

Simple code

?

1 2 3 4 5 6 var message = ' This in window '; var printmessage = function () {Console.info (this = = window); console.info (this.message); Printmessage ();

Because the calling method Printmessage is part of the window, the output results are:

True this in window

Now, if you change the code more complex,

?

1 2 3 4 5 6 7 8 9 10 11-12 var message = ' This in window '; var printmessage = function () {Console.info (this = = window); console.info (this.message); var obj = {message: ' This in obj ', printmsg:function () {printmessage ();}}; Obj.printmessage ();

At this point the Printmessage method belongs to window, so his this is still pointing to window. The Obj.printmessage method belongs to the Obj object, and look at the following analysis.

So the output is still: true this in window

2. The object

Now look at the object, and slightly change the code

?

1 2 3 4 5 6 7 8 9 10 var message = ' This in window '; var printmessage = function () {Console.info (this = = window); console.info (this.message); var obj = {message: ' This in obj ', printMessage:window.printMessage}; Obj.printmessage ();

Results:

False this in obj

Yes, you're right, or the last step, the Obj.printmessage method belongs to the Obj object, so this is pointing to obj.

OK again disgusting point, look at the code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14-15 16 var message = ' This in window '; var printmessage = function () {Console.info (this = = window); console.info (this.message); var obj = {message: ' This in obj ', printmessage:function () {var obj2 = {message: ' This in Obj2 ', PRINTMESSAGE:WINDOW.P Rintmessage}; Obj2.printmessage (); } }; Obj.printmessage ();

The final call is Obj2.printmessage (), so when executing to this, that this is OBJ2

Results:

False,this in Obj2

Haha, is not the same as you think, who called, pointing to WHO.

3. Constructor function

?

1 2 3 4 5 6 7 var person = function () {this.age = 1; this.name = ' No Name ';}; var p = new person (); Console.info (' age = ' + P.age); Console.info (' name = ' + P.name ');

Results:

Age = 1 name = No name.

So what does the constructor do with this? The previous "Simple understanding of JavaScript prototype chain" has to do analysis of new.

?

1 2 var person = function () {}; var p = new person ();

The new process is split into the following three steps:

(1) var p={}; In other words, initialize an object p

(2) p.__proto__ = Person.prototype;

(3) Person.call (p); That is to say, construct P, which can also be called initialization P

So, call.

Call method

Apply to: Function Object

Invokes one of the object's methods to replace the current object with another object.

Call ([thisobj[,arg1[, arg2[, [,. argn]]]]

Parameters:

Thisobj

Options available. The object that will be used as the current object.

Arg1, Arg2, argn.

Options available. A sequence of method parameters is passed.

Description

The call method can be used to invoke a method instead of another object. The call method can change the object context of a function from the initial context to the new object specified by Thisobj. If the thisobj parameter is not supplied, the Global object is used as a thisobj.

Explain that the call method is actually changing the this point of the default method. The call method is definitely called a method object, and when call is invoked, the this point of the method object becomes the first argument of the calling method, as simple as that.

var p = new person ();

When the constructor person is invoked, it may be handled by call, so that the this point in the person to P,this.age = 1 is equivalent to P.age = 1, which adds the age attribute to Zhang P.

I hope this article will help you with your JavaScript programming.

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.