About this erratic pointing problem in JavaScript

Source: Internet
Author: User

This point to the problem can definitely row JS Top 5 The most difficult and most important problem, beginners often do not know where this point, especially to learn Java and C # People, think I also confused for a long time, until the butterfly book, mainly because of JS and the mainstream object-oriented language java,c# are different (similar problems have problems with the new operator,

For the principle of the new constructor function, see this article:

Http://www.cnblogs.com/windyfancy/p/5167266.html

This does not point to the current object, which is the key to understanding this, the point of this depends on how you call this function of this, in fact, there are only four call patterns, make clear on the status quo. The Butterfly Book (The Essence of JavaScript language) summarizes the most clearly, in JavaScript there are a total of four call patterns: Method invocation mode, function call mode, constructor call mode, Apply/call call mode. These patterns differ on how to initialize the key parameter this.

1. Method invocation pattern (object name. Method Name (), or object name ["Method name"] ())

When a function is saved as a property of an object, we call it a method. When a method is called, this is bound to the object. If a call expression contains a property access expression (that is, a. Point expression or [subscript] subscript expression), then it is used as a method to invoke the

var myObject = {

value:0,

Increment:function (inc) {

This.value + = TypeOf Inc = = = ' Number '? Inc:1;

}

};

Myobject.increment ();

Document.writeln (Myobject.value); 1

Myobject.increment (2);

Document.writeln (Myobject.value); 3

Method can use this to access an object, so it can get or modify the object from the object. This binding to the object occurs at the time of the call. This "super" late binding (very late binding) allows the function to be reused for this height. The method through this to obtain the context of the object to which they belong is called a public method.

2. Function call mode

When a function is not a property of an object, then it is called as a function: var sum = Add (3,4); The value of sum is 7, and when the function is called in this mode, this is bound to the Global object window. This is a language design error, if the language design is correct, when the internal function is called, this should still be bound to the external function of this variable. The consequence of this design error error is that the method cannot use an intrinsic function to help it work because the this of the intrinsic function is bound to the wrong value, so the method cannot share access to the object. Fortunately, you can use the closure feature to save this to a custom variable: If the method defines a variable and assigns it a value of this, the intrinsic function can access this by that variable.

Add a double method to MyObject

myobject.double = function () {

var = this; Solution Solutions

var doublefn = function () {

Self.value = self.value*2;

};

Doublefn ();//called as a function

};

Call a double in the form of a method

Myobject.double ();

Document.writeln (Myobject.getvalue ()); 6

3. constructor function call pattern

Call a function using new, then this function is called constructor function, this constructor function will create a new object, the new object's constructor point to this constructor function.

Function Myfun () {

This.color= "Red";

}

var obj=new myfun ();

Console.log (Obj.color); Red

For the principle of the new constructor function, see this article:

Http://www.cnblogs.com/windyfancy/p/5167266.html

4. Apply/call Call mode

Apply is the most powerful method, you can specify that this is any object, call function and apply, just receive the parameters are different.

var user={

Name: ' Windy ',

Say: ' Hello,world '

}

var obj={

Test:function () {

Alert (this.name+ ': ' +this.say);

}

}

obj.test.apply (user);

About this erratic pointing problem 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.