学习JavaScript笔记

简介: 学习JavaScript笔记

1    function jsFun6(){  //函数声明和函数表达式的区别

2        

3        test1();//函数声明提升,在执行代码之前会先读取函数声明,不会报错

4        function test1(){//函数声明方式创建函数

5            alert("测试1");

6        }

7        

8        //test2();报错,函数还不存在

9        console.log(test2)//不会报错,变量提升只是提升变量的声明,并不会把赋值也提升上来,输出undefined

10        var test2=function(){

11            alert("测试2");

12        };//使用函数表达式创建一个匿名函数(实际是以变量test3命名的函数)

13        test2();//不会报错,以创建函数

14                    

15        var test3=function(){

16            alert("测试3");

17        }();//加了括号立即执行

18        

19        var test4 =12;// !注意看,一旦变量被赋值后,将会输出变量

20        //函数提升优先级高于变量提升,所以函数先提升,然后变量提升覆盖之前的函数声明,表                

21        //现为变量

22        function test4(){

23            alert("测试4");              

24        }

25        console.log(test4);//12

26    

27        var test5="test5_1";

28        (function(){

29            //js中的变量搜索顺序:找变量时,先找局部变量,如果没有局部变量;再找全局变量。

30        alert(test5);//此时的test5为局部变量的提升,undefined

31        var test5="test5_2";

32        })();

33                    

34    }

35    jsFun6();

首先 JS 在执行之前会有一个预编译过程,变量提升和函数提升就是发生在这里。

在执行 jsFun6 函数时首先会创建一个 AO 对象(Activetion Object 执行期上下文)。

AO{


}

然后会将形参和变量声明作为 AO 对象的属性名,属性的值为 undefined。

我们可以看到 jsFun6 函数里没有形参,但是有以下变量声明:

10行的var test2

15行的var test3

19行的var test4

27行的var test5

所以 AO 对象现在是这样:

AO{

   test2undefined

   test3undefined

   test4undefined

   test5undefined

}

然后会将实参的值传递给形参(当前没有形参所以略过)。

再找到函数声明作为AO的属性名,属性的值为函数声明的函数体(这里就是函数声明提升)。

我们可以看到 jsFun6 函数里有以下的函数声明:

4function test1(){}

22function test4(){}

这里的第 10 行和第 15 行是函数表达式不是函数声明。

所以 AO 对象现在是这样:

AO{

   test2undefined,

   test3undefined,

   test4function test4(){alert("测试4");},

   test5undefined,

   test1function test1(){alert("测试1");}

}

这里需要注意因为之前 AO 对象里已经有 test4 属性了所以 AO 对象里原来由变量声明时得到的 test4 属性会被现在函数声明的 test4 覆盖。

到这里预编译就完成了开始执行。

执行时会先去查找 AO 对象,如果没找到就会去 GO(Global Object)对象里查找(AO 对象相当于局部变量,GO 对象相当于全局变量)。

当执行第 3 行时在 AO 里找到 test1 执行,弹出提示框显示提示信息“测试1”。

第 4 行已经提升了所以可以略过,下面其他的类似行与此相同。

执行第 8 行时, 在 AO 里找到 test2,并作为函数运行,由于 AO 里的 test2 的值是 undefined 所以执行会报错。

第 9 行输出 test2 所以输出的是 undefined。

第 10 行将函数体赋值给 test2,当前 AO 变成:

AO{

   test2function(){alert("测试2");},

   test3undefined,

   test4function test4(){alert("测试4");},

   test5undefined,

   test1function test1(){alert("测试1");}

}

所以第 13 行执行时在 AO 里能找到 test2 并作为函数运行,弹出提示框显示提示信息“测试2”。

第 15 行由于用于赋值的函数体后面加了 () 变成立即执行函数所以函数会立即运行(这里会弹出提示框显示提示信息“测试3”)然后将返回值赋值给 test3,由于函数没有返回值所以是 undefined,也就导致了 AO 里的 test3 的属性值还是 undefined(大家可以在第18行输出一下 test3,会发现还是输出 undefined)。

第 19 行将 12 赋值给 test4,将原来 test4 的属性值覆盖了,AO 对象变为:

AO{

   test2function(){alert("测试2");},

   test3undefined,

   test412,

   test5undefined,

   test1function test1(){alert("测试1");}

}

所以在第 25 行会输出 12(如果在这里再把 test4 作为函数去运行就会报错)。

第 27 行将 test5_1 赋值给 test5。

第 28 行是立即执行函数,会立即执行。

在执行之前会进行预编译所以这个函数又会创建一个 属于他自己的 AO 对象,为了区分我们将他标识为 AO2。

AO2{


}

然后将形参和变量声明作为 AO 对象的属性名,属性的值为 undefined。

AO2{

   test5undefined

}

然后进行实参形参统一,以及函数声明提升(由于没有所以略过)。

执行第 30 行时在 AO2 里找到了 test5,属性值为 undefined。

所以会弹出提示框显示提示信息 “undefined”。

执行第 31 行是将 test5_2 赋值给 test5。

所以 AO2 变成了:

AO2{

   test5test5_2

}

目录
相关文章
|
3月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
3月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
4月前
|
JavaScript 数据可视化 前端开发
three.js简单实现一个3D三角函数学习理解
1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。同时,Three.js还具有很好的跨平台和跨浏览器兼容性,让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
165 0
|
11月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
200 0
|
10月前
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
187 5
|
10月前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
83 2
|
10月前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
124 1
|
11月前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
105 2
|
11月前
|
JavaScript
js学习--开屏弹窗
js学习--开屏弹窗
100 1