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

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 ,这个用 es6 的 let 声明可以解决这个问题,但是我们想探讨的是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
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
前端小课堂 js:函数的创建方式及区别的更多相关文章
- 前端小课堂 js:what is the function?
js 函数: 概念:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. 说白了就是响应用户操作所执行的代码,通过js事件触发,然后调用执行函数里代码的操作. 比如常见的用户点击事件,用户点击 ...
- js函数的创建
1.js 函数的创建有几种方式: 1.1 直接声明 1.2 创建匿名函数,然后赋值 1.3 声明函数,然后赋值给变量 1.4 使用1.3 得到的变量再赋值给变量 1.5 使用函数对象创建函数 < ...
- js两种定义函数、继承方式及区别
一:js两种定义函数的方式及区别 1:函数声明: function sayA() { alert("i am A"); } 2:函数表达式: var sayB = function ...
- js 函数定义的方式
js 函数定义的方式 一.总结 一句话总结: 最常见就下面三种 最常见:function func1([参数]){/*函数体*/} 将匿名函数赋值给变量:var func2=function([参数] ...
- 第163天:js面向对象-对象创建方式总结
面向对象-对象创建方式总结 1. 创建对象的方式,json方式 推荐使用的场合: 作为函数的参数,临时只用一次的场景.比如设置函数原型对象. var obj = {}; //对象有自己的 属性 和 行 ...
- js 对象的创建方式和对象的区别
js一个有三种方法创建对象,这里做一个总结. 1.对象直接量 所谓对象直接量,可以看做是一副映射表,这个方法也是最直接的一个方法,个人比较建议, 1 2 3 4 5 6 7 8 9 10 11 12 ...
- Java中String两种不同创建方式的区别及intern的用法
一, Java有两种创建字符串的方式, String str1 = "abc"; String str2 = new String("abc"); 用双引号创建 ...
- 前端小知识-js
一.对象冒充 function student(name,age){ this.name = name; this.age = age; this.show = function(){ console ...
- 自定义博客cnblogs样式的必备前端小知识——js、jq
JQ.JS相关小知识 任意元素自动点击 $(".editicon").trigger('click') 添加子元素 append() - 在被选元素的结尾插入内容 prepend( ...
随机推荐
- 04 Feasibility of Learning
机器学习是设计算法A,在假设集合H里,根据给定数据集D,选出与实际模式f最为相近的假设g(g可能与f相同,也可能不同). 那什么情况下学习是可行的?即保证g和f是相似的. 1.数据集内的表现g约等于f ...
- 通过UDP广播实现Android局域网Peer Discovering
本文是对个人笔记中内容的整理,部分代码及图片来自互联网,由于不好找到原始出处,所以未加注明. 如有痛感,联系删除. 本文将介绍以下知识点: TCP与UDP的区别: 单播.多播.广播: Java中实现U ...
- 基于MVC和Bootstrap的权限框架解决方案 二.添加增删改查按钮
上一期我们已经搭建了框架并且加入了列表的显示, 本期我们来加入增删改查按钮 整体效果如下 HTML部分,在HTML中找到中意的按钮按查看元素,复制HTML代码放入工程中 <a class=&qu ...
- 使用swagger实现web api在线接口文档
一.前言 通常我们的项目会包含许多对外的接口,这些接口都需要文档化,标准的接口描述文档需要描述接口的地址.参数.返回值.备注等等:像我们以前的做法是写在word/excel,通常是按模块划分,例如一个 ...
- USACO Section 1.1-2 Greedy Gift Givers
Greedy Gift Givers 贪婪的送礼者 对于一群(NP个)要互送礼物的朋友,GY要确定每个人送出的钱比收到的多多少. 在这一个问题中,每个人都准备了一些钱来送礼物,而这些钱将会被平均分给那 ...
- 栈实现getMin
题目 实现一个特殊的栈,在实现栈的基本功能的基础上,在实现返回栈中最小元素的操作. 要求 pop.push.getMin操作的时间复杂度都是O(1). 设计的栈类型可以使用现成的栈结构. 解答 在设计 ...
- Android系统--输入系统(九)Reader线程_核心类及配置文件
Android系统--输入系统(九)Reader线程_核心类及配置文件 1. Reader线程核心类--EventHub 1.1 Reader线程核心结构体 实例化对象:mEventHub--表示多个 ...
- 图解WebGL&Three.js工作原理
“哥,你又来啦?”“是啊,我随便逛逛.”“别介啊……给我20分钟,成不?”“5分钟吧,我很忙的.”“不行,20分钟,不然我真很难跟你讲清楚.”“好吧……”“行,那进来吧,咱好好聊聊” 一.我们讲什么? ...
- JavaEE开发之SpringBoot工程的创建、运行与配置
本篇博客我们就来聊一下如何使用Eclipse+STS插件来创建Spring Boot的工程.Spring Boot可以使我们更容易的使用Spring框架,在Spring Boot中自动配置了好多东西, ...
- Ionic2 + Angular4 + JSSDK开发中的若干问题汇总
前景 目前微信公众号程序开发已经相当火热,客户要求自己的系统有一个公众号,已经是一个很常见的需要. 使用公众号可以很方便的便于项目干系人查看信息和进行互动,还可以很方便录入一些电脑端不便于录入的数据, ...