# :-: 匿名函数的特点
他就是ready();
1. 他叫做<span style="color:red;">立即运行</span>的匿名函数(也叫立即调用函数)
2. 当一个匿名函数<span style="color:red;">被括起来</span>,然后再在<span style="color:red;">后面加一个括号</span>,这个匿名函数<span style="color:red;">就能立即运行</span>起来!
3. 要使用一个函数,我们就得首<span style="color:red;">先声明它的存在</span>。而我们最常用的方式就是使用function语句来定义一个函数
4. Function 对象
- Function对象是JavaScript里面的<span style="color:red;">固有对象</span>,所有的函数实际上都是一个Function对象。
- 我们先看看,<span style="color:red;">Function对象</span>能不能直接运用构造函数创建一个新的函数呢?答案是肯定的。
``` js
var abc = new Function("x","y","return x*y;");
alert(abc(2,3)); // "6"
```
5.匿名函数就是没有名字,那么就引申到我们应该<span style="color:red;">如何去调用</span>他们的问题?
- 匿名函数的调用 ①
``` js
var abc=function(x,y){
return x+y;
}
alert(abc(2,3)); // "5"
```
上面的操作其实就等于<span style="color:red;">换个方式去定义函数</span>,这种用法是我们比较频繁遇到的。
例如我们在设定一个DOM元素事件处理函数的时候,我们通常都不会为他们定名字,而是赋予它的对应事件引用一个匿名函数。
- 匿名函数的调用 ②
使用()将匿名函数括起来,然后后面再加一对小括号(包含参数列表)。
``` js
alert((new Function("x","y","return x*y;"))(2,3));// "6"
```
6.小括号的作用?
小括号能把我们的<span style="color:red;">表达式组合分块</span>,并且每一块,也就是每一对小括号,<span style="color:red;">都有一个返回值</span>。这个返回值实际上也就是小括号中<span style="color:red;">表达式</span>的返回值。
所以,当我们用一对小括号把匿名函数括起来的时候,实际上<span style="color:red;">小括号对返回的</span>,就是一个匿名函数的Function对象。
因此,小括号对加上匿名函数就如同有名字的函数般被我们取得它的<span style="color:red;">引用位置</span>了。所以如果在这个引用变量后面再加上参数列表,<span style="color:red;">就会实现普通函数</span>的调用形式。
7.函数声明、函数表达式、匿名函数
函数声明:function fnName () {…};使用function关键字声明一个函数,再指定一个函数名,叫<span style="color:red;">函数声明</span>。
函数表达式 var fnName = function () {…};使用function关键字声明一个函数,但未给函数命名,最后将匿名函数<span style="color:red;">赋予一个变量</span>,叫函数表达式,这是最常见的函数表达式语法形式。
匿名函数:function () {}; 使用function关键字声明一个函数,但未给函数命名,所以叫匿名函数,<span style="color:red;">匿名函数属于函数表达式</span>。匿名函数有很多作用,<span style="color:red;">赋予一个变量</span>则创建函数,赋予<span style="color:red;">一个事件</span>则成为事件处理程序或创建闭包等等。
# :-: 函数声明 和 函数表达式的 区别
一、Javascript引擎在解析javascript代码时会‘函数声明提升'(Function declaration Hoisting)<span style="color:red;">当前执行环境(作用域)上的函数声明</span>,而函数表达式必须等到Javascirtp引擎执行到它所在行时,才会从上而下一行一行地解析函数表达式
二、<span style="color:blue;">函数表达式</span>后面可以加括号立即调用该函数,<span style="color:blue;">函数声明</span>不可以,只能以fnName()形式调用
- 案例一:
``` js
fnName();
function fnName(){
...
}
//正常,因为‘提升'了函数声明,函数调用可在函数声明之前
fnName();
var fnName=function(){
...
}
//报错,变量fnName还未保存对函数的引用,函数调用必须在函数表达式之后
```
- 例子二:
``` js
var fnName=function(){
alert('Hello World');
}();
//函数表达式后面加括号,当javascript引擎解析到此处时能立即调用函数
function fnName(){
alert('Hello World');
}();
//不会报错,但是javascript引擎只解析函数声明,忽略后面的括号,函数声明不会被调用
function(){
console.log('Hello World');
}();
//语法错误,虽然匿名函数属于函数表达式,但是未进行赋值操作,
//所以javascript引擎将开头的function关键字当做函数声明,报错:要求需要一个函数名
```
要在函数体后面加括号就能立即调用,则这个函数必须是函数表达式,不能是函数声明。
- 例子三:
``` js
(function(a){
console.log(a); //firebug输出123,使用()运算符
})(123);
(function(a){
console.log(a); //firebug输出1234,使用()运算符
}(1234));
!function(a){
console.log(a); //firebug输出12345,使用!运算符
}(12345);
+function(a){
console.log(a); //firebug输出123456,使用+运算符
}(123456);
-function(a){
console.log(a); //firebug输出1234567,使用-运算符
}(1234567);
var fn=function(a){
console.log(a); //firebug输出12345678,使用=运算符
}(12345678)
```
可以看到输出结果,在function前面加!、+、 -甚至是逗号等都可以起到函数定义后<span style="color:red;">立即执行</span>的效果。而()、!、+、-、=等运算符,都将函数声明<span style="color:red;">转换成</span>函数表达式,消除了javascript引擎识别函数表达式和函数声明的歧义。告诉javascript引擎这是一个函数表达式,不是函数声明,可以在后面加括号,并立即执行函数的代码。
<span style="color:red;">加括号是最安全的做法</span>,因为!、+、-等运算符还会和函数的返回值进行运算,有时造成不必要的麻烦。
# :-: 不过这样的写法有什么用呢?
javascript中<span style="color:red;">没有私有作用域的概念</span>,如果在多人开发的项目上,你在全局或局部作用域中声明了一些变量,可能会被其他人不小心用同名的变量给覆盖掉,根据javascript函数作用域链的特性,可以使用这种技术可以<span style="color:red;">模仿一个私有作用域</span>,用匿名函数作为一个“容器”,“容器”内部可以访问外部的变量,而外部环境不能访问“容器”内部的变量,所以( function(){…} )()内部定义的变量不会和外部的变量发生冲突,<span style="color:red;">俗称“匿名包裹器”或“命名空间”</span>。
JQuery使用的就是这种方法,将JQuery代码包裹在( function (window,undefined){…jquery代码…} (window)中,在全局作用域中调用JQuery代码时,可以达到<span style="color:red;">保护JQuery内部变量</span>的作用。
- 杂谈
- 开发 & 维护的工作流程
- 新手如何看php手册 和 框架手册
- 开发 & 维护的不同点
- 从0到1,搭建新项目的工作流程
- 从1到N,维护的工作流程
- 优化流程
- 生成错误日志和慢日志的方法
- 查错思路
- 怎么快速接手一个项目
- 前端常用知识点
- javascript
- 自己封装的函数
- 处理数字
- 功能代码
- 动态添加图片
- 判断是手机端还是pc端
- javascript:;是什么意思?怎么用呢
- html & h5
- a标签中target设置为blank和_blank有什么区别?
- 乱码
- 提交方式:button标签 和 input
- 块元素
- 内联元素
- h5特有属性
- h5的localStorage【增、删、改、查】
- jquery
- 常用方法
- 功能代码
- 动态删除图片
- 一个按钮,切换2种状态
- 换肤
- 深入理解(function(){... })();
- json & xml
- json
- 语法速记
- json对象取值
- 字符串、对象、数组的区别
- xml
- [CDATA[%s]]的作用是什么
- 转义字符
- CDATA 想被xml解析的文本数据
- CDATA 不想被xml解析的文本数据
- 微信小程序
- 其他
- websocket
- 跨域
- css
- 行内 & 内连 & 外连 写法
- 优先级
- 更加精准的匹配
- 使用百分比如何生效
- php在html、js、jq中的的原生写法
- *php在html中的语法
- php在js中的语法
- php在jq中的语法
- 正则表达式
- php常用基础知识(思想为主)
- php为什么是“边编译边运行”
- 冒号、endif、endwhile、endfor使用
- 递归思想(速记法)
- cookie和session的理解
- php常用内置(系统)函数
- 常量
- 字符串
- 数组
- 日期时间
- 文件 & 目录
- 数学
- 程序执行
- 判断
- 选项和信息(修改配置文件的)
- 错误处理 & 日志记录
- 编码格式
- session
- IP相关
- 类 & 对象
- 性能
- 其他函数
- 魔术方法
- $_SERVER
- 变量处理
- php自己封装的一些函数
- 导入、导出、生成文件
- 数组
- 数字
- 字符串
- 其他
- 获取linux硬件信息
- 常见插件/类库使用
- 前端-框架/插件
- bootstrap 学习笔记
- layer 学习笔记
- layDate 学习笔记
- 百度ueditor1.4.4.3富文本编辑器
- quill富文本编辑器
- 百度ECharts图形报表
- webuploader上传图片
- 后端类库
- workerman 聊天室
- QRCODE 二维码
- redis
- seaslog 日志
- phpspider 爬虫
- Mailer 发送邮件
- simple_html_dom
- phpstorm使用
- 快捷键
- 连接mysql数据库
- 断点 + debug调试
- 运行内存不够
- wamp环境
- yii、laravel、tp、开发自己的php框架
- 看框架源码的思路
- tp5框架的使用
- 1、助手函数原理解析
- 开发自己的php框架
- 常用的开发思路 和 小功能实现代码
- 爬虫思路
- 功能点思路
- tp5判断是不是异地登录(简单版)
- 微信开发,反向代理
- 微信开发,关闭当前页面
- 消息队列的实现
- 页面静态化
- session串号
- 站内信设计思路
- web在线管理器
- 语言相关(开发有关)
- 接收json(text/xml)格式数据
- 原生文件上传(状态码)
- openssl扩展
- 打印对象 和 遍历对象
- 使用OB缓存的几个原则
- CLI模式执行php文件
- foreach时,添加元素 或 修改元素的值
- 功能点 代码实现
- 生成url目录树(没有pid)
- 多图上传(vue传base64)
- 下载文件,耗时算法
- 生成商品二维码
- 导出excel
- 搜索
- 阿里大鱼发短信
- 使用阿里云oss
- location.href跳转后,丢失用户的session
- “\r ” “\r\n” “\t”的区别
- php的配置文件详解
- 开启错误日志
- 开启慢日志
- 开启短标签
- 分析php-fpm.conf中的request_terminate_timeout参数