对JS中的继承和封装的理解

约定不等于承诺〃 2022-05-28 11:39 200阅读 0赞

引言：出现两次或者两次以上的代码，就需要封装。  
先给出一张图解释一下构造函数和原型对象还有实例之间的关系。  
![这里写图片描述][70]

**方式一：工厂模式**

function sayName(){ 
        alert(this.name);
    }
    function createStudent(id,name){ 
        var stu = new Object();
        stu.id = id;
        stu.name = name;
        return stu;
    }
    var stu1 = CreateStudent(....);//省略参数
    var stu2 = .....;
    stu1.sayName == stu2.sayName;//返回false-->此处就为一个缺点（应该为true）

缺点：1.对象不能细分  
2.函数没有完全封装

**方式二：构造函数模式**  
模拟内置构造函数，自定义对象类型的属性和方法

var arr = new Array();
    Array.prototype.push = function(){ 
        //自己写的函数体
    }
    arr.push();

\*prototype：存放所有实例共享的属性和方法

function Student(id,name){ 
        this.sayName = function(){ 
            alert(this.name);   
        }
        var s1 = Student(....);//省略参数 this-->window
        var s2 = new Student(....);//省略参数 this-->Student实例
    }

缺点：1.每个方法都需要在每个实例上重新创建一遍  
2.全局声明函数，这样函数过多，封装不完美

**方式三：原型模式(修复函数声明过多)**

每个函数都有一个属性：prototype，这个属性是一个指针，指向一个对象，该对象的用途是包含可以由特定类型的所有实例共享的属性和方法。
    每个函数对象都有一个constructor属性指向当前对象的构造函数
    每个构造函数的实例在创建时会先给对象一个[[__prototype__]]，实例内部用来指向原型对象。
    constructor:改变当前对象所指向的构造函数

function Student(id,name){ 
        this.id = id;
        this.name = name;
    }
    Student.prototype.sayName = function(){ 
        alert(this.name);
    }
    var stu1 = new Student(....);//省略参数
    stu1.sayName();//调用即可

将函数集中在一起 Student.prototype = \{constructor:Student //object–>Student\}  
相当于新建Object sayName:function()\{alert(this.name)\}

举例说明：  
穷人想要继承富人的钱和挣钱的方法

**总结方法：子类的原型指向父类的实例**

[70]: /images/20220528/354be5be595c43a89deb369cf3d11abb.png