前端小课堂 js:函数的创建方式及区别

创建函数几种方式.png

js 函数的创建大体有这几种方式:

-1-函数表达式(函数字面量):

说白了就是把一个函数赋值给了一个变量。

var fun1 = function(index){
  alert(index);
}

fun1(1);

函数表达式其中还包括匿名自执行函数,这种方式函数不用调用就会自己执行:
比如:

(function(i){

  alert(i);
  
})(index)

也许你会问我什么时候会用匿名自执行函数呢?给你看个面试题:

for(var i = 0;i < 5;i ++){
  setTimeout(function(){
    alert(i);
  },i*1000)
}

这个函数会输出什么呢?
其实大家应该都知道因为用 var声明的i会每次循环都会被重新赋值所以应该是 5 ,这个用 es6let 声明可以解决这个问题,但是我们想探讨的是setTimeout 没有按照我们想要的事件 alert 这里有很多解决方案,匿名自执行函数就是其一:

for(var i = 0;i < 5;i ++){
  
  (function(time){
    setTimeout(function(){
      console.log(time);
    },time*4000)
  })(i)
  
}

这样就可以解决我们的问题。深究其原理的话,它主要创建一个新的函数作用域,在这个新的函数作用域里面将外面的参数变成了一个局部变量进行的一系列操作吧,个人见解。

-2-函数声明:

会经常用到的一种声明函数的方式。

function fun1(index){
   alert(index);
}
fun1(2);

区别
函数表达式和函数声明的区别在于函数声明在调用前后都没问题,因为js解析代码的时候会将 函数声明的函数前置,函数表达式的话要注意必须提前声明,因为函数表达式最终是通过var将函数赋值给了一个变量,初始值肯定为underfind,在函数表达式前调用的话肯定返回underfind,因为js还没有赋值呢。

** -3- new 函数 (不推荐)**

var fun1 = new Function("参数")

这里的new Function() new Array()、new Object()等相似。

© 著作权归作者所有

文/wbg(简书作者)

原文链接:http://www.jianshu.com/p/a32425f422c5

著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

posted @ 2017-05-24 14:56  奔跑的攻城狮  阅读(441)  评论(0编辑  收藏  举报