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区域中,有 ...
随机推荐
- 【WebSocket No.1】实现服务端webSocket连接通讯
前言 现阶段socket通信使用TCP.UDP协议,其中TCP协议相对来说比较安全稳定!本文也是来讲解TCP为主(恕在下学艺不精). 下面是个人理解的tcp/ip进行通讯之间的三次握手! 1.客户端先 ...
- int**a = new int[5][6] 怎么delete
int **a = new int[5][6],这个根本编译不过去吧. 如果你想new一个二维数组出来,应该这样: int** a= new int*[5]; for (int i = 0; i &l ...
- blfs(systemv版本)学习笔记-编译安装ligtdm显示管理器
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! ligtdm带有显示管理器和登录器,参照我的笔记安装xorg和i3后安装lightdm,就可以组成一个简易的桌面环境了 下面是l ...
- blfs(systemv版本)学习笔记-配置远程访问和管理lfs系统
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 要实现远程管理和配置lfs系统需要配置以下软件包: 前几页章节脚本的配置:https://www.cnblogs.com/ren ...
- Python sys 模块
import sys # 把命令行参数返回一个 List,第一个元素是程序本身的路径 print(sys.argv) # 命令行运行 python3 sys_model.py klvchen hell ...
- 微信 H5 支付流程以及一些坑
原文:https://blog.niceue.com/front-end-development/wechat-h5-payment-process-as-well-as-some-pits.html ...
- CSS中的行内元素和块级元素
我们在构造页面时,会发现有的元素是上下排列的,而有的则是横向排列的,这是为啥子呢 看看上图,我们也没给他设置啥子属性咋就不一样了,其实是因为每个元素都有默认的 display 属性,比如 div ...
- 开发Hexo主题(一)
Hexo是一款静态博客工具,由Node.js编写 在博客根目录的themes下,新建文件夹(文件夹名为主题名) 主题目录结构如图 这里使用模版引擎为Ejs 在Layout目录下新建index.ejs文 ...
- 关于Bootstrap fileinput 上传新文件,移除时触发服务器同步删除的配置
在Bootstrap fileinput中移除预览文件时可以通过配置initialPreviewConfig: [ { url:'deletefile',key:fileid } ] 来同步删除服务器 ...
- 二层协议--STP协议总结
生成树协议的技术实现与配置注意点 一.stp协议的用途 二.stp协议的运行机制 三.stp协议规范