JavaScript function Call Rules

Source: Internet
Author: User
Tags definition constructor functions return jquery library
I hope this will help you understand the different ways in which functions are invoked, and keep your JavaScript code away from bugs. Knowing the value of this is your first step to avoiding bugs. JavaScript function call rule one
(1) Global function call: function Makearray (arg1, arg2) {return [this, arg1, arg2];} It is one of the most common ways to define functions. People who believe in learning JavaScript are not unfamiliar with its invocation. The calling code is as follows: Makearray (' One ', ' two '); => [window, ' One ', ' two ']
This approach can be said to be a global function call. Why is the global function? Because it is a method of the Global object window, we can verify it with the following method: Alert (typeof window.methodthatdoesntexist); => undefined
Alert (typeof Window.makearray); => function
So the way we call Makearray before is the same as the Window.makearray (' One ', ' two ') as the following method is called; => [window, ' One ', ' two ']



JavaScript function call rule two
(1) Object method invocation://creating the object var arraymaker = {someproperty: ' Some value here ', Make:makearray};
Arraymaker.make (' One ', ' two ');  => [Arraymaker, ' One ', ' two ']//Is invoked in the following way: arraymaker[' make ' (' One ', ' two '); => [Arraymaker, ' One ', ' two ']

See the difference between here and now, this value becomes the object itself. You may question why the original definition of the function has not changed, and this has changed?
Very well, and there is the right question. This involves the way a function is passed in JavaScript, which is a standard data type in JavaScript, specifically an object. You can pass them or copy them. It's as if the entire function, the list of parameters and function bodies are copied and assigned to the attribute make in Arraymaker, which is like defining a arraymaker:var Arraymaker = {someproperty: ' some valu     e here ', Make:function (arg1, arg2) {return [this, arg1, arg2]; } };


If you do not make the call rule two clear, you will often encounter a variety of bugs in the event-handling code, for example: <input type= "button" value= "button 1" id= "btn1"/> <input type= "bu Tton "value=" button 2 "id=" btn2 "/> <input type=" button "value=" button 3 "id=" Btn3 "onclick=" buttonclicked (); " />
< script type= "Text/javascript" > Function buttonclicked () {var text = (this = = window)?     ' Window ': this.id; alert (text); var button1 = document.getElementById (' btn1 '); var button2 = document.getElementById (' btn2 ');
Button1.onclick = buttonclicked;    Button2.onclick = function () {buttonclicked (); }; </script> Clicking on the first button will show "BTN1" because it is a method call, this is the object (button element) that belongs to. Clicking on the second button will show "window" because the buttonclicked is called directly (unlike obj.buttonclicked ()), this and the third button, Putting an event handler directly in the label is the same. So click on the third button and the result is the same as the second one.
So please note: Button1.onclick = buttonclicked;    Button2.onclick = function () {buttonclicked (); }; This point is different.

JavaScript function call rule three
Of course, if you're using a jquery library, then you don't have to think so much that it will help rewrite the value of this to make sure it contains references to the current event source element. Use JQuery $ (' #btn1 '). Click (function () {alert (this.id);//jquery ensures ' this ' 'll be the button});
So how does jquery overload the value of this? The answer is: Call () and apply ();
As the function is used more and more, you will find that this is not in the same context as it is, which makes it extremely difficult to communicate.
Functions are also objects in JavaScript, and function objects contain predefined methods, two of which are apply () and call (), which we can use to reset the context.
<input type= "button" value= "button 1" id= "btn1"/> <input type= "button" value= "button 2" id= "btn2"/> <in Put type= "button" value= "button 3" id= "Btn3" onclick= "buttonclicked ();" />
< script type= "Text/javascript" > Function buttonclicked () {var text = (this = = window)?     ' Window ': this.id; alert (text); var button1 = document.getElementById (' btn1 '); var button2 = document.getElementById (' btn2 ');
Button1.onclick = buttonclicked;  Button2.onclick = function () {buttonclicked.call (this); BTN2}; </script>

JavaScript function call rule four
(1) constructor I don't want to delve into the definition of types in JavaScript, but at the moment we need to know that there are no classes in JavaScript, and that any custom type requires an initialization function, using a prototype object (as an attribute of the initialization function)     Defining your type is also a good idea, let's create a simple type//declaration of a constructor function Arraymaker (arg1, arg2) {this.someproperty = ' whatever '; This.thearray = [This, arg1, arg2];     //Declares the instantiation method Arraymaker.prototype = {somemethod:function () {alert (' somemethod called ');     }, Getarray:function () {return this.thearray; } };
var am = new Arraymaker (' One ', ' two '); var other = new Arraymaker (' A ', ' second ');
Am.getarray (); => [AM, ' one ', ' two '] Other.getarray (); => [Other, ' A ', ' second ']
A very important and noteworthy thing is the new operator that appears in front of the function call, and without that, your function is like a global function, and the attributes we create will be created on the Global Object (window), and you don't want that. Another point, because there is no return value in your constructor, so if you forget to use the new operator, some of your variables will be assigned to undefined.
So constructor functions start with uppercase letters as a good habit, which can serve as a reminder that you should not forget the new operator before you call. The code in the initialization function is similar to the initialization function you write in other languages. This value will be the object you will create.

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.