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区域中,有 ...
随机推荐
- c#unicode,中文互转
/// <summary> /// 中文转unicode /// </summary> /// <returns></returns> public s ...
- Vue 动态加载组件
为什么要动态加载呢?而不是一次性加载呢? 一次性?你能保证你拿的内容不多,那从性能方面说还是OK的.否则,就该什么时候用,就什么时候取. 得出这想法,源于前几天上班赶产品的故事: A组件是父亲,B组件 ...
- Nginx学习笔记(二)--- 配置虚拟主机
Linux下安装Nginx https://www.cnblogs.com/dddyyy/p/9780705.html 1.虚拟主机介绍 一台服务器分成多个"独立"的主机,每台虚 ...
- HappenBefore
计算机芯片在操作指令的步骤: 1.获取指令 2.指令进行解码 3.去寄存器里取值 4.开始计算结果(操作) 5.将结果写会到寄存器中 执行代码的顺序可能与编写代码不一致,及虚拟机优化代码顺序,则为指令 ...
- layui 数据表格+分页+搜索+checkbox+缓存选中项数据
在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用. 主要功能是使用数据表格, 做分页,做搜索, 还有checkbox, 支持全选. 当选中一些数据的时候, 数据切换页面数据在切换回来后, ...
- CSS--选择符大全(常用css选择符)
(一)元素选择符 E(某个元素,如p) id(使用id,如#idName) class(使用class,如.myclass) 通配符:* (二)关系选择符 包含选择符:E F(E所有的F包含子代,孙代 ...
- pycharm如何新项目如何不默认创建虚拟环境(吐槽)
最近因为工作上的需要,琢磨了一下python,装了pycharm这个号称史上最好的编辑器,还没开始玩,就被整崩溃了. 因为我是刚开始玩这个,写了很多hello world,所以新建项目的时候很多,不知 ...
- Visual Flow 简介
Visual Flow(流) Salesforce提供了几种自动化流程工具,其中的Visual Flow(流)可以用来实现用户界面和逻辑,并对数据进行CRUD(Create 创建,Read 读取,Up ...
- java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderL,spring获取context
今天学习spring项目的时候出现了下面的错误信息: java.lang.ClassNotFoundException: org.springframework.web.context.Context ...
- Java并发编程(九)并发容器
并发容器的简单介绍: ConcurrentHashMap代替同步的Map(Collections.synchronized(new HashMap())),众所周知,HashMap是根据散列值分段存储 ...