web前端开发笔记整理（三）Miracle1203的博客-

以下更得是JavaScript函數以及闭包等内容，有需要的可参考前两篇博客，这里主要记得是HTML和css部分，这里主要记的是js最基础部分。

函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

• 函数就是包裹在花括号中的代码块，前面使用了关键词 function，函数名functionname

function functionname() { // 执行代码 } 

• 当调用该函数时，会执行函数内的代码。
• 可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
• function必须小写
• 函数声明的方式总的有两种，一种是函数声明，一种是函数表达式，虽然都可以声明函数，但其实作用是不一样的

带参数的函数

• 向函数传值，这些值被称为参数
• 参数用，分隔，参数可在函数内使用
• 参数在函数内不要var，直接写入
  -·变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值。

<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button> <script> function myFunction(name,job){ alert("Welcome " + name + ", the " + job); } </script> 

return

• 通过return语句将函数值返回调用他的地方
• 使用return时，函数会停止执行，并返回指定的值

function functionName(target){ //隐式调用 +自动转成number型 return +target; } var num=functionName('123'); console.log(typeof(num)+" "+num); 

仅仅希望退出函数时

function myFunction(a,b) { if (a>b) { return; }     x=a+b } 

如果 a 大于 b，则上面的代码将退出函数，并不会计算 a 和 b 的总和
插入几个小练习：

• 写一个函数。告知你选定的小动物叫声

function scream(animal){ switch(animal){ case "dog":    document.write('wang'); return; case "cat":    document.write("miao"); return; } } 

• 实现加法计数器功能

function add() {  var sum = 0; for (var i = 0; i < add.arguments.length; i++) {      sum += add.arguments[i]; } return sum; } alert(add(143,51,21,97)); 

arguments.length为函数实参个数
这里了解一下arguments的用法

• 定义·一组函数，输入数字，逆转输出汉字形式

function sum(){ var num = window.prompt("请输入你的值："); var str = ""; for (var i = num.length-1;i >= 0; i--) {         str +=transfer(num[i]); }      document.write(str); } function transfer(target){ switch(target){ case "1": return "壹"; case "2": return "贰"; case "3": return "弎"; case "4": return "四"; case "5": return "伍"; case "6": return "陆"; case "7": return "七"; case "8": return "八"; case "9": return "玖"; } } sum(); 

• 写一个函数，实现n的阶乘

function n(x) { if(x == 1) { return 1; } else { return x * n(x - 1); } } alert(n(5)); 

作用域

作用域是可访问变量的集合。

• 在 JavaScript 中, 对象和函数同样也是变量。
• 在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。
• JavaScript 函数作用域: 作用域在函数内修改。

局部变量

变量在函数内声明，变量为局部作用域,只能在函数内部访问。
局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。

// 此处不能调用 carName 变量 function myFunction() { var carName = "Volvo"; // 函数内可调用 carName 变量 } 

全局变量

变量在函数外定义，即为全局变量。全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

var carName = " Volvo"; // 此处可调用 carName 变量 function myFunction() { // 函数内可调用 carName 变量 } 

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

// 此处可调用 carName 变量 function myFunction() {     carName = "Volvo"; // 此处可调用 carName 变量 } 

变量生命周期

• JavaScript 变量生命周期在它声明时初始化。
• 局部变量在函数执行完毕后销毁。
• 全局变量在页面关闭后销毁。

HTML 中的全局变量

预编译

• js运行时会进行三件事：1语法分析 2.预编译 3.解释执行

• 语法分析会在代码执行前对代码进行通篇检查，以排除一些低级错误

• 预编译发生在函数执行的前一刻
  小知识穿插：

imply global 暗示全局变量：即任何变量，如果变量未经声明就赋值，此变量就为全局对象（window）所有，所有数据变量都属于 window 对象
我们先不定义直接赋值

a=123； 

此时a会被认为是全局的一个对象，即window所属的值
相当于

`window.b  =123；` 

window就是全局
我们这里声明一个变量a并赋值

var a=123； 

相当于

windows.a=123; 

也就是

a=123； 

对预编译的浅显理解：

• 在函数执行前函数声明（function（）{}）会整体提升至逻辑的最前方

 <script> test();    functiont  test(){    console.log('a');  　　} </script> 

输出的结果为： a

• 变量的声明提升到函数调用前面，不是赋值，只是声明。

 <script>        console.log(a); var a = 123; </script> 

输出结果为：undefined;

• 函数声明才存在变量提升

function a(){};, var b =function (){};//不会提升 

预编译的四部曲：

    1.创建AO对象，Activation Object，函数执行生成了存储空间库     2.找形参和变量声明，将变量和形参名作为AO对象属性名，值为undefined     3.将实参值和形参统一     4.在函数体里面找函数声明，值赋予函数体 

重要性是4>3>2>1
举个例，形参变量实参一样情况下

function fn (a) {   console.log(a); var a = 123;    console.log(a); function a(){};    console.log(a); var b =function (){};    console.log(b); } fn(1); 

1.创建AO对象，我们隐式的在函数中创建了一个AO的对象来盛放函数中的变量，此时对象中并没有值；

AO{ } 

2:找形参和变量声明，将变量和形参名作为AO（）属性名，值为undefined

AO{  a:undefined  b:undefined } 

3.将实参值和形参值统一，此时将实参带入函数中，fn（1），因此AO中a 为 1

AO{  a:1   b:undefined } 

4.在函数体里找函数声明，值赋予函数体，由于在函数中有 function a() {} ，这一函数因此此时AO中 a = function a() {}

AO{   a:function a(){}   b:undefined   d:function d(){} } 

预编译完后进行执行：

• 一句一句执行,执行第一句console.log(a);那么，会在AO对象中调取a，在AO对象中a等于functiona(){},那么就输出function a(){} 函数声明
• var a = 123,var a 已经被提升了，所以不用管，直接执行a = 123，所以，在AO对象中，a变成了123
• AO对象变成123后，执行console.log(a);现在a等于123，那么就是输出123，
• 第四句是函数，由于函数已经被提升了，跳过
• 第五句是console.(a),所以输出还是123
• 第六句是var b = function (){},所以就要把在AO对象中的b的属性改为function（）{}
• 第七句b的输出就是function(){},第八句直接被提升了，所以不用读了

结果为：

function a(){} 123 123 function (){} 

全局预编译：
生成GO对象 global object GO==window

<script>     global = 100; function fn(){     console.log(global);     global=200;     console.log(global); var global=300; } fn(); var global; </script> 

结果为：

undefined
200

执行过程：

• 首先生成 global:undefined
• 执行第一行：global = 100
• 执行fn()时生成AO{ global = undefined; }
• 先生成GO再生成AO
  js是块编译，即一个script块中预编译然后执行，再按顺序预编译下一个script块再执行
  此时上一个script块中的数据都是可用的了，而下一个块中的函数和变量则是不可用的。

立即执行函数

原理： 只有表达式才能被执行
没有函数声明，在执行一次过后即被释放，除了这点与其他函数没有区别，适合做初始化工作。
立即执行函数也有预编译过程；
立即执行函数写法：

(function (){ }()) //推荐 

(function (){ })() 

函数会将函数变成表达式

function test (){ var a=1; } 

我们在调用test的时候可直接使用

加个括号

function test (){ var a=1; }（） 

这是函数声明，因为只有表达式才能够被（括号）执行
而上面的式子是函数声明，不是表达式。

var test = function(){ console.log(123"); }() 

这就是函数表达式，能被立即执行符号执行的表达式，再被立即执行之后，就变成了立即执行函数，执行完就销毁

添个加号或者-号就成表达式了：

+ function test (){ document.write("abc"); }() 

- ， ！，&&（要能运行到函数） ，|| ，“+”
加上这些符号就变成了立即执行函数

括号也算数学表达式
所以：

(function functionname (){ }) 

函数声明加上一对括号变成函数表达式

(function functionName (){ })（） 

加上一对括号让他执行。
把括号放在里面。

(function functionName (){ console.log('a'); }（）) 

先执行外面的括号，变成表达式，然后再执行里面的表达式
根据立即执行函数的定义，发现functionName在使用后已经没有意义了；

接着我们去掉函数名，就是立即执行函数了

形式如下：由下图可见执行完之后函数已经被销毁了

 (function functionName(){ var a=1; var b=2;     document.write(a+b); }()) 

与其他函数一样，可以传递实参和形参

(function functionName(a,b){     document.write(a+b); }(1,2)) 

var num =(function test(a,b){ var c;  c=a+b; return c; }(1,2)) 

闭包

下面是几个理解：
闭包是将函数内部和函数外部连接起来的桥梁

闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成定义在一个函数内部的函数。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

Javascript允许使用内部函数—即函数定义和函数表达式位于另一个函数的函数体内。
这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。
当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。

只要将内部函数传递到所在的词法作用域以外，它都会持有对原始作用域的引用，无论在何处执行这个函数都会使用闭包。

// JavaScript Document function test(){ var arr = []; for(var i = 0 ; i<10;i++) {               arr[i] = function(){                     document.write(i); } } return arr; } var  myArr = test(); for(var j = 0 ; j<10;j++) {               myArr[j]();//结果为10个10 } 

输出

记一下要注意的几点
函数体不是立刻执行，函数引用不打印函数体内语句也就是说 arr[i] = function(){
document.write(i); 执行位置不是他现在定义的位置，而是在函数调用的地方 myArrj;
当函数调用完成才会执行输出i
在函数外部可调用内部函数 return 函数与test（）形成了闭包 都能用test（）ao执行上下文arr随着for循环变化，for循环会产生十组数据，也就是内部函数执行10次。
十次结束后returnarr，将十组数据保存在外部，在外部执行，所以10个方法的i是共用的，在执行完test()后，此时的i相当于缓存在myArr中，且存入的值是test()的AO销毁前值，在销毁之前i存储的值是10
利用闭包解决闭包

那我们怎么输出0-9呢

function test(){ var arr = []; for(var i = 0 ; i<10;i++) { (function(j){//此处隐式使用闭包的存储功能，存储的内容为j的数据               arr[j] = function(){                     document.write(j); } }(i));//使用立即执行函数的实参，当执行myArr[i]时，查询的变量i即就转化为对应的立即执行函数的形参k } return arr; } var  myArr = test(); for(var j = 0 ; j<10;j++) {               myArr[j](); } 

这里我们引入立即执行函数，循环十次的同时每个函数保存在arr里面的j都不同。
立即执行函数读到马上就会执行，读后销毁是相对于引用销毁，值依然被保留。

闭包将内部函数作为返回值输出，然后用一个变量去接收外部函数的调用结果，即外部函数的返回值，通过调用这个变量就可以调用该函数了，如果是返回多个函数，则将其存于数组中，根据数组下标找到对应的函数。

找了几个小练习再理解一下

<ul> <li>1</li> <li>2</li> <li>3</li> </ul> 

function test(){ var lis = document.getElementsByTagName("li"); for (var i = 0; i < lis.length; i++) { (function(j){     lis[i].onclick = function() {         console.log(i); } }(i)) } } test(); 

这段代码本来像实现的功能是点击li标签输出的值为点击li的顺序值，但是结果是每次输出都是3…
其实这个跟上段代码有相同之处，我们知识给li标签定义了点击属性，但是函数体不会立刻执行。
只有点击li时，函数执行，函数中的变量i没有在函数中定义，根据js的作用域链原则，会继续向上级作用域查询，因此找到了全局作用域中的i，这时for循环已经执行结束，此时全局作用域中的i已经变为了3，故打印出来的当然是3

我们同样用闭包解决这个问题

var lis = document.getElementsByTagName("li"); for (var i = 0; i < lis.length; i++) {     lis[i].onclick = (function(i) { var clickLi = function() {             console.log(i); } return clickLi; })(i) } 

在for循环执行时，立即将当前的i值作为形参传入clickLi中，而形参默认为函数内的局部变量，函数外部是不能对i进行操作的。所以，当点击li时，执行clickLi函数时，打印出来的则是li的顺序值。

闭包的用途

• 可以重复使用变量，并且不会造成变量污染

• 全局变量可以重复使用，但是容易造成变量污染。局部变量仅在局部作用域内有效，不可以重复使用，不会造成变量污染。闭包结合了全局变量和局部变量的优点。

• 可以用来定义私有属性和私有方法。

使用闭包的注意点

• 比普通函数更占用内存，会导致网页性能变差，在IE下容易造成内存泄露。

什么是内存泄露

首先，需要了解浏览器自身的内存回收机制。
每个浏览器会有自己的一套回收机制，当分配出去的内存不使用的时候便会回收；内存泄露的根本原因就是你的代码中分配了一些‘顽固的’内存，浏览器无法进行回收，如果这些’顽固的’内存还在一直不停地分配就会导致后面所用内存不足，造成泄露。

闭包造成内存泄漏

因为闭包就是能够访问外部函数变量的一个函数，而函数是必须保存在内存中的对象，所以位于函数执行上下文中的所有变量也需要保存在内存中，这样就不会被回收，如果一旦循环引用或创建闭包，就会占据大量内存，可能会引起内存泄漏

内存泄漏的解决方案

造成内存泄露的原因：

• 意外的全局变量(在函数内部没有使用var进行声明的变量)

• console.log

• 闭包

• 对象的循环引用

• 未清除的计时器

• DOM泄露(获取到DOM节点之后，将DOM节点删除，但是没有手动释放变量，拿对应的DOM节点在变量中还可以访问到，就会造成泄露)

闭包的使用场景

闭包的应用场景
闭包极其应用场景

😃

再看一道题

var f=( function f(){ return "1"; }, function g(){ return 2; } )(); console.log(typeof(f)); 

问输出什么？

逗号运算符，它将第一个的参数，再计算第二个的参数值。然后返回最第二个参数的值
在看一个

var x=1; if (function f() {} )){ x+=typeof f; } console.log(x); 

输出 1undefined
if条件里面能执行，括号里面函数就成为表达式，不是函数定义 f就没得了
任何一个变量未经定义放在typeof不报错 返回字符串类型undefined
要不是字符串类型加起来就是非数 NaN