The function prototype of JS

In ECMAScript, the function (function) type is actually an object. Each function is an instance of a function type and has properties and methods as well as other reference types. Because a function is an object, the function name is actually a pointer to the function object.

1, three ways to declare functions

1 The first: the normal way of declaring functions

1 function box (num1,num2) {

2 return num1+num2;

3}

2 The second type: Use variable initialization methods:

1 var box =function (num1,num2) {

2 return num1+num2;

3};

3 The third: How function constructors are used

1 var box =new Function ("Num1", ' num2 ', ' return num1+num2 ');

Summary: The third Way is not recommended: Because to parse the two-time code: The first time: parse the regular ECMAScript code, the second is to resolve the string in the incoming constructor, so affect performance. But we can understand from this syntax that the concept of "function is object, function name is pointer"

2, as a function of the value

The function in ECMAScript itself is a variable, so the function can also be used as a value. That is, you can pass a function to another function as well as a parameter, and you can return a function as the result of another function. Similar to a delegate in C #, the method is passed as a parameter to another method.

Copy Code

1 function box (sum,num) {//Pass functions as arguments to another function

2 return sum (num); Returns the function as the return value

3}

4

5 function sum (num) {

6 return num+10;

7}

8 Alert (Box (sum,10));//20

Copy Code

3, the function inside the property

Inside the function, there are two special objects: arguments and this. Arguments is a class array object that contains all the arguments in the incoming function, the main purpose is to save the function arguments, but this object also has a property called Callee, which is a pointer to the function that owns the arguments object.

Use of the Arguments property:

Copy Code

1 function box () {

2 alert (arguments.length);

3 for (Var i=0;i

4 alert (arguments[i]); Take every parameter you pass in.

5}

4?

7

8 box (1,2,3,4);

Copy Code

Callee Property (is the Arguments property)

Copy Code

1//Replace yourself with Arguments.callee

2 function sum (num) {

3 if (num<=1) {

4 return 1;

5}

6 else{

7 Return num * Arguments.callee (NUM-1);

8}

9}

Alert (SUM (4));//24

Copy Code

This object:

is roughly similar to this in C #. This object refers to the object that the function is to perform an action on, or the scope that the function call statement is in.

PS: When calling a function in a global scope, this object refers to window.

Copy Code

1 var color= ' red ';

2 alert (window.color);//red as long as the object within the global scope is under window

3 alert (This.color)//Red This is located under global scope, this refers to the Window object

4 alert (color);//red can omit window direct output

5

6 window.color= ' Blue '; Equivalent to: Var color= ' Blue ';

7 alert (This.color);//Blue

8 alert (color);//Blue

Copy Code

This is a classic example of this object:

Copy Code

1 var box={

2 color: ' Red ',

3 Saycolor:function () {

4 alert (This.color); The This object refers to a reference to this scope-scoped object (that is, box reference)

5}

6};

7 box. Saycolor ();

8

9 window.color= ' red ';

Ten function Saycolor () {

One alert (this.color);//Because this method is under window, the this reference within the method points to window

12}

13

Saycolor ();//Red

15

var box={

Color: ' Blue '

18};

box. Saycolor=window. Saycolor; After the assignment, the this object in Saycolor points to the current scope, which is the box object

box. Saycolor ()//Blue

Copy Code

4. Anonymous properties and methods

A function object in ECMAScript, so the function also has properties and methods. Each function contains two attributes: Length and prototype. Where length represents the number of named arguments that the function expects to receive

Ps:prototype property: It is the real place to save all instance methods, that is, the prototype. This property. We will introduce them in the Object-oriented chapter. There are two methods under prototype: Apply () and call (), and each function contains the two methods that are not inherited. The purpose of both methods is to call a function in a particular scope, which is actually equal to the value of the This object in the function body

Length Property:

1 function sum (num1,num2) {

2 return num1+num2;

3}

4 alert (sum.length);

Apply () Method:

Copy Code

1 function sum (num1,num2) {

2 return num1+num2;

3}

4

5 function num (num1,num2) {

6//First parameter: The scope to be executed by this method (the scope that this method executes), and the second parameter is the argument to be passed to the SUM function

7 return sum.apply (This,[num1,num2]); parameter array [num1,num2] can be replaced with arguments

8}

9

Alert (num (10,10));

Copy Code

Call () Method:

The call () method performs the same effect as apply, and the difference is that the way they pass the argument is different

1 function box (num1,num2) {

2 return Sum.call (THIS,NUM1,NUM2);//To pass arguments within a function from the second argument rather than passing an array of arguments

3//In fact, you can call the function directly, the above procedure is just to demonstrate the use of apply and calls

4}

5

6 Alert (Box (1,2));

The real place for the call () and apply () method is not above (because the above implementation is meaningless), but rather: changing the scope of the method, impersonating the caller of the method to invoke the method, solving the "coupling" between the objects, reducing the coupling degree

Copy Code

1 var color= ' red ';

2

3 function Saycolor () {

4 alert (This.color);

5}

6 Saycolor ()//Red

7

8 Var box={

9 color: ' Blue '

10};

11

Saycolor.call (box);//blue (changed the scope of the method, but did not use box.) Saycolor=saycolor (too high coupling), reduced coupling) When you run the call (box) method, the Saycolor () environment has become a box object.

Saycolor.call (this);//Red

Saycolor.call (window);//Red

15

box. Say ();

Copy Code

The greatest benefit of the call () and apply () methods is that the scope is expanded and no coupling between objects and methods occurs