闭包和继承

妖狐艹你老母 2023-10-09 00:56 52阅读 0赞

## 1.什么是闭包？ ##

闭包的概念：闭包就是函数嵌套时，让局部变量变成自由变量的环境，是一种让局部变量进化的方式

定义在一个函数内部的函数

垃圾回收机制：用过一次的东西，先放在一个内存中，不立即删掉，可以随时进行还原或再次使用，直到没有任何作用的时候再清除

如家用电器，电脑回收站

## 2.闭包的应用场景 ##

**一、for循环之中：**  
for循环之中的i变量会因为for的循环次数被覆盖，所以在for循环内部存在函数时，而且这个函数内会调用i变量，这种情况下就需要用到闭包。

for (var i = 0; i < 10; i++) { 
            console.log(i);        //可以访问到每次的i
        }

必须满足两个条件：  
1.在for循环内存在函数  
2.函数内会调用这个变量

一旦内部函数调用外部函数的局部变量，那么这个时候，这个局部变量就会变成内部函数的私有变量

**二、当需要给setTimeout的回调函数传参时**：

setTimeout(function (a){ 
            console.log(a); //两秒后，undefined
        }, 2000);
        //或
        setTimeout(fn(10), 2000);
        function fn(a){ 
            console.log(a); //没有延迟，直接打印10
        }
        
        //使用闭包：
    
        function fn(a){ 
            return function(){ 
                console.log(a); //两秒后，10
            }
        }
        var f = fn(10);
        setTimeout(f, 2000);

## 3.闭包的特点 ##

闭包是将函数内部和函数外部连接起来的桥梁  
可以读取函数内部的变量

让这些变量的值，始终保存在内存中，不会在调用结束后被系统回收  
避免全局变量命名空间的污染

内存消耗很大，不能滥用  
闭包会在父函数外部，改变父函数内部变量的值

## 1.构造函数继承 ##

在构造函数中，同样属于两个新创建的函数，也是不相等的

function Fn(name){ 
            this.name = name;
            this.show = function(){ 
                alert(this.name);
            }
        }
        var obj1 = new Fn("AAA");
        var obj2 = new Fn("BBB");
        obj1.show()
        obj2.show()

此时，任何一个new出来的实例上都有了show方法，可以视为最基础的继承。

## 2.call／apply继承 ##

优点：  
创建子类实例时，可以向父类的构造器传参；

缺点：  
只能继承构造器中定义的属性和方法，不能继承原型上定义的属性和方法

## 3.原型对象继承(注意深浅拷贝) ##

原型对象继承：继承原型  
优点：简单，方便，可以继承原型身上的方式和属性  
缺点：只能继承原型，不方便传参

## 4.原型链继承 ##

原型链继承：通过给Child设置原型为Parent的实例的方式，给Child添加了一层原型链的方式  
优点：既能继承原型，又能继承构造函数  
缺点：复杂，不方便传参

**c是实例（对象），有\_\_proto\_\_属性，指向Child.prototype，是Parent的实例（对象），有\_\_proto\_\_属性，指向Parent.prototype**

## 5.混合继承1 ##

混合继承：构造函数继承+原型对象继承  
优点：既能继承构造函数又能继承原型，方便传参，多继承  
缺点：复杂

常用的继承方式之一

## 6.混合继承2 ##

ES6的class继承：原理↓↓↓  
混合继承：构造函数+原型链

优点：简单方便易操作，语法层面的继承，属性和方法都能继承，参数很好处理  
缺点：兼容性

忽略兼容，常用的继承方式之一

class Parent{ 
            constructor(n) { 
                this.name = n
            }
            skill(){ 
                console.log(this.name + "是鉴定师")
            }
        }
    
        class Child extends Parent{ 
            constructor(n){ 
                super(n)
            }
        }
    
        var p = new Parent("大老王");
        console.log(p)
        p.skill();
    
        var c = new Child("小老王");
        console.log(c)
        c.skill();

## 构造函数，原型，实例之间的关系： ##

1.构造函数Fn身上有属性prototype为原型对象，原型对象内有constructor属性指向当前prototype所在的构造函数Fn

2.在new执行构造函数Fn时，创造了一个实例对象f，实例对象f的\_\_proto\_\_指向构造函数Fn的原型prototype

3.因为实例对象f的\_\_proto\_\_指向构造函数Fn的原型prototype，所以实例对象f可以间接访问到Fn原型prototype的方法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNzIwMw_size_16_color_FFFFFF_t_70]

## 查看实例对象f是否有指针指向构造函数Fn的原型： ##

isPrototypeOf()用于检测两个对象之间似乎否存在这种关系，使用方法如下：

Fn.prototype.isPrototypeOf(f) // 查看 Fn 的 prototype 对象，是否是 f 原型

类似的还有instanceof运算符，使用方法如下：  
console.log(f instanceof Fn) // 查看 f 对象是否是构造函数 Fn 的实例  
console.log(f instanceof Object)

两种使用，如果是返回ture，如果不是返回false

**注意：instanceof运算符右侧为构造函数，并且js中所有原型都来自Object构造函数**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNzIwMw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019092511485992.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNzIwMw==,size_16,color_FFFFFF,t_70