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区域中,有 ...
随机推荐
- WebService学习概念总结
概念总结:WebSerevice是一种跨编程语言和跨操作系统平台的远程调用技术传输协议:HTTP技术构成:XML+XSD,SOAP,WSDL XML封装数据格式,解决数据表示问题 XSD定 ...
- Nullable<System.DateTime>日期格式转换 (转载)
一.问题 1.html页面中时间显示出错,数据库中时间是正确的. 原因:没有把DateTime转成String类型. 2. 在C#中,发现不能直接使用ToString("yyyy-MM-d ...
- 【nginx】详细配置说明
———————————————————————相关文章———————————————————————————— Centos之安装Nginx及注意事项 [Linux]nginx常用命令 ——————— ...
- tortoisegit安装
1.下载tortoisegit:https://tortoisegit.org/download/ 2.下载git 64位 3. 双击开始安装,选择默认,点击下一步 4.接着是选择安装目录,可以保持默 ...
- Flash饼状图统计代码
index.html文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- jQuery:SP.NET Autocomplete Textbox Using jQuery, JSON and AJAX
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jQueryAutocomp ...
- vue-cli脚手架之webpack.test.conf.js
webpack单元测试配置: // This is the webpack config used for unit tests. var utils = require('./utils')//ut ...
- 【转】Maya Mel – Search String in String
转自:http://schiho.com/?p=179 Hi, this is a little script which returns a 0 or 1 if the searched text ...
- Python 基于python操纵redis入门介绍
基于python操纵redis入门介绍 by:授客 QQ:1033553122 测试环境 redis-3.0.7 CentOS 6.5-x86_64 python 3.3.2 基于Python操作R ...
- Angular基础(三) TypeScript
一.模仿Reddit a) 运行ng new –ng4angular-reddit创建应用,从随书代码中复制样式文件,新建组件app-root,代码为: 界面可以看到了: b) 对于界面输入的数据,获 ...