闭包、原型链、继承

Love The Way You Lie 2022-05-08 07:34 165阅读 0赞

# 闭包 #

闭包就是函数中的函数实现外层函数中的变量不释放。

先来看看这个代码

function a(){
        var o=1
        function b(){
            console.log(o++)    
        }
        b()
    }
    a()   //输出1
    a()   //还是输出1
    a()   //仍然输出1
          //继续调用a()，得到的结果还是1

为什么会出现这样的结果，原因是每次调用完a后，o会+1，但是这个o是函数b中的o，而且没有返回到a中，所以当下一次再调用a时，o仍然是1。这就是外层函数的变量释放。那么怎么才能使o累加呢，这就要用到闭包了。在看看下面的代码。

function a(){
        var o=1
        function b(){
            console.log(o++)    
        }
        return b
    }
    var c = a() //只调用一次a
    c(); c(); c(); //通过调用c就可以实现多次调用b，实现累加

# 原型链 #

在javascript中创建对象有三种方法

//第一种
    new Object()
    
    //第二种，是第一种的简写
    {a:1}
    
    //第三种，通过构造函数，然后new一个对象
    function a(){}
    new a()

为一个对象添加属性和方法则是有“ . ”来实现

一个对象.属性或方法，例：

a = {b:1}
    则a.b = 1

那如果要为一堆对象添加属性和方法，就要使用到原型。原型（prototype）就是一次性给一堆对象添加属性和方法的对象。

一堆对象.prototype.属性或方法，例：

a.prototype = {b:1}
    则：a.prototype.b = 1

这样，所有的对象都有相同的属性或者方法

那什么是原型链？

一个构造函数可以实例出一个对象，而此构造函数通过prototype又可以被一个对象赋值，构造函数+原型+对象，周而复始，直到最后没有原型，就构成了原型链。

![70][]

对于原型链，我们只需要记住如果javascript在当前对象中，找不到属性和方法，就会沿着原型链一直找下去，直到找到。

# 继承 #

通过复用其他类的属性或方法，来扩展自己的属性或方法。

在javascript中就是通过原型链进行继承的，例：

function a(){
        this.a = 1
    }
    
    function b(){
        this.b = 2
    }
    
    a.prototype = new b()  //使用原型，a既有自己创建的属性，也扩展了b的属性
    
    var o = new a()
    
    console.log(o.a)  //输出1
    console.log(o.b)  //输出2

但这是存在一些问题的

1、无法通过实例化子类对象向父类中传递参数

解决方案：使用父类.call(this,参数) 传递参数。例:

function a(c){
        b.call(this,c)
        this.a = 1
    }
    
    function b(c){
        this.b = c
    }
    
    a.prototype = new b()   
    
    var oa = new a(2)
    
    console.log(oa.a)
    console.log(oa.b)

2、如果只使用call方法，则通过原型给父类中添加属性和方法子类无法继承

解决方案：子类.prototype = new 父类，例：

function a(c){
        b.call(this,c)
        this.a = 1
    }
    
    function b(c){
        this.b = c
    }
    
    b.prototype.d = 4  //为父类添加新的属性
    
    a.prototype = new b()   //必须使用prototype和call子类才能继承父类新添加的属性
    
    var oa = new a(2)
    
    console.log(oa.a)
    console.log(oa.d)

3、子类对象的构造函数指向的都是父类的构造函数

解决方案：子类.prototype.constructor = 子类，例：

function a(c){
        b.call(this,c)  //1、通过call方法向父类中传参
        this.a = 1
    }
    
    function b(c){
        this.b = c
    }
    
    b.prototype.d = 4  
    
    a.prototype = new b()   //2、通过原型让子类可以使用父类新添加的属性
    
    a.prototype.constructor = a  //3、把子类对象的构造函数指向子类
    
    var oa = new a(2)
    
    console.log(oa.constructor)

[70]: /images/20220508/dbe311695d88427686fdeb28c6d46a3c.png