JS Basics Review: Reference types (iv)

Each of these functions 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 a function object and is not bound to a function.

The declaration of a function has the following three forms:

function sum (num1,num2) {return num1+num2;} Using function declaration Syntax definitions

var sum=function (num1,num2) {return num1+num2;} Use function expressions to define

var sum=new function ("Num1", "num2", "return num1+num2");//Use function constructor definition

If a function is defined using the third method, it will result in parsing the code two times (parsing the regular ECMAScript code for the first time, parsing the string in the incoming constructor for the second time), thus affecting performance and is therefore not recommended.

In the previous two function definition forms, the parser will first read the function declaration and make it available before executing any code, and as for the function expression, it must wait until the parser executes to the line of code it is in before it is actually interpreted. So if you use a function expression to define a function, the call will be made before the code executes to that line, and there will be no similar error if the function declaration is used to define the function.

In addition, you can also use function declarations and function expressions, such as Var sum=function sum () {}. But this syntax will be an error in Safari.

Because the function name is just a pointer to a function, the function name is no different from the other variables that contain the pointer to the object, in other words, a function may have multiple names.

function sum (num1,num2) {return num1+num2;}

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

var anothersum=sum;//using the function name without parentheses is to access the function pointer, not the calling function

Alert (Anothersum (10,10));//20

sum=null;//here to set sum to NULL to sever it from the function

Alert (Anothersum (10,10));//20, it is still normal to call proof that sum is just a pointer and not a function

Imagining function names as pointers also helps to understand why there is no concept of function overloading in ECMAScript.

In ECMAScript, if you declare two functions of the same name, the result is that the function that follows will overwrite the previous function.

function Addsomenumber (num) {return num+100;}

function Addsomenumber (num) {return num+200;}

var result=addsomenumber (100);//300

Because the function name in ECMAScript itself is a variable, the function can also be used as a value.

function Callsomefunction (somefunction,someargument) {return someFunction (someargument);}

This function takes two arguments, the first parameter is a function, and the second argument is a value to pass to the function.

function Add10 (num) {return num+10;}

var result1=callsomefunction (add10,10);

alert (RESULT1);//20

function getgreeting (name) {return "Hello," +name;}

var result2=callsomefunction (getgreeting, "Nicholas");

alert (RESULT2);//"Hello,nicholas"

The Callsomefunction () function here is generic, that is, whatever function is passed in the first argument, it returns the result after the first argument is executed.

Of course, you can also return another function from one function.

function Createcomparisonfunction (PropertyName) {

return function (OBJECT1,OBJECT2) {

var value1=object1[propertyname];

var value2=object2[propertyname];

if (value1<value2) {return-1;}

else if (value1>value2) {return 1;}

Else{return 0;}

};

}

var data=[{name: "Zachary", Age:28},{name: "Nicholas", age:29}];

Data.sort (createcomparisonfunction ("name"));

alert (data[0].name);//nicholas

Data.sort (Createcomparisonfunction ("Age"));

alert (data[0].name);//zachary

Inside the function, there are two special objects: arguments and this.

Where arguments is a class array object that contains all the arguments passed into the function, and the object has a property called Callee, which is a pointer to the function that owns the arguments object.

This property can be used to remove the function name of the function body code coupling state, following a factorial function as an example:

function factorial (num) {if (num<=1) {return 1;} Else{return num*factorial (num-1);}}

Here the execution of this function is tightly coupled with the function name.

function factorial (num) {if (num<=1) {return 1;} Else{return Num*arguments.callee (num-1);}}

In this rewritten function body, no function name is consumed, so whatever name you use to reference the function can be called normally

var truefactorial=factorial;

Factorial=function () {return 0;}

Alert (Truefactorial (5));//120

Alert (factorial (5));//0

Another special object inside the function is the environment object that This,this refers to as the function to execute.

Window.color= "Red";

var o={color: "Blue"};

function Saycolor () {alert (this.color);}

Saycolor ();//"Red"

O.saycolor=saycolor;

O.saycolor ();//"Blue"

ECMASCRIPT5 also normalizes the properties of another function object: caller. In addition to the earlier versions of opera, other browsers support attributes that are not defined in this ECMASCRIPT3.

This property holds a reference to the function that called the current function, and if the current function is called in the global scope, its value is null.

function outer () {inner ();}

function inner () {alert (inner.caller);}

Outer ();//The code above causes the source of the outer () function to be displayed in the alert box

Because outer () calls inner (), Inner.caller points to outer (), and to achieve looser coupling, the same information can be accessed through Arguments.callee.caller.

function outer () {inner ();}

function inner () {alert (arguments.callee.caller);}

Outer ();//ie, Firefox, Chrome, Safari, opera9.6+ all support caller properties

When the function is running in strict mode, accessing Arguments.callee causes an error and cannot assign a value to the caller property of the function, otherwise it can result in an error.

ECMASCRIPT5 also defines the Arguments.caller property, but in strict mode it causes an error, and in non-strict mode This property is always undefined.

This attribute is defined to differentiate between the caller properties of Arguments.callee and functions, all of which are designed to enhance the security of the language.

The functions in ECMAScript are objects, each function contains two properties: Length and prototype.

Where the Length property represents the number of named arguments that the function expects to accept.

function Sayname (name) {alert (name);}

function sum (num1,num2) {return num1+num2;}

function Sayhi () {alert ("hi!");}

alert (sayname.length);//1

alert (sum.length);//2

alert (sayhi.length);//0

For reference types in ECMAScript, prototype is the real place where all of their instance methods are saved, and methods such as ToString () and valueof () are actually stored under the prototype name, but are accessed through the instance of their respective object. The ECMAScript5 total prototype property is not enumerable, so use for-in cannot be found.

Each function in ECMAScript contains two non-inherited methods: Apply () and call ().

The purpose of both methods is to invoke the function in a specific scope, which is actually equivalent to setting the value of the This object in the function body.

function sum (num1,num2) {return num1+num2;}

function CallSum1 (num1,num2) {return sum.apply (this,arguments);} Incoming Arguments Object

function callSum2 (num1,num2) {return sum.apply (this,[num1,num2]);} Incoming array

Alert (CALLSUM1 (10,10));//20

Alert (callSum2 (10,10));//20

The call () method works the same as the Apply () method, where the difference is that the parameters are accepted differently, and the arguments passed to the function must be enumerated individually when using the calling () method.

function Callsum (num1,num2) {Retrun sum.call (this,num1,num2);}

Alert (Callsum (10,10));//20

In fact, the transfer of parameters is not where these two methods are used, and their real strength is the ability to expand the scope in which functions are run.

Window.color= "Red";

var o={color: "Blue"};

function Saycolor () {alert (this.color);}

Saycolor ();//red

Saycolor.call (this);//red

Saycolor.call (window);//red

Saycolor.call (o);//blue

A method is also defined in ECMASCRIPT5: Bind ().

This method creates an instance of a function whose this value is bound to the value passed to the bind () function.

Window.color= "Red";

var o={color: "Blue"};

function Saycolor () {alert (this.color);}

var objectsaycolor=saycolor.bind (o);

Objectsaycolor ();//blue

Browsers that support the bind () method are ie9+, firefox4+, safari5.1+, Opera12, and Chrome.