JS进阶之---函数,立即执行函数
一、函数
函数声明、函数表达式、匿名函数
函数声明:使用function关键字声明一个函数,再指定一个函数名,叫函数声明。function name () { … }
函数表达式:使用function关键字声明一个函数,但未给函数命名,最后将匿名函数赋予一个变量,叫函数表达式。var name = function(){ ... }
匿名函数:使用function关键字声明一个函数,但未给函数命名,所以叫匿名函数。function () { ... }
调用时的区别
name(); //正常,因为‘提升'了函数声明,函数调用可在函数声明之前
function name(){ ... } name(); //报错,变量name还未保存对函数的引用,函数调用必须在函数表达式之后
var name=function(){ ... }
函数参数传递方式:按值传递
我们知道,函数的参数在进入函数后,实际是被保存在了函数的变量对象中,因此,这个时候相当于发生了一次复制。
var a = 20;
function fn(a) {
a = a + 10;
return a;
}
fn(a);
console.log(a); // var a = { m: 10, n: 20 }
function fn(a) {
a.m = 20;
return a;
}
fn(a);
console.log(a); // { m: 20, n: 20 }
函数参数传递方式是按值传递,只不过当我们期望传递一个引用类型时,真正传递的,只是这个引用类型保存在变量对象中的引用而已。
二、立即执行函数
两种javascript立即执行函数的常见写法。
(function(){
…
})() //(...)()形式
(function(){
…
}()) //(...())形式
在函数的后面加上括号,就能变成立即执行函数吗?
1.函数表达式后面加括号
var name=function(){
alert('Hello World');
}(); //函数表达式。后面加括号,当javascript引擎解析到此处时能立即调用函数
2.匿名函数后面加括号
function(){
console.log('Hello World');
}(); //匿名函数方式。后面加括号,报语法错误。虽然匿名函数属于函数表达式,但是未进行赋值操作,所以javascript引擎将开头的function关键字当做函数声明,报错:要求需要一个函数名。
3.函数声明方式后面加括号
function name(){
alert('Hello World');
}(); //函数声明方式,此时相当于对匿名函数加了名字。后面加括号,还是报错,Uncaught SyntaxError: Unexpected token )。在一个表达式后面加上括号(),该表达式会立即执行,但是在一个语句后面加上括号(),它的意思只是分组操作符。
function name(){
alert('Hello World');
}(1); //如果在括弧()里传入一个表达式,将不会有异常抛出.但是函数依然不会执行。因为它完全等价于,在一个function声明后面,又声明了一个毫无关系的表达式
回头看看( function(){…} )()和( function (){…} () ),要在函数体后面加括号就能立即调用,则这个函数必须是函数表达式,不能是函数声明。
所以只需要用大括弧将代码括住就行了,因为JavaScript里括弧()里面不能包含语句,所以在这一点上,解析器在解析function关键字的时候,会将相应的代码解析成function表达式,而不是function声明。
(function(a){
console.log(a); //
})(123); //后面括号里传入了函数执行的参数。如果这个参数是外部的变量,将会形成闭包。这个变量也会保存在这个函数中。
三、模块
提到立即执行函数,总会想到模块,因为模块通常用立即执行函数的方式去创建。
一个模块可以包括:私有变量、私有方法、公有变量、公有方法。
(function() {
// 私有变量
var age = 20;
var name = 'Tom';
// 私有方法
function getName() {
return `your name is ` + name;
}
// 公有方法
function getAge() {
return age;
}
// 将公有方法引用保存在外部执行环境的变量中,形成闭包,防止该执行环境被垃圾回收
window.getAge = getAge;
})();
JS进阶之---函数,立即执行函数的更多相关文章
- js进阶 14-3 如何接收load函数从后台接收到的返回数据
js进阶 14-3 如何接收load函数从后台接收到的返回数据 一.总结 一句话总结:load方法的回调函数的参数即可接收从后台的返回数据. 1.load方法的回调函数的参数是什么? 语法:load( ...
- JS匿名函数自执行函数
JS匿名函数自执行函数:(function(){})();(function(){}) 这是一个函数,函数后面接(),则是调用函数 比如(function(arg){console.log(arg); ...
- Node.js进阶篇-koa、钩子函数、websocket、嵌入式开发
代码地址如下:http://www.demodashi.com/demo/12932.html 一.简介 koa是由Express原班人马打造的,致力于成为一个更小.更富有表现力.更健壮的We ...
- js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么
js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么 一.总结 一句话总结:两者都是对表单进行序列化,serializeArray()返回的是json ...
- 学习js函数--自执行函数
我在写代码时候经常会在tpl的<script>里写类似的代码: $(function(){ alert("我好饿"); }); 刚开始的时候只知道写了它不需要调用,直接 ...
- js中 函数声明/函数表达式/匿名函数/箭头函数/立即执行函数
函数声明: function add(a, b) { // ... } 1.顾名思义,声明一个函数, 用关键字 “function” 来告诉,这是一个函数. 2.任何地方,想用就可以拿过来使用 函数表 ...
- 函数——箭头函数&自执行函数(二)
一.箭头函数是在es6中添加的一种规范,它相当于匿名函数,简化了函数的定义. 1.语法 a.function用var,let,cost来表示: b.参数要写在第一个等号后面: 参数有多个,需要加一 ...
- js中怎么写自执行函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- (转)在网页中JS函数自动执行常用三种方法
原文:http://blog.sina.com.cn/s/blog_6f6b4c3c0100nxx8.html 在网页中JS函数自动执行常用三种方法 在网页中JS函数自动执行常用三种方法 在HTML中 ...
- JS函数自动执行
关于让网页中的JavaScript函数自动执行,方法就多洛,但是万变不离其宗,下面给大家介绍一下! 前提条件,网页中必须有JS函数代码,或者,使用文件导入的方法也行: 在HTML中的Head区域中,有 ...
随机推荐
- python基础小结
1.常用的格式符号 2.input函数 3.在程序中,看到了%这样的操作符,这就是python中的格式化输出 age = 18 name = "xiaohua" print(&qu ...
- MySQL ORDER BY主键id加LIMIT限制走错索引
背景及现象 report_product_sales_data表数据量2800万: 经测试,在当前数据量情况下,order by主键id,limit最大到49的时候可以用到索引report_produ ...
- Python 练习:使用 * 输出直角三角形
正方向 height = int(input("please input height: ")) tmp = 1 while tmp <= height: width = t ...
- layui 数据表格+分页+搜索+checkbox+缓存选中项数据
在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用. 主要功能是使用数据表格, 做分页,做搜索, 还有checkbox, 支持全选. 当选中一些数据的时候, 数据切换页面数据在切换回来后, ...
- CSS中的sprites
CSS的sprites(雪碧图,精灵图) *三个名字都要记住 定义:就是将界面上需要的小的导航按钮图标,小图标整合成一张背景图片 然后用background-position来实现背 ...
- Linux 改动inittab文件及忘记密码等导致无法进入系统的解决办法
改动inittab文件及忘记密码等导致无法进入系统的解决办法[摘] by:授客 QQ:1033553122 inittab是linux的系统启动模式配置文件,在”/etc“文件目录下没,其内容是: # ...
- Java并发编程(十三)线程间协作的两种方式:wait、notify、notifyAll和Condition
在现实中,需要线程之间的协作.比如说最经典的生产者-消费者模型:当队列满时,生产者需要等待队列有空间才能继续往里面放入商品,而在等待的期间内,生产者必须释放对临界资源(即队列)的占用权.因为生产者如果 ...
- 【Python】keras使用Lenet5识别mnist
原始论文中的网络结构如下图: keras生成的网络结构如下图: 代码如下: import numpy as np from keras.preprocessing import image from ...
- 前端测试框架jest 简介
转自: https://www.cnblogs.com/Wolfmanlq/p/8012847.html 作者:Ken Wang 出处:http://www.cnblogs.com/Wolfmanlq ...
- Python之随机森林实战
代码实现: # -*- coding: utf-8 -*- """ Created on Tue Sep 4 09:38:57 2018 @author: zhen &q ...