Js中的立即执行函数,前端分离思想

DOM一些题目详解

题目:

前端教材都在互联网上.
现在为了节省时间,要学js就在阮一峰javascript上面学
js高程只适合当工具书,如果哪里不清楚,或者想深入,就去看js高程,比如面向对象想深入学习,就去看js高程.

image.png

全局变量,window里面本身就有的不能用.比如parent,不然会覆盖

image.png

局部变量

全局变量容易覆盖,所以要用局部变量,用局部变量的方法

立即调用函数,使用局部变量

立即执行函数有什么用？
只有一个作用：创建一个独立的作用域。

这个作用域里面的变量，外面访问不到（即避免「变量污染」）。
用途：封装功能不污染全局变量

要写在一个函数里,然后再立即执行这个函数.

image.png

不用加函数名,在后面加.call或者直接用()
但是这样写会直接报错,解决方法
function(){}()可以立即执行且不报错的方法

(function(){alert('我是匿名函数')} ()) // 用括号把整个表达式包起来
(function(){alert('我是匿名函数')}) () //用括号把函数包起来
//下面的都是执行这个表达式,而不管返回值是什么
!function(){alert('我是匿名函数')}() // 求反，我们不在意值是多少，只想通过语法检查。
+function(){alert('我是匿名函数')}()
-function(){alert('我是匿名函数')}()
~function(){alert('我是匿名函数')}()
void function(){alert('我是匿名函数')}()
new function(){alert('我是匿名函数')}()

最新的方法:使用let
在花括号里使用let,就可以相当于在花括号这个作用域声明了局部变量

{
   let parent = document.querySelector('#self');//let声明的parent是局部变量,不会覆盖window.parent.
}

image.png

打印出来的是window.parent,没有被覆盖,说明let没有出按个画括号的作用域

image.png

打印出来的是2

立即执行函数的作用

以一个著名的面试题为例：

var liList = ul.getElementsByTagName('li')
for(var i=0; i<6; i++){
  liList[i].onclick = function(){
    alert(i) // 为什么 alert 出来的总是 6，而不是 0、1、2、3、4、5
  }
}

为什么 alert 的总是 6 呢，因为 i 是贯穿整个作用域的，而不是给每个 li 分配了一个 i，如下：

image.png

解决方法:

加立即执行函数

var ul = document.getElementsByTagName('ul')[0]

var liList = ul.getElementsByTagName('li');

for (var i = 0; i < 6; i++) {
    !function (i) {
        liList[i].onclick = function () {
            console.log(i) // 为什么 alert 出来的总是 6，而不是 0、1、2、3、4、5
        }
    }(i)
}