现在正在学习Javascript基础知识 会遇到一些很有趣的东西,记录并和大家分享,如果你也感兴趣可以看看文章
函数声明与函数表达式
// 函数声明
function test() {}
// 函数表达式
var testExpre = function () {}
var testExp = function a () {}
解析:
- Javascript中()为执行符
- 函数名加小括号就可以执行对应的函数 test()
- 两种函数表达是都可以用 等号左边的变量名称加小括号来执行函数 带有函数名称的函数名将会自动省略
- 函数声明无法直接加() 函数表达式的变量名则可以
何为IIFE
An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it is defined.
IIFE是一个在定义时就被执行的函数
// 第一种
(function() {
// do somthing...
} ())
// 第二种
(function () {
// do somthing...
})()
表达式是可以被立即执行的
1;
1 + 1;
1 > 3
1 && false
a = 1 + 2
// 这些都是表达式 都是可以在定义时就被程序执行的
一： 表达式是可以立即执行
二： 函数也有表达式的表示方式
如何让函数表达式立即执行呢？
函数表达式
var test = function() {}
// 想让函数表达式执行 直接加小括号啊
var test = function() {} ()
解析：
- 上面是一个函数表达式
- 想让函数执行就需要加() 又要立即执行
函数表达式的生成与转换
// js中的一元运算符可以把后续代码转化为表达式
!function(){......}();
~function(){.....}();
-function(){.....}();
+function(){......}();
1 && function(){......}();
0 || function(){......}();
// 用括号将代码块转化为表达式()
(function() {})()
//(function() {}) 为表达式 加()表达式立即执行
(function () {} ())
// 整体是表达式 内部的()让表达式执行 W3C推荐此写法
连续使用立即执行函数必须加分号;
(function() {console.log(111)} ())
(function() {console.log(222)} ())
/*
111
222
index.html:16 Uncaught TypeError: (intermediate value)(...) is not a function
at index.html:16
*/
// 上面的函数会被解析成如下:
(function() {console.log(111)} ()) (function() {console.log(222)} ())
// 两个立即执行函数又组成了一个函数 无法解析
立即执行函数的优劣
-
- 不会污染全局变量
-
- 不需调用立即执行
-
- 与闭包结合生成私有变量
-
- 解决闭包变量引用问题
-
- 执行后立即销毁
-
- 代码的可读性变差
来一个面试题
点击li打印对应的下标
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo列表</title>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
var oLi = document.querySelectorAll('li');
for (var i = 0; i < oLi.length; i++) {
// 每次点击都是5
// oLi[i].onclick = function() {
// console.log(i);
// }
// 立刻执行函数包裹解决
(function(j){
oLi[j].onclick = function() {
console.log(j + 1);
}
})(i);
}
</script>
</body>
</html>
参考文档
medium.com/javascript-…
segmentfault.com/a/119000000…
dev.to/gyi2521/wha…
doc.liangxinghua.com/javascript/…
