Home  >  Article  >  Web Front-end  >  Read this article about JS when you have time

Read this article about JS when you have time

迷茫
迷茫Original
2017-01-23 14:15:241275browse

Functions are the basis for modular programming. To write complex Ajax applications, you must have a deeper understanding of functions.

Functions in JavaScript are different from other languages. Each function is maintained and run as an object. Through the properties of function objects, you can easily assign a function to a variable or pass the function as a parameter. Before continuing, let's take a look at the syntax for using functions:

The following is a quotation fragment:

function func1(…){…}
var func2=function(…){…};
var func3=function func4(…){…};
var func5=new Function();

These are the correct syntax for declaring functions. They are very different from common functions in other languages ​​or the function definition methods introduced before. So why can it be written like this in JavaScript? What is the syntax it follows? These are described below.

 Understanding Function Object

 You can use the function keyword to define a function, and specify a function name for each function, and call it through the function name . When JavaScript is interpreted and executed, functions are maintained as an object, which is the Function Object to be introduced.

Function objects are essentially different from other user-defined objects. This type of object is called an internal object, such as date object (Date), array object (Array), and string object (String). All are internal objects. The constructors of these built-in objects are defined by JavaScript itself: by executing a statement such as new Array() to return an object, JavaScript has an internal mechanism to initialize the returned object, instead of the user specifying how the object is constructed.

In JavaScript, the corresponding type of function object is Function, just like the corresponding type of array object is Array and the corresponding type of date object is Date. You can create a function object through new Function(), or you can Create an object through the function keyword. For ease of understanding, we compare the creation of function objects with the creation of array objects. Let’s look at the array object first: The following two lines of code both create an array object myArray:

The following is a reference fragment:

var myArray=[];
//等价于
var myArray=new Array();

Similarly, the following two lines of code also create a function myFunction:

function myFunction(a,b){
return a+b;
}
//等价于
var myFunction=new Function("a","b","return a+b");

By comparing it with the statement to construct an array object, you can clearly see the essence of the function object. The function declaration introduced earlier is the first way of the above code, and inside the interpreter, when encountering this syntax, a Function object will be automatically constructed, and the function will be stored and run as an internal object. It can also be seen from here that a function object name (function variable) and an ordinary variable name have the same specifications. Both can refer to the variable through the variable name, but the function variable name can be followed by parentheses and a parameter list to perform the function. transfer.

It is not common to create a function in the form of new Function(), because a function body usually has multiple statements. If they are passed as parameters in the form of a string, the readability of the code will be poor. The following is an introduction to its usage syntax:

The following is a quotation fragment:

var funcName=new Function(p1,p2,...,pn,body);

The types of parameters are all strings, p1 to pn represent the parameter name list of the created function, and body represents the created function function body statement, funcName is the name of the created function. You can create an empty function without specifying any parameters, and create an unnamed function without specifying funcName. Of course, such a function has no meaning.

It should be noted that p1 to pn are lists of parameter names, that is, p1 can not only represent a parameter, it can also be a comma-separated parameter list. For example, the following definitions are equivalent:

The following is a reference fragment:

new Function("a", "b", "c", "return a+b+c")
new Function("a, b, c", "return a+b+c")
new Function("a,b", "c", "return a+b+c")

JavaScript introduces the Function type and provides syntax such as new Function() because function objects must use the Function type to add properties and methods.

The essence of a function is an internal object, and the JavaScript interpreter determines how it operates. The function created by the above code can be called using the function name in the program. The function definition issues listed at the beginning of this section are also explained. Note that you can add parentheses directly after the function declaration to indicate that the function is called immediately after creation, for example:

The following is a quotation fragment:

var i=function (a,b){
return a+b;
}(1,2);
alert(i);

This code will display that the value of variable i is equal to 3. i represents the returned value, not the created function, because the brackets "(" have a higher priority than the equal sign "=". Such code may not be commonly used, but when the user wants to This is a good solution for modular design or to avoid naming conflicts

It should be noted that although the following two methods of creating functions are equivalent:

The following are. Quotation fragment:

function funcName(){
//函数体
}
//等价于
var funcName=function(){
//函数体
}

But the former method creates a named function, while the latter method creates an unnamed function, and just makes a variable point to the unnamed function. There is only one difference in usage, which is: For a named function, it can be defined after it is called; for an unnamed function, it must be defined before it is called. For example:

The following is a quotation fragment:

<script language="JavaScript" type="text/javascript">
<!--
func();
var func=function(){
alert(1)
}
//-->
</script>

 This paragraph. statement will generate an error that func is not defined, and:

The following is a quote fragment:

<script language="JavaScript" type="text/javascript">
<!--
func();
function func(){
alert(1)
}
//-->
</script>

  则能够正确执行,下面的语句也能正确执行:

以下是引用片段:

<script language="JavaScript" type="text/javascript">
<!--
func();
var someFunc=function func(){
alert(1)
}
//-->
</script>

  由此可见,尽管JavaScript是一门解释型的语言,但它会在函数调用时,检查整个代码中是否存在相应的函数定义,这个函数名只有是通过function funcName()形式定义的才会有效,而不能是匿名函数。

  函数对象和其他内部对象的关系

  除了函数对象,还有很多内部对象,比如:Object、Array、Date、RegExp、Math、Error。这些名称实际上表示一个类型,可以通过new操作符返回一个对象。然而函数对象和其他对象不同,当用typeof得到一个函数对象的类型时,它仍然会返回字符串“function”,而typeof一个数组对象或其他的对象时,它会返回字符串“object”。下面的代码示例了typeof不同类型的情况:

以下是引用片段:

alert(typeof(Function)));
alert(typeof(new Function()));
alert(typeof(Array));
alert(typeof(Object));
alert(typeof(new Array()));
alert(typeof(new Date()));
alert(typeof(new Object()));

  运行这段代码可以发现:前面4条语句都会显示“function”,而后面3条语句则显示“object”,可见new一个function实际上是返回一个函数。这与其他的对象有很大的不同。其他的类型Array、Object等都会通过new操作符返回一个普通对象。尽管函数本身也是一个对象,但它与普通的对象还是有区别的,因为它同时也是对象构造器,也就是说,可以new一个函数来返回一个对象,这在前面已经介绍。所有typeof返回“function”的对象都是函数对象。也称这样的对象为构造器(constructor),因而,所有的构造器都是对象,但不是所有的对象都是构造器。

  既然函数本身也是一个对象,它们的类型是function,联想到C++、Java等面向对象语言的类定义,可以猜测到Function类型的作用所在,那就是可以给函数对象本身定义一些方法和属性,借助于函数的prototype对象,可以很方便地修改和扩充Function类型的定义,例如下面扩展了函数类型Function,为其增加了method1方法,作用是弹出对话框显示"function":

以下是引用片段:

Functiothod1=function(){
alert("function");
}
function func1(a,b,c){
return a+b+c;
}
func1.method1();
functhod1();

  注意最后一个语句:funchotd1(),它调用了method1这个函数对象的method1方法。虽然看上去有点容易混淆,但仔细观察一下语法还是很明确的:这是一个递归的定义。因为method1本身也是一个函数,所以它同样具有函数对象的属性和方法,所有对Function类型的方法扩充都具有这样的递归性质。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn