js中，函数的两种命名方式-声明式、函数表达式 & 自执行匿名函数 (function(){})()之删除对象中的属性

js中，函数的两种命名方式-声明式、函数表达式 & 自执行匿名函数 (function(){})()之删除对象中的属性

1、函数的两种命名方式

1.1、声明式

声明式会导致函数提升，function会被解释器优先编译。即我们用声明式写函数，可以在任何区域声明，不会影响我们调用。

// function XXX(){}

//函数的声明
function f1() {
   console.log("我是函数");
}
f1();
1
2
3
4
5
6
7

1.2、函数表达式

经常使用，函数表达式中的function则不会出现函数提升。而是JS解释器逐行解释，到了这一句才会解释。

因此如果调用在函数表达式之前，则会调用失败。

1

var k = function(){}

fn1();
function fn1(){}//可以正常调用
 
fn2();
var fn2 = function(){}//无法调用
1
2
3
4
5
6
7

产生的原因：

函数表达式加上()，是可以直接调用的。

但是如果是对声明式的后部加上()则是会被编译器忽略。

var fn2 = function(){}();//对，就是这样
function fn1(){}();//会被忽略
1
2

而平常的function(){}则是一种声明式，如果加上()括号后，则会被编译器认为是函数表达式，（加上±号都可以），从而可以用()来直接调用。

（function fn1(){}）();
1

2

//函数表达式（推荐使用）
var ff=function () {
   console.log("我也是一个函数");
};
ff();
1
2
3
4
5

1.3、区别

函数声明和函数表达式的区别：

函数声明如果放在if-else的语句中,在IE8的浏览器中会出现问题，所以宁愿用函数表达式,都不用函数声明。

//函数声明
//    if(true){
//      function f1() {
//        console.log("哎呦，不错呦");
//      }
//    }else{
//      function f1() {
//        console.log("哇，不好啦");
//      }
//    }
//    f1();
 
 
//函数表达式
var ff;
if(true){
   ff=function () {
     console.log("哎呦，不错呦");
   };
}else{
   ff=function () {
      console.log("哇，不好啦");
   };
}
ff();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

2、自执行匿名函数

自执行函数，即定义和调用合为一体。

我们创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，因此在执行完后很快就会被释放，关键是这种机制不会污染全局对象。

常见格式：

(function() { /* code */ })();
1

• 包围函数（function(){})的第一对括号向脚本返回未命名的函数，随后一对空括号立即执行，返回的未命名函数，括号内为匿名函数的参数。

• 作用：可以用它创建命名空间，只要把自己所有的代码都写在这个特殊的函数包装内，那么外部就不能访问，除非你允许(变量前加上window，这样该函数或变量就成为全局)。各JavaScript库的代码也基本是这种组织形式。

自执行函数的作用主要为 匿名 和 自动执行,代码在被解释时就已经在运行了。

// 下面2个括弧()都会立即执行  
(function () { 
　　　//我是匿名方式1----推荐使用这个----这种经常用来构建沙箱模式
 } ()) 　
(function () { 
　　　//我是匿名方式2
 })()
  
// 由于括弧()和JS的&&，异或，逗号等操作符是在函数表达式和函数声明上消除歧义的  
// 所以一旦解析器知道其中一个已经是表达式了，其它的也都默认为表达式了  
var i = function () { return 10; } ();  
true && function () { /* code */ } ();  
0, function () { /* code */ } ();  
  
// 如果你不在意返回值，或者不怕难以阅读
// 你甚至可以在function前面加一元操作符号  
!function () { /* code */ } ();  
~function () { /* code */ } ();  
-function () { /* code */ } ();  
+function () { /* code */ } ();  
  
// 还有一个情况，使用new关键字,也可以用，但我不确定它的效率  
// http://twitter.com/kuvos/status/18209252090847232  
new function () { /* code */ }  
new function () { /* code */ } () // 如果需要传递参数，只需要加上括弧()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

3、实例-自执行匿名函数，实现删除对象中的属性

const person = {
  name: '李世民',
  gender: 'male',
  age: 24
};

 // 删除目标对象的某一个属性
// 1.1、简化版—— js中的自执行匿名函数 (function(){})()
const result = (({name, gender}) => ({name,gender}))(person)
console.log(result) // {name: '李世民', gender: 'male'}
console.log(person) // {name: '李世民', gender: 'male', age: 24}

// 1.2、解释版—— 普通函数
const result = ({name, gender}) => {
  // console.log(name,gender);
   return ({name,gender})
}
// result(person)

console.log(result(person)) // {name: '李世民', gender: 'male'}
console.log(person)  // {name: '李世民', gender: 'male', age: 24}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21