解析JavaScript函数的多种写法

本文主要分析了JavaScript中函数的几种写法,具体如下:

1、函数的声明和表达式(旧方法,也是最常见的方法) 

1 //函数声明  
2 function aaA(){}  
1  //命名函数表达式  
2 (function aaA(){});  
3 //需要注意的是,因为整个表达式被一对()包裹,函数的作用于仅仅在()内,在()外部无法访问到函数
1  //匿名函数表达式  
2 (function (){}); 

2、通过Function构造器

这也是一种从一开始就存在方法,但是因为书写麻烦等原因,相对使用较少

1  new Function('x','y','return x+y;');  

3、自从ECMAScript 2015(es6)推出以后,又引进了几种新的语法,具体如下:

    (1)not-so-anonymous函数声明

    这是一种新的匿名函数声明形式,如果使用过ES Modules的,就知道这种语法。虽然在表达上它与匿名函数非常相似,但它实际上有一个默认的名称‘default’。

1 export default function(){}  

此处,这个‘default’本身不是有效的标识符,并且没有绑定在该匿名函数上。

    (2)方法定义

    对于以下例子,我们可以很容易发现它定义了匿名和命名函数表达式作为属性的值。这些其实不是不同的语法形式,而是之前讨论的函数表达式的示例,是在初始化对象时编写的。

let object={  
  fn:function(){}  
};  
let object={  
  fn:function aaA(){}  
};  

以上形式最初在ES3中定义,在ES5中引入了访问器属性定义:

1 let object={  
2     get fn(){},  
3     set fn(val){}  
4 };  

 

从ES6开始,JavaScript提供了一个简单的语法来定义方法,这种语法包括文字属性名称和计算属性名称以及访问器形式:

1 let object={  
2     textName(){},  
3     ['computedName'](){},  
4     get ['computedAName'](){},  
5     set ['computedAName'](val){}  
6 };  

我们还可以使用这些新形式作为类声明和表达式中的原型方法和定义:

1 let object={  
2     textName(){},  
3     ['computedName'](){},  
4     get ['computedAName'](){},  
5     set ['computedAName'](val){}  
6 };  
1 //类表达式  
2 let C=class{
3       textName(){},
4       ['computedName'](){},
5       get ['computedAName'](){},
6       set ['computedAName'](val){}
7 };  

以及静态方法:

1  //类声明  
2 class C{     
3   static textName(){},  
4   static ['computedName'](){},  
5   get ['computedAName'](){},     
6   set ['computedAName'](val){}  
7 };  
1 //类表达式  
2 let C=class{     
3     static textName(){},  
4     static ['computedName'](){},  
5     get ['computedAName'](){},  
6     set ['computedAName'](val){}  
7 };  
 

升成器:

升成器有一种特殊的语法,除了箭头函数=>和定义setter/getter方法的时候不能添加之外,可以被添加在其他所有语法形式之中。我们可以通过其生成函数声明、表达式、定义,甚至是构造函数:

1  //生成器声明  
2 function *AaA(){}  
1 //另一种not-so-anonymous生成器声明  
2 export default function *(){}  
1  //命名生成器表达式  
2 //AaA对函数外部不可访问  
3 (function *AaA(){});
1 //匿名生成器表达式  
2 (function *(){});  
1 //方法定义  
2 let object={  
3     *methodName(){},  
4     *['computedName'](){}  
5 };  
1 //类声明中的方法定义  
2 class C{    
3     *methodName(){},  
4     *['computedName'](){}  
5 }  
1 //类声明中的静态方法定义  
2 class C{    
3     static *methodName(){},  
4     static *['computedName'](){}  
5 }  
1 //类表达式中的方法定义  
2 let C=class{    
3     static *methodName(){},  
4     static *['computedName'](){}  
5 }  
1 //类表达式中的静态方法定义  
2 let C=class{    
3     static *methodName(){},  
4     static *['computedName'](){}  
5 }  

随笔一篇,欢迎各位方友斧正

posted @ 2018-02-27 15:40  愚盦  阅读(1499)  评论(2编辑  收藏  举报