JavaScript 高级（二）原型与原型链、执行上下文与执行上下文栈、作用域与作用域链、闭包、对象创建模式、继承模式

最新推荐文章于 2024-09-13 08:33:26 发布

Cherry_Zj

最新推荐文章于 2024-09-13 08:33:26 发布

阅读量1.3k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/Cherry_Zj/article/details/120592722

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

函数高级

原型与原型链

①原型

函数的prototype属性
每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)
原型对象中有一个属性constructor, 它指向函数对象
给原型对象添加属性(一般都是方法)
作用: 函数的所有实例对象自动拥有原型中的属性(方法)

 <script type="text/javascript">
        //每个函数都有一个prototype属性，它默认指向一个Object空对象（即：称为原型对象）
        console.log(Date.prototype,typeof Date.prototype);
        function Fun (){

        }
        console.log(Fun.prototype);//默认指向一个Object空对象（没有我们定义的属性）

        //原型对象中有一个属性constructor，它指向函数对象
        console.log(Date.prototype.constructor===Date);
        console.log(Fun.prototype.constructor===Fun);

        //给原型对象添加属性（一般方法）===>实例对象可以访问
        Fun.prototype.test = function(){
            console.log("test()");
        };
        var fun = new Fun();
        fn.test();
    </script>

②显示原型与隐式原型

每个函数function都有一个prototype，即显示原型（属性）
每个实例对象都有一个__proto__，可称为隐式原型（属性）
对象的隐式原型的值为其对应构造函数的显示原型的值
总结:
①函数的prototype属性: 在定义函数时自动添加的, 默认值是一个空Object对象
②对象的__proto__属性: 创建对象时自动添加的, 默认值为构造函数的prototype属性值
③ 程序员能直接操作显式原型, 但不能直接操作隐式原型(ES6之前)

 <script type="text/javascript">
        function Fn(){  //内部语句：this.prototype = {};

        }
        //1、每个函数function都有一个prototype，即显示原型（属性），默认指向一个空的Object对象
        console.log(Fn.prototype);
        // 2、每个实例对象都有一个__proto__，可称为隐式原型（属性）
        var fn = new Fn();     //内部语句：this.__proto__ = Fn.prototype;
        console.log(fn.__proto__);
        //3、对象的隐式原型的值为其对应构造函数的显示原型的值
        console.log(fn.__proto__ === Fn.prototype);  //true

        //给原型添加方法
        Fn.prototype.test = function () {
            console.log('test()');
        };
        //通过实例调用原型方法
        fn.test();
    </script>

如图：
在这里插入图片描述

③原型链

别名: 隐式原型链
作用: 查找对象的属性(方法)
访问一个对象的属性时，先在自身属性中查找，找到返回；如果没有, 再沿着__proto__这条链向上查找, 找到返回；如果最终没找到, 返回undefined
注意：
① 函数的显示原型指向的对象默认是空Object实例对象(但Object不满足)
② 所有函数都是Function的实例(包含Function)
③Object的原型对象是原型链尽头

<script type="text/javascript">
    // console.log(Object)
    //console.log(Object.prototype)
    console.log(Object.prototype.__proto__);
    function Fn() {
        this.test1 = function () {
            console.log('test1()');
        };
    }
    console.log(Fn.prototype);
    Fn.prototype.test2 = function () {
        console.log('test2()');
    };

    var fn = new Fn();

    fn.test1();
    fn.test2();
    console.log(fn.toString());
    console.log(fn.test3);
    // fn.test3()  undefined


    /*
    1. 函数的显示原型指向的对象默认是空Object实例对象(但Object不满足)
     */
    console.log(Fn.prototype instanceof Object); // true
    console.log(Object.prototype instanceof Object);// false
    console.log(Function.prototype instanceof Object); // true
    /*
    2. 所有函数都是Function的实例(包含Function)
    */
    console.log(Function.__proto__===Function.prototype);//true
    /*
    3. Object的原型对象是原型链尽头
     */
    console.log(Object.prototype.__proto__); // null

</script>

如图：
在这里插入图片描述

④原型链的属性问题

读取对象的属性值时: 会自动到原型链中查找
设置对象的属性值时: 不会查找原型链, 如果当前对象中没有此属性, 直接添加此属性并设置其值
方法一般定义在原型中, 属性一般通过构造函数定义在对象本身上

<script type="text/javascript">
    function Fn(){

    }
    Fn.prototype.a = 'xxx';
    var fn1 = new Fn();
    console.log(fn1.a);

    var fn2 = new Fn();
    fn2.a = 'yyy';
    console.log(fn1.a,fn2.a);//xxx,yyy
</script>

⑤探索instanceof

instanceof是如何判断的?

表达式: A instanceof B
如果B函数的显式原型对象在A对象的原型链上, 返回true, 否则返回false

Function是通过new自己产生的实例

<script type="text/javascript">

    /*
    案例1
     */
    function Foo() {  }
    var f1 = new Foo()
    console.log(f1 instanceof Foo) // true
    console.log(f1 instanceof Object) // true

    /*
    案例2
     */
    console.log(Object instanceof Function) // true
    console.log(Object instanceof Object) // true
    console.log(Function instanceof Function) // true
    console.log(Function instanceof Object) // true

    function Foo() {}
    console.log(Object instanceof  Foo) // false
</script>

执行上下文与执行上下文栈

①变量提升与函数提升

变量声明提升

通过var定义(声明)的变量, 在定义语句之前就可以访问到
值: undefined

函数声明提升

通过function声明的函数, 在之前就可以直接调用
值: 函数定义(对象)

先执行变量提升, 再执行函数提升

<script type="text/javascript">
    console.log('-----')
    /*
    面试题 : 输出 undefined
     */
    var a = 3
    function fn () {
        console.log(a)
        var a = 4
    }
    fn() //undefined

    console.log(b) //undefined  变量提升
    fn2() //可调用  函数提升
    fn3() //不能  变量提升

    var b = 3
    function fn2() {
        console.log('fn2()')
    }

    var fn3 = function () {
        console.log('fn3()')
    }
</script>

②执行上下文

代码分类（位置）
①全局代码
②函数（局部）代码
全局执行上下文
①在执行全局代码前将window确定为全局执行上下文
②对全局数据进行预处理
var定义的全局变量：undefined，添加为window的属性
function声明的全局函数：赋值（fun），添加为window的方法
this：赋值（window）
③开始执行全局代码

3.函数执行上下文
①在调用函数，准备执行函数体之前。创建对应的函数执行上下文对象（虚拟的，存在于栈中）
②局部数据进行预处理
形参变量：赋值（实参），添加为执行上下文属性
arguments：赋值（实参列表），添加为执行上下文属性
var定义的局部变量：undefined，添加为执行上下文的属性
function声明的函数：赋值（fun），添加为执行上下文的方法
this：赋值（调用函数的对象）
③开始执行函数体代码

 <script type="text/javascript">
        //全局执行上下文
        console.log(a1);
        a2();
        var a1 = 3;
        function a2 (){
            console.log('a2()');
        }

        //函数执行上下文
        function fn(a1){
            console.log(a1);//2
            console.log(a2);//undefined
            a3();//a3()
            console.log(this);//window
            console.log(arguments);//2,3  伪数组(2,3)

            var a2 = 3;
            function a3(){
                console.log('a3()');
            }
        }
        fn(2,3);
    </script>

③执行上下文栈

在全局代码执行前, JS引擎就会创建一个栈来存储管理所有的执行上下文对象
2. 在全局执行上下文(window)确定后, 将其添加到栈中(压栈)
3. 在函数执行上下文创建后, 将其添加到栈中(压栈)
4. 在当前函数执行完后,将栈顶的对象移除(出栈)
5. 当所有的代码执行完后, 栈中只剩下window

<!--
1. 依次输出什么?
  gb: undefined
  fb: 1
  fb: 2
  fb: 3
  fe: 3
  fe: 2
  fe: 1
  ge: 1
2. 整个过程中产生了几个执行上下文?  5
-->
<script type="text/javascript">
    console.log('gb: '+ i)
    var i = 1
    foo(1)
    function foo(i) {
        if (i == 4) {
            return
        }
        console.log('fb:' + i)
        foo(i + 1) //递归调用: 在函数内部调用自己
        console.log('fe:' + i)
    }
    console.log('ge: ' + i)
</script>

作用域与作用域链

①作用域

理解
它是静止的，在编写代码时就确定了
分类
① 全局作用域
② 函数作用域
③ 没有块作用域（ES6有了）
作用
隔离变量，不同作用域下同名变量不会有冲突

例子：没有作用域

<script type="text/javascript">
        //没有块作用域
        if(true){
            var c = 3;
        }
        console.log(c);

    </script>

②作用域与执行上下文

区别一：
① 全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了，而不是在函数调用时
②全局执行上下文是在全局作用域确定之后，JS代码马上执行之前
③ 函数执行上下文是在调用函数时，函数体代码执行之前创建
区别二：
① 作用域是静态的，只要函数定义好了就一直存在，且不会再变化
② 上下文环境是动态的，调用函数时创建，函数调用结束时上下文环境就会自动释放
联系
执行上下文（对象）是从属于所在的作用域
全局上下文环境：全局作用域
函数上下文环境：对应的函数使用域

③作用域链

理解
①多个上下级关系的作用域形成的链, 它的方向是从下向上的(从内到外)
②查找变量时就是沿着作用域链来查找的

闭包

①遍历循环加监听

<script type="text/javascript">
    var btns = document.getElementsByTagName('button')
    //遍历加监听
    /*
    for (var i = 0,length=btns.length; i < length; i++) {
      var btn = btns[i]
      btn.onclick = function () {
        alert('第'+(i+1)+'个')
      }
    }*/
    /*
    for (var i = 0,length=btns.length; i < length; i++) {
      var btn = btns[i]
      //将btn所对应的下标保存在btn上
      btn.index = i
      btn.onclick = function () {
        alert('第'+(this.index+1)+'个')
      }
    }*/

    //利用闭包
    for (var i = 0,length=btns.length; i < length; i++) {
        (function (i) {
            var btn = btns[i]
            btn.onclick = function () {
                alert('第'+(i+1)+'个')
            }
        })(i)
    }

</script>

②闭包的理解

如何产生闭包？
当一个嵌套的内部（子）函数引用了嵌套的外部（父）函数的变量（函数）时，就产生了闭包
闭包到底是什么？
理解一：闭包是嵌套的内部函数（绝大部分人）
理解二：包含被引用变量（函数）的对象（极少数人）
注意：闭包存在于嵌套的内部函数中
产生闭包的条件？
①函数嵌套
②内部函数引用了外部函数的数据（变量/函数）
③执行内部函数定义

 <script type="text/javascript">
        function fn1(){
            var a = 2;
            var b = 'abc';
            function fn2(){//执行函数定义就会产生闭包（不用调用内部函数）
                console.log(a);
            }
        }
        fn1();
    </script>

③常见闭包

将函数作为另一个函数的返回值
将函数作为实参传递给另一个函数调用

<script type="text/javascript">
        //1.将函数作为另一个函数的返回值
        function fn1 (){
            var a = 2;
            function fn2 (){
                a++;
                console.log(a);
            }
            return fn2;
        }
        var f = fn1();
        f();//3
        f();//4

        // 2.将函数作为实参传递给另一个函数调用
        function showDelay (msg,time){
            setTimeout(function (){
                alert(msg);//闭包中有msg，没有time
            },time);
        }
        showDelay('xyy',2000);
    </script>

④闭包的作用

使用函数内部的变量在函数执行完后，仍然存活在内存中（延长了局部变量的生命周期）
让函数外部可以操作（读写）到函数内部的数据（变量/函数）

问题:

函数执行完后, 函数内部声明的局部变量是否还存在?
一般是不存在, 存在于闭中的变量才可能存在
在函数外部能直接访问函数内部的局部变量吗?
不能, 但我们可以通过闭包让外部操作它

<script type="text/javascript">

        function fn1 (){
            var a = 2;
            function fn2 (){
                a++;
                console.log(a);
            }
            return fn2;
        }
        var f = fn1();
        f();//3
        f();//4

    </script>

⑤闭包的生命周期

产生: 在嵌套内部函数定义执行完时就产生了(不是在调用)
死亡: 在嵌套的内部函数成为垃圾对象时

<script type="text/javascript">
    function fn1() {
        //此时闭包就已经产生了(函数提升, 内部函数对象已经创建了)
        var a = 2
        function fn2 () {
            a++
            console.log(a)
        }
        return fn2
    }
    var f = fn1()
    f() // 3
    f() // 4
    f = null //闭包死亡(包含闭包的函数对象成为垃圾对象)
</script>

⑥闭包的应用（自定义JS模块）

具有特定功能的JS文件。将所有的数据和功能都封装在一个函数内部（私有的），只向外暴露一个包含n个方法的对象或函数。模块的使用者，只需要通过模块暴露的对象调用方法来实现对应的功能
方式一：

<body>
   
    <script type="text/javascript" src="myModule.js"></script>
    <script type="text/javascript">

    </script>

myModule.js:

function myModule (){
    //私有数据
    var msg = 'My xyy';
    //操作数据的函数
    function doSomething () {
        console.log('doSomething()'+msg.toUpperCase());
    }
    function doOtherthing () {
        console.log('doOtherthing()'+msg.toLowerCase());
    }
    //向外暴露对象（给外部使用的方法）
    return {
        doSomething:doSomething,
        doOtherthing:doOtherthing
    }
}

方式二：

<body>

    <script type="text/javascript" src="myModule2.js"></script>
    <script type="text/javascript">
        myModule2.doSomething();
        myModule2.doOtherthing();
    </script>

myModule2.js:

(function () {
    //私有数据
    var msg = 'My xyy';
    //操作数据的函数
    function doSomething () {
        console.log('doSomething()'+msg.toUpperCase());
    }
    function doOtherthing () {
        console.log('doOtherthing()'+msg.toLowerCase());
    }
    //向外暴露对象（给外部使用的方法）
    window.myModule2 = {
        doSomething:doSomething,
        doOtherthing:doOtherthing
    }
})()

⑦闭包的缺点及解决

缺点：
函数执行完后，函数内的局部变量没有释放，占用内存时间会变长，容易造成内存泄漏
解决
① 能不使用闭包就不使用
②及时释放

<script type="text/javascript">
        function fn1() {
            var arr = new Array[100000]
            function fn2() {
                console.log(arr.length)
            }
            return fn2
        }
        var f = fn1()
        f()

        f = null //让内部函数成为垃圾对象-->回收闭包
    </script>

示例：

<script type="text/javascript">
    //代码片段一
    var name = "The Window";
    var object = {
        name : "My Object",
        getNameFunc : function(){
            return function(){
                return this.name;
            };
        }
    };
    alert(object.getNameFunc()());  //?  the window


    //代码片段二
    var name2 = "The Window";
    var object2 = {
        name2 : "My Object",
        getNameFunc : function(){
            var that = this;
            return function(){
                return that.name2;
            };
        }
    };
    alert(object2.getNameFunc()()); //?  my object



</script>

对象高级

对象创建模式

①Object构造函数模式

套路: 先创建空Object对象, 再动态添加属性/方法
适用场景: 起始时不确定对象内部数据
问题: 语句太多

<script type="text/javascript">
    /*
    一个人: name:"Tom", age: 12
     */
    // 先创建空Object对象
    var p = new Object()
    p = {} //此时内部数据是不确定的
    // 再动态添加属性/方法
    p.name = 'Tom'
    p.age = 12
    p.setName = function (name) {
        this.name = name
    }

    //测试
    console.log(p.name, p.age)
    p.setName('Bob')
    console.log(p.name, p.age)

</script>

②对象字面量模式

套路: 使用{}创建对象, 同时指定属性/方法
适用场景: 起始时对象内部数据是确定的
问题: 如果创建多个对象, 有重复代码

<script type="text/javascript">
    var p = {
        name: 'Tom',
        age: 12,
        setName: function (name) {
            this.name = name
        }
    }

    //测试
    console.log(p.name, p.age)
    p.setName('JACK')
    console.log(p.name, p.age)

    var p2 = {  //如果创建多个对象代码很重复
        name: 'Bob',
        age: 13,
        setName: function (name) {
            this.name = name
        }
    }

</script>

③工厂模式

套路: 通过工厂函数动态创建对象并返回
适用场景: 需要创建多个对象
问题: 对象没有一个具体的类型, 都是Object类型

<script type="text/javascript">
        function createPerson(name,age){ //返回一个对象的函数==>工厂函数
            var obj = {
                name:name,
                age:age,
                setName:function(name){
                    this.name = name
                }
            }
            return obj;
        }

        //创建两个人
        var p1 = createPerson('Tom',12);
        var p2 = createPerson('Bob',13);
    </script>

④自定义构造函数模式

套路: 自定义构造函数, 通过new创建对象
适用场景: 需要创建多个类型确定的对象
问题: 每个对象都有相同的数据, 浪费内存

<script type="text/javascript">
    //定义类型
    function Person(name, age) {
        this.name = name
        this.age = age
        this.setName = function (name) {
            this.name = name
        }
    }
    var p1 = new Person('Tom', 12)
    p1.setName('Jack')
    console.log(p1.name, p1.age)
    console.log(p1 instanceof Person)

    function Student (name, price) {
        this.name = name
        this.price = price
    }
    var s = new Student('Bob', 13000)
    console.log(s instanceof Student)

    var p2 = new Person('JACK', 23)
    console.log(p1, p2)

</script>

⑤构造函数+原型的组合模式

套路: 自定义构造函数, 属性在函数中初始化, 方法添加到原型上
适用场景: 需要创建多个类型确定的对象

<script type="text/javascript">
    function Person(name, age) { //在构造函数中只初始化一般属性
        this.name = name
        this.age = age
    }
    Person.prototype.setName = function (name) {
        this.name = name
    }

    var p1 = new Person('Tom', 23)
    var p2 = new Person('Jack', 24)
    console.log(p1, p2)

</script>

继承模式

①原型链继承

套路
①定义父类型构造函数
② 给父类型的原型添加方法
③定义子类型的构造函数
④创建父类型的对象赋值给子类型的原型
⑤将子类型原型的构造属性设置为子类型
⑥给子类型原型添加方法
⑦创建子类型的对象: 可以调用父类型的方法
关键
子类型的原型为父类型的一个实例对象

<script type="text/javascript">
    //父类型
    function Supper() {
        this.supProp = 'Supper property'
    }
    Supper.prototype.showSupperProp = function () {
        console.log(this.supProp)
    }

    //子类型
    function Sub() {
        this.subProp = 'Sub property'
    }

    // 子类型的原型为父类型的一个实例对象
    Sub.prototype = new Supper()
    // 让子类型的原型的constructor指向子类型
    Sub.prototype.constructor = Sub
    Sub.prototype.showSubProp = function () {
        console.log(this.subProp)
    }

    var sub = new Sub()
    sub.showSupperProp()
    // sub.toString()
    sub.showSubProp()

    console.log(sub)  // Sub

</script>

如图：
在这里插入图片描述

②借用构造函数继承(假的)

套路:
①定义父类型构造函数
② 定义子类型构造函数
③在子类型构造函数中调用父类型构造
关键:
在子类型构造函数中通用call()调用父类型构造函数

<script type="text/javascript">
    function Person(name, age) {
        this.name = name
        this.age = age
    }
    function Student(name, age, price) {
        Person.call(this, name, age)  // 相当于: this.Person(name, age)
        /*this.name = name
        this.age = age*/
        this.price = price
    }

    var s = new Student('Tom', 20, 14000)
    console.log(s.name, s.age, s.price)

</script>

③原型链+借用构造函数的组合继承

利用原型链实现对父类型对象的方法继承
利用super()借用父类型构建函数初始化相同属性

<script type="text/javascript">
    function Person(name, age) {
        this.name = name
        this.age = age
    }
    Person.prototype.setName = function (name) {
        this.name = name
    }

    function Student(name, age, price) {
        Person.call(this, name, age)  // 为了得到属性
        this.price = price
    }
    Student.prototype = new Person() // 为了能看到父类型的方法
    Student.prototype.constructor = Student //修正constructor属性
    Student.prototype.setPrice = function (price) {
        this.price = price
    }

    var s = new Student('Tom', 24, 15000)
    s.setName('Bob')
    s.setPrice(16000)
    console.log(s.name, s.age, s.price)

</script>