JS study notes -- 8 --- Function Type

Source: Internet
Author: User

In the browser IE10 JS used in the exercise, the Function type is actually an object. Every Function is actually an instance of the Function type, and each Function has some default attributes and methods. Because a function is an object, the function name is actually a pointer variable pointing to the function object. 1. Declare a function and use the keyword function to declare the function. JS is a weak language, when declaring a parameter, the number of parameters is not limited. You only need to write the parameter name. You do not need to write the parameter keyword var. You do not need to specify the return value and type. If there is a return value, you can directly return the value following the function. Method 1: function func (num1, num2) {return 1;} // num1, num2 is the parameter name, return value is 1 Method 2: declare a function using variables, var box = function (num1, num2) {}; is equivalent to registering the custom attribute box of the window object. Method 3: declare it using the destructor, but it is best not to declare it in this way, because this method will be parsed twice by the browser, and the efficiency is not high. The first time is to parse the entire ECMAScript expression, the second is to parse the list of strings passed in the destructor. var box = new Function ('num1', 'num2', 'Return num1 + num2 '); note that parameters and statements in the Destructor are enclosed in quotation marks. This method can better understand that a Function is an object, function name is a pointer concept 2. Call the function declared in Function Method 1 to directly write the function name to call [fun ()], when calling a function declared in method 2 and method 3, use the variable name to enclose the parameter value to be passed in brackets [box ()]; the return value of a function can be directly assigned to a variable [var box = func (20, 10);], or directly transmitted to another function as a real parameter [alert (func (10, 20);] the function name in ECMAScript is a variable, so the function can also be used as a value. That is to say, not only can one function be passed to another function like a parameter, in addition, one function can be returned as the result of another function // returning a function as the result is equivalent to executing this function, and then returning the return value of this function to the function sum (num1, num2) {return num1 + num2;} function func (num1) {return sum (num1, 10);} alert (func (10 )); // 20 // actually, the function name is an object variable. It executes the function address, which is equivalent to a pointer. // The function name is passed to another function as a parameter, function sumFunc (num1, num2) {return num1 + num2;} function func (sum, num1) {return sum (num1, 10);} alert (func (sumFunc, 10); // 20 JS does not have function overload It is said that when a function is called, the proximity principle will be used to call the function in JS, and the number of allowed callers and called parameters is different, and no error will be reported, however, if the number of parameters is not enough, an error may be reported during execution because some parameters are not assigned values. The parameters are passed back and forth. 3. The internal attribute arguments of the function is a class array, it is used to save the parameters passed by the function. When the array type declares the function, sometimes we do not know how many parameters the caller will pass. For example, we need to calculate the sum of a string of numbers, if the caller passes [func (10, 20...)] instead of an array, when declaring a function object, you do not know how many parameters to declare. In this case, you can use arguments instead of the parameter name in the function. arguments is a class array, the parameter value of the function that owns the object is saved. You can use the index method to obtain the value of the corresponding parameter, using function func () {var res = 0; (Var I = 0; I <arguments. length; I ++) {res + = arguments [I] + "|";} return res;} alert (func (20, 30, 40 )); another important attribute in arguments is callee, which is a pointer variable pointing to a function that owns an array of the arguments class, which is actually the function where arguments is located, it is best to use this attribute in recursion, because if the function name changes, you do not need to change the internal implementation, arguments. callee () always indicates the function itself // use arguments. the benefit of callee is that when the function name is changed, you do not need to change the recursive function. function box (num) {if (num <= 1) {return 1 ;} else {return num * arguments. callee (num-1); // arguments. callee generation The table is the function itself, so it has the same effect as above} alert (box (3 )); // 6 4. The internal property of the function this attribute represents the object where it is located, and this in C # indicates that the object itself is the same, this references the objects in which the function executes operations, or the window in which the function call statement is located is the largest object in JS, declaring a variable in the window object is actually declaring an attribute for the window object. var box = 1 is equivalent to window. box = 1; it is equivalent to this. box = 1; When a function is called in the global scope, this object references window. Declare an object box in the displayed box. this in this box represents the box itself, this. color is the value of the color attribute in the returned box, rather than the color value in the window object. // this indicates the object sitting in, and this in the object box below, it indicates the property of the object box var color = 'red'; // window, var box = {color: 'blue', run: function () {alert (this. color); // blue return this. color ;}} alert (window. color); // Red alert (this. color); // red this indicates the window object, so this. color indicates the window attribute alert (box. run (); // blue window. co = 'hh '; // It is equivalent to the color above and belongs to wi. Alert (this. co); 5. The length attribute of the function indicates the number of parameters that the function wants to receive, is determined by the number of parameters in the parameter list when the function is declared. 6. The prototype attribute of the function stores all the instance methods, that is, the prototype. Under prototype, there are two methods: apply () and call (). These two methods are non-inherited functions and are the methods that every function has. The purpose of these two methods is to call a function in a specific scope, that is, to call a function under a specific object. (Of course, this object may not have already declared this method ), in fact, it is equivalent to setting the value of this object inside the function. It is a bit similar to calling the object method in the reflection of C. Func. apply (): This method has two parameters. The first is to execute the scope of the method, that is, to pass an object, and the second parameter is an array, the array contains the real parameters of the called function func, that is, the value to be passed to func. Of course, the second parameter can be omitted. Func. apply (this, [num1, num2]);. If you call a function, you can use arguments to pass the parameter of this function, provided that there are parameters in this class array. However, it is best to ensure that the class array stores the values of the real parameters you want to pass to the func function. Although the number does not match, there may be no errors, but the business may not be func. call (): This method is the same as the apply () method above. The difference is the parameter. The first method is the same scope and is the same, other parameters are directly passed to the function, rather than passing an array. That is to say, the Order and method of passing parameters are in the form and method of calling the function normally. Func. call (this, num1, num2); the main function of these two methods is to be able to extend the scope on which the function depends, that is, to change the scope of the function running to use this apply () the biggest advantage of extending the scope of the two methods is that the object does not need to have any coupling relationship with the method, that is, the object mentioned above may not have this method, but as long as this object exists, it is OK. [Coupling: the meaning of association, modification and maintenance will have a chain reaction ]. That is to say, there will be no redundant Association operations between the box object and the sayColor () method, such as box. sayColor = sayColor; [This statement does not need to be displayed in the box object. You can also use sayColor. call (box, 'red') or apply to call the method sayColor, and the scope of the sayColor method is within the object box]. // The call () and apply () methods are mainly used to extend the function dependency scope var color = 'red'; var box = {color: 'green'} function sayColor () {return this. color;} alert (sayColor (); // The red object is Alibaba walert (sayColor. call (this); // The red object is Alibaba walert (sayColor. apply (this); // The red object is Alibaba walert (sayColor. call (window); // The red object is called walert (sayColor. apply (window); // The red object is incluwalert (sayColor. call (box); // The green object is boxalert (sayColor. apply (box); // The green object is box

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.