深入理解JavaScript程序设计

川长思鸟来 2022-01-11 06:19 267阅读 0赞

今天没事情回顾了一下我在去年4-6月份学习JavaScript程序设计的笔记。发现书到用时方恨少，感觉自己学的还不够深，准备抽时间啃一下《JavaScript高级程序设计》，同时深入了解一下avaScript程序设计中几个比较难懂的模块。

**1.预编译**

预编译主要用来解决所有的JavaScrip代码执行顺序的问题。javascript相对于其它语言来说是一种弱类型的语言，在其它如java语言中，程序的执行需要有编译的阶段，而在javascript中也有类似的“预编译阶段”，了解javascript的预编译，将有助于在写js代码过程中的思路总结。

1.1 函数预编译

举个例子来讲解一下(举得例子比较难，不太好懂，但能很好的讲解出预编译的过程)：

这个例子非常的恶心，它的形参，变量名，函数名用的都是 a，就会出现了覆盖执行的问题，下面我们来解决这个问题。

如果是顺序执行会依次打印：1 ，123，function a()\{\}，函数b。实际结果输出的是：function a()\{\}，123，123，函数b。

![1608245-20190506143158933-235255439.png][]  ![1608245-20190506143207628-1463006716.png][]

之所以会这样，是因为在预编译的时候执行前上下文规定了它执行的顺序。

预编译主要分为四部：

（1）创立AO对象。在函数上下文中，我们用活动对象AO(activation object)来表示变量对象。

（2）找到形参和声明变量，将变量名和形参名作为AO的属性名。值暂时为undefined。

（3）将实参和形参统一。

（4）在函数体里面找到函数声明，值赋予函数体。

第一步：AO对象建立，AO\{ \};

第二步：a作为形参出现一次，作为声明变量出现一次。b作为声明变量出现一次。同一个值声明或者作为形参多次我们只写一个。所以现在AO就是：

AO\{

a:undefined，

b:undefined

第三步：将实参和形参统一。实参就是test(1)里面的1，形参是test(a)里面的a，所以现在AO就是：

AO\{

a:1，

b:undefined

第四步：在函数体里面找到函数声明，值赋予函数体。函数体只有a()，所以将函数赋值给a，所以现在AO就是：

AO\{

a:function a()\{\}，

b:undefined

预编译结束，根据AO和页面代码开始执行，所以：

![1608245-20190506160719111-776793231.png][]

开始执行代码的时候，AO是：  
 AO\{   
 a:function a()\{\},  
 b:undefined  
 \}  
 所以第一次打印是：function a()\{\};  
 代码继续执行到var a = '123';  
 由于预编译已经声明，所以这一行只执行赋值语句 a='123';  
 所以第二次打印是：123  
 代码继续执行到function a()\{\};函数声明已经在预编译执行完毕，不执行  
 所以第三次打印还是：123  
 代码继续执行到var b = function ()\{ return '函数b';\}();  
 预编译已经声明，所以这一行只执行赋值语句 b = function ()\{ return '函数b';\}();  
 所以第四次打印的是b，b是一个立即执行函数，函数立即执行的返回值就是：函数b

1.2 全局的预编译

全局的预编译会生成GO(global object)全局变量，除了没有第三步，其他的和函数的预编译一样，GO里面的的值其实就是window里面的值，都是全局变量。

结论：预编译能解决所有的代码执行顺序的问题。即使不太明白JavaScript的预编译也不是特别影响我们日常对JavaScript的编写，但明白以后我们对JavaScript代码执行的理解会有很大的帮助。

**2.闭包**

内部函数保存到外部导致闭包。闭包这个问题也不是特别的容易遇到。我开发将近一年了也就遇到了一次，数据显示错误，当时我还以为是自己代码写得有问题，最后一点点debugger，才发现是闭包问题，查阅资料才解决这个问题。

闭包产生的原因是：内部函数保存到外部时作用域链没有释放。

作用域链简介：\[\[scope\]\]就是我们常说的作用域，它存储了执行期上下文的集合。简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种，局部作用域又称为函数作用域。作用域链包含了我们在预编译时候介绍的AO\{\}和GO\{\}的所有的值。在函数执行结束后作用域链会直接销毁，防止占用内存。

![1608245-20190515182754630-300054871.png][]

在demo=function b()\{ num++;console.log \}时，num时函数a里面的变量，不是全局变量。为什么demo在执行时num时a里面的值？通过这个例子我们可以发现函数a的作用域链并没有销毁。这就是闭包。如果不太明白，我再给大家举个例子：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
        <script type="text/javascript">
            function create(){
                var arr = new Array();   //定义个空数组
                for(var i=0;i<10;i++){
                    arr[i] = function(){ //给数组赋的值是一个函数
                        return i;
                    };
                }
                return arr;    //这里返回的是数组，数组的值是一个函数 function (){return i;}
            }
            var Arr = create();
            for(var j=0;j<10;j++){
               console.log(Arr[j]());  //这里我们把数组遍历执行一下 打印结果 10 10 10 10 10 10 10 10 10 10
            }
        </script> 
        </body>
    </html>

打印的是 10 10 10 10 10 10 10 10 10 10，如果你认为应该打印 1 2 3 4 5 6 7 8 9 10 说明你可能还不是特别理解闭包。

因为在 var Arr = create()时 这个函数已经执行完毕时返回了一个数组，里面包含了是个数组function ()\{return i;\}，但是这个时候create()的作用域链并没有释放，所以里面定义的i还是等于10；所以再遍历的时候只会打印十个10。

我们在控制台看一下：

![1608245-20190520161211548-442025165.png][]

在这里我们看到了\[\[scope\]\]作用域，它有两个值一个Global \{\} 这是我们都知道是全局变量对象，另一个是Closure (create)\{i=0\}，Closure就是闭包的意思，也是闭包产生的。这是函数create的局部变量，我们可以清晰的看到i=10，函数create的作用域链没有释放。所以只会打印十个10。

\[\[scope\]\]这个东西如果不是闭包，当函数执行完后就销毁了，你根本看不到它。

记住两句话就能解决闭包的问题，1.内部函数保存到外部就是闭包。2.闭包的函数作用域链没有删除，一直存在。

闭包的危害：闭包会携带了函数的作用域，所以会占用更多的内存。由于函数作用域没有释放可能导致结果和我们预期不一样。

闭包的优点：任何事情都有两面性，有危害就有好处，要不然它不会一直存在。例如：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
        <script type="text/javascript">
            function create(){
                var count = 1;   
                function add(){
                    count++;
                    console.log(count)
                }
                return add;    
            }
            var Add = create();
            Add(); // 2    
            Add(); // 3
        </script> 
        </body>
    </html>

通过调用函数Add，我们实现了数据的累加，count本来是局部变量，现在在函数create外面也能正常调用count属性。实现了外部函数调用局部变量。

**3.面向对象的程序设计**

3.1对象的创建

面向对象的语言有一个一个标志，那就是都有类的概念，并且可以通过类来创建多个具有相同属性的和方法的对象。

在JavaScript里把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或者函数。”

我们可以通过创建Object实例，然后再添加属性或方法。也可以直接在创建对象时就带有一些特征值。举个例子：

![1608245-20190508104756372-293632682.png][]

这两种方式都可以创建对象，第二种更加的方便一点。

3.2对象的属性类型

ECMAScript中有两种属性：数据访问和访问器属性。

数据属性就是控制对象属性的删除，修改，遍历，查取。

\[\[Configurable\]\]：表示能否通过delete删除。

\[\[Enumerable\]\]：表示能否通过for-in遍历。

\[\[Writable\]\]：表示能否修改属性的值。

\[\[Value\]\]：表示这个属性的数据值。

前三个的如果不指定，默认值都是true，\[\[Value\]\]是添加属性赋予的值。

只有通过Object.defineProperty()方法才能控制。这个方法需要接受三个参数:对象名，属性名和一个描述符对象。如图所示：

![1608245-20190508112010524-2049822443.png][]

我们可以从控制台看到这个，这个方法是\[native code\]源代码，并且也能看到它的传参。多数情况下我们都接触不到这些数据属性的这些高级功能，不过对于我们理解JavaScript对象却非常有用。

我再给大家举个例子：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <script type="text/javascript">
            //直接创建对象加属性
            var person = {      
                name : 'liu',
                age : 23,
                job : 'programmer',
                myName : function(){
                    console.log(person.name);
                }
            }
            /*通过这个方法我重新给person这个对象的name属性赋值,并禁用删除修改*/
            Object.defineProperty(person,'name',{
                writable : false,        //禁用修改
                configurable : false,    //禁用删除
                value : 'liuzhou'        //重新赋值
            })
            alert(person.name);  // 'liuzhou'
            person.name = 'liu';
            alert(person.name);  // 'liuzhou'
            delete person.name;
            alert(person.name);  // 'liuzhou'
            </script>
        </body>
    </html>

如果有兴趣可以复制去看一下，通过这个方法我重新给person这个对象的name属性赋值,并禁用删除修改。所以下面的删除，修改就不能实现了。

访问器属性主要包含一对getter和setter函数。

函数读取会调用getter函数，函数写入会调用setter函数。访问器属性也不能直接定义，需要Object.defineProperty()方法来定义。

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <script type="text/javascript">
            //直接创建对象加属性
            var person = {      
                name : 'liu',
                age : 23,
                edition:1.
            }
            /*通过这个方法我新建一个year属性,如果大于2018，让person的age和adition都加一*/
            Object.defineProperty(person,'year',{  //对象的year属性
                get:function(){
                    
                },
                set:function(newValue){  //形参，叫什么名字都行
                    if(newValue>2018){
                        this.age += 1;
                        person.edition += 1;
                    }
                }
            })
            person.year = 2019;   //增加year属性会调用set方法；
            console.log(person); 
            </script>
        </body>
    </html>

打印效果图：

![1608245-20190508134658693-1360947356.png][]

这是访问器属性的常见方式，即设置的值会导致其他属性发生变化。我们也可以通过Object.defineProperties()一次定义多个属性，如果感兴趣自己可以百度去看一下。

** **

转载于:https://www.cnblogs.com/liuzhou1/p/10791989.html

[1608245-20190506143158933-235255439.png]: https://img2018.cnblogs.com/blog/1608245/201905/1608245-20190506143158933-235255439.png
[1608245-20190506143207628-1463006716.png]: /images/20220111/dd2138328484425f96a410c316a72c8c.png
[1608245-20190506160719111-776793231.png]: /images/20220111/fb04930ba6464138807379088091fbed.png
[1608245-20190515182754630-300054871.png]: /images/20220111/934af9e7373e48de9916350b365f3eea.png
[1608245-20190520161211548-442025165.png]: /images/20220111/79e2121c1b8844c8bad0fadfd5cc126e.png
[1608245-20190508104756372-293632682.png]: /images/20220111/b6db4e08e90f4d8687ea971f764a2f16.png
[1608245-20190508112010524-2049822443.png]: /images/20220111/7d871b258a1c47c49efedcd09149f942.png
[1608245-20190508134658693-1360947356.png]: /images/20220111/243e8d3a5c7c4486a0f512ba8949afcb.png