Four call methods of the named Function

Source: Internet
Author: User
Tags mootools

Transferred from:Http://snandy.iteye.com/blog/420000

 

1. () parentheses OperatorThe () operator is commonly used to call/execute a function.

JS Code
  1. // Fun1
  2. Function fun1 (){
  3. Alert ('I was called ');
  4. }
  5. Fun1 ()
  6. // Fun2 with Parameters
  7. Function fun2 (PARAM ){
  8. Alert (PARAM );
  9. }
  10. Fun2 ('I was called ')

 

After ecmascript3 is added to the function with call and apply, the following two methods are available:

2. Call

JS Code
  1. // Fun1
  2. Function fun1 (){
  3. Alert ('I was called ');
  4. }
  5. Fun1.call (null );
  6. // Fun2 with Parameters
  7. Function fun2 (PARAM ){
  8. Alert (PARAM );
  9. }
  10. Fun2.call (null, 'I was called ')

 

3. Apply

JS Code
  1. // Fun1
  2. Function fun1 (){
  3. Alert ('I was called ');
  4. }
  5. Fun1.apply (null );
  6. // Fun2 with Parameters
  7. Function fun2 (PARAM ){
  8. Alert (PARAM );
  9. }
  10. Fun2.apply (null, ['I was called'])

 

4. New(This method is not recommended)

JS Code
  1. // Fun1
  2. Function fun1 (){
  3. Alert ('I was called ');
  4. }
  5. New fun1 ();
  6. // Fun2 with Parameters
  7. Function fun2 (PARAM ){
  8. Alert (PARAM );
  9. }
  10. New fun2 ('I was called ')

OK. From the above call method, there is no difference in the execution results of the four methods. However, if a function returns a value, calling the new method may disappoint you.

JS Code
  1. // Function fun with returned values
  2. Function fun (){
  3. Alert ('I was called ');
  4. Return "Jack ";
  5. }
  6. VaR c = new fun ();
  7. Alert (c); // [object], why not "Jack "?

This is the case,

JS Code
  1. // Function fun with returned values
  2. Function fun (){
  3. Alert ('I was called ');
  4. Return {Name: 'jack '};
  5. }
  6. VaR c = new fun ();
  7. Alert (C. Name); // Jack, returns again normally

Summary:

When calling a function using the new method. If a return value exists, this value is not returned when the returned value is a built-in JavaScript type (basic type) such as string, number, or Boolean;

When the returned value is an object, function, array, or other object types, this object, function, and array are returned.

 

When the returned value is a built-in type (basic type), what does new fun () return?

Bytes ----------------------------------------------------------------------------------------------------------------

Whether the function contains this is discussed. If this is not available, an empty object {} is returned. If this is available, a non-empty object is returned.

 

Define a function without this

JS Code
  1. // The returned value is of the basic type.
  2. Function fun (){
  3. Return "Jack ";
  4. }
  5. VaR c = new fun ();
  6. For (VAR recognition in c ){
  7. Alert (ASD );
  8. }
  9. Alert (c); // [object]

The returned value C is not "Jack". It can be seen that C is an empty object {} after the for in statement is executed and no attribute is output {}.

 

Let's take a look at the function with this. The function with this is actually writing a class. However, due to the flexibility of JS, many strange writing methods have been made.

JS Code
  1. // The returned value is of the basic type.
  2. Function fun (){
  3. This. Name = "Tom ";
  4. Return "Jack ";
  5. }
  6. VaR c = new fun ();
  7. For (VAR recognition in c ){
  8. Alert (ASD); // name
  9. }
  10. Alert (C. Name); // Tom

The returned value is not "Jack". For in outputs the name attribute. The last sentence outputs Tom, indicating that the returned value C is a non-empty object. The Return "Jack" here does not work at all.

Therefore, when the return value of a function is a built-in type (basic type), calling a function using the new method will result in incorrect results.

 

What if the return value of a function is an object, array, or function?

JS Code
  1. // This is not included. The returned value is an object.
  2. Function fun (){
  3. // Assemble an object
  4. VaR OBJ = {};
  5. OBJ. Name = 'andy ';
  6. OBJ. Age = 20;
  7. OBJ. MSG = function (){}
  8. Return OBJ;
  9. }
  10. VaR c = new fun ();
  11. For (VAR recognition in c ){
  12. Alert (ASD); // name, age, MSG
  13. }
  14. Alert (C. Name); // Andy
JS Code
  1. // Contains this, and the returned value is an object
  2. Function fun (){
  3. This. Sex = "man ";
  4. // Assemble an object
  5. VaR OBJ = {};
  6. OBJ. Name = 'andy ';
  7. OBJ. Age = 20;
  8. OBJ. MSG = function (){}
  9. Return OBJ;
  10. }
  11. VaR c = new fun ();
  12. For (VAR recognition in c ){
  13. Alert (ASD); // name, age, MSG
  14. }
  15. Alert (C. Name); // Andy

The output results of the two segments are the same. C contains the name, age, and MSG attributes, but not the sex attributes. It indicates that when the returned value is an object type (object, array, function), new will not use this to construct the object, but will directly return the assembled object.

 

This method is actually a factory method. In applications, more programmers write the first letter of the function name to make it look more like a class.

 

The first letter of the function name is capitalized to conform to the Java class naming rules.

JS Code
  1. /**
  2. * Define a function car
  3. */
  4. Function car (color, doors ){
  5. VaR car = {};
  6. Car. Color = color;
  7. Car. Doors = doors;
  8. Car. MSG = function (){
  9. Alert ("this is a" + this. color + "car, there are" + this. Doors + "doors .");
  10. }
  11. Return car;
  12. }

It looks strange. Car is clearly a class, and it is not like the previous function call. It seems a little different from the article title. But we can use () to call it. You can also use new to call it. Use the new method to make it more like the Java object creation method.

JS Code
  1. // Method 1
  2. VaR C1 = car ('red', 2 );
  3. C1.msg ();
  4. // Method 2
  5. VaR C2 = new car ('black', 4 );
  6. C2.msg ();

This method can also be seen in some JS libraries. For example, a very important function native in mootools. JS, the return value is a function (class ). The class in mootools core is returned by the native function. VaR class = new Native ({...}); of course, you can also directly use () for calling without using new.

 

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.