javascript面向对象编程（OOP）——汇总

Posted 2020-10-15

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript面向对象编程（OOP）——汇总相关的知识，希望对你有一定的参考价值。

一、JS的解析与执行过程
- 预处理阶段
- 执行阶段
二、作用域
- 块作用域
- 函数作用域
- 动态作用域
- 词法作用域
三、闭包
- 什么是闭包
- 闭包的好处
四、类与对象
- 对象
- 类
- 原型(prototype)
- this
- new的理解
五、封装
六、继承
七、多态
八、项目实战minijQuery

一、JS的解析与执行过程

1.1、预处理阶段

注意：js预处理阶段会扫描所有var声明的变量，把var声明的变量或函数存放到词法作用域里，如果是变量初始值为“undefined”，如果是函数则指向函数；

全局（window）

　　词法作用域（Lexical Environment）：顶级的Lexical Environment是window；

　　1、先扫描函数声明后扫描变量(var声明)；

　　2、处理函数声明有冲突，会覆盖；处理变量声明时有冲突，会忽略。

函数

　　词法作用域（Lexical Environment）：每调用一次，产生一个Lexical Environment；

　　1、先函数的参数：比如arguments（函数内部对象，代表函数实参，可通过下标获取调用函数时传的实参）；

　　2、先扫描函数声明后扫描变量(var声明)；

　　3、处理函数声明有冲突，会覆盖；处理变量声明时有冲突，会忽略。

1.2、执行阶段

　　1、给预处理阶段的成员赋值

　　2、如果没有用var声明的变量，会成为最外部LexicalEnvironment的成员（即window对象的变量）

函数内部对象：arguments

<script>
    /*提示：*/
    // arguments是每一个函数内部的一个对象
    // 可以访问实际传递给函数的参数的信息。
    // 声明的时候参数的个数与实际调用时无关
    
    function add(a,b){
    console.log(add.length);// 形参的个数
    console.log(arguments.length);// 实际传过来的参数
    var total = 0;
    for(var i = 0;i< arguments.length;i++){
        total += arguments[i];
    }
    return total;// 返回实参的总和
    }
    
    // 调用时传的实参
    var result = add(1,2,3,4,5);
    var result2 = add(1,2);
    
    console.log(result);// 15
    console.log(result2);// 3
</script>

View Code

二、作用域

提示：js的作用域不是块级别的；js的作用域是函数级别的。

2.1、块作用域

2.2、函数作用域

2.3、动态作用域

2.4、词法作用域

代码示例：

<script>
            //js作用域
            // 定义：用来查找变量的值的规则集;决定一个变量的范围
            // 提示：js的作用域不是块级别的；js的作用域是函数级别的。
            // javascript使用的是词法作用域，它的最重要的特征是它的定义过程发生在代码的书写阶段
            
            /*以下js代码用立即调用写法（私有化），避免变量冲突*/
            
            //1、块作用域：代码在花括号里面有效（js没有块作用域）
            (function(){
                for(var i=0;i<5;i++){
                    var a = i ;
                }
                // 在花括号外面可以访问到i,a
                console.log(i);// 5
                console.log(a);// 4
            })();
            
            
            //2、函数作用域：代码在function()函数的花括号里面有效
            (function(){
                var message = "函数外部的";
                function fn(){
                    var message = "函数内部的";
                    console.log(message);// 函数内部的
                }
                console.log(message);// 函数外部的
            })();
            
            
            //3、动态作用域：在运行时决定（是this指向的表现；谁调用，this指向谁）；动态作用域其实是指this的词法作用域
                // 动态作用域并不关心函数和作用域是如何声明以及在任何处声明的，只关心它们从何处调用。
                // 换句话说，作用域链是基于调用栈的，而不是代码中的作用域嵌套
            (function(){
                var a = 2;
                function foo() {
                    console.log( a );
                }
                function bar() {
                    var a = 3;
                    foo();// 此时this===window
                }
                bar();// 2
            })();
            /*
            var a = 2;
            bar = {
                a:3,
                foo:function(){
                    console.log(this.a);
                }
            }
            bar.foo();//3
            */
            

            //4、词法作用域：词法作用域(也称为静态作用域或闭包)
                // js的作用域解析，用new Function创建函数
            (function(){
                // 闭包
                var a = 2;
                function bar() {
                    var a = 3;
                    return function(){
                        console.log(a);// 此时捕获a=3
                    };
                }
                var foo = bar();
                foo();// 3
            })();
            
            
            
            // 如果处于词法作用域，也就是现在的javascript环境。变量a首先在foo()函数中查找，没有找到。于是顺着作用域链到全局作用域中查找，找到并赋值为2。所以控制台输出2
　　        // 如果处于动态作用域，同样地，变量a首先在foo()中查找，没有找到。这里会顺着调用栈在调用foo()函数的地方，也就是bar()函数中查找，找到并赋值为3。所以控制台输出3
            
            //小结：两种作用域的区别，简而言之，词法作用域是在定义时确定的，而动态作用域是在运行时确定的
            
        </script>