JS类的创建与继承

Posted 2023-04-22

参考技术A JS中，类的创建方式与函数的创建方式相同，主要区别在于一般我们创建类时，类名的首字母需要大写，同时，我们可以再类的原型上添加公共属性和方法。创建例子如下：

    JS类的继承主要有6种方式：原型链继承、实例继承、组合继承、原型式继承、寄生继承、寄生组合继承

    创建空的子函数，再子函数的原型上执行构造函数，让子函数的原型上拥有构造函数的全部属性和方法（包括构造函数的原型上的方法和属性），继承实现方法如下：

优点： 1.简单，子类实例既是子类的实例也是父类的实例

            2.父类在原型上新增的方法和属性都能被子类获取到

缺点： 1.传参不方便，只能再继承的时候传递参数，无法在创建子类实例的时候传入参数

            2.无法实现多继承（一个子类继承多个父类）

            3.原型上的属性、方法被所有的实例共享

    创建子类函数，在函数内部直接调用构造函数，如果构造函数有参数在这里传参，继承实现方法如下：

优点： 1.传参方便，可以在创建实例时传参

            2.可以实现多继承

缺点： 1.无法继承父类原型上的属性和方法 

            2.因为原型上没有方法，所以无法实现函数复用

        同时使用构造继承和原型链继承。继承实现方法如下：

优点： 1.综合了构造继承和原型链继承的优点，并且去除他们的缺点，总体而言是一个比较好的继承方案

缺点： 1.因为同时使用了原型链继承和构造继承，很明显可以看出父类实例的属性被调用了两次，浪费内存

        创建一个函数传入要继承的父对象，内部创建空的子类函数，然后在子类函数外部将父对象赋值给子类函数的原型，再返回子类函数的new执行结果。继承实现方法如下：

        函数内调用原型式继承，赋值给一个对象，然后可以自定义增加它的一些属性和方法。继承实现方法如下：

        通过寄生方式，去掉父类的实例属性，在调用两次父类的构造的时候，就不会初始化两次实例方法或属性，避免的组合继承的缺点，也就是重新创建一个空的函数，将父类的原型拷贝给这个空函数，然后对子类函数执行这个空函数。继承实现方法如下：

优点：全身都是优点

缺点：实现复杂

JS中的类，类的继承方法

大牛请无视此篇！

首先我们定义一个类，方法很简单，就像我们定义函数一样，只不过我们为了与函数区分，名称首字母要大写，看代码：

function Person (){

}

这就是一个很简单的Poson类，然后我们通过类来进行实例化对象，通俗的说创建对象吧，我们以前用过的json对象，和我们现在要用的标准对象

//简单的json对象(此对象与Person类没任何关系，只是让大家观察两者的写法区别)
var obj = {
name:‘lemon’,
age:‘18‘
}
//通过Person来实例化一个对象(对象名称相同为了对比)
var obj = new Person;

//定义对象属性
obj.name = ‘lemon‘
//定义对象方法
obj.fn = function(){
console.log(‘www.lemon-x.ml‘)
};
//类是无法使用对象中的属性和方法的、对象也是无法使用类的方法和属性的
console.log(obj.name);
obj.fn();
//定义对象属性以及方法
Person.num = 1;
Person.fn = function(){
console.log(‘我是类方法‘)
}
//进行调用
console.log(Person.num);
Person.fn();

//我们可以通过prototype可以给这个类下面的所有对象添加一个共有的属性或方法

Person.prototype.age = 18;
Person.prototype.data = function(){
    console.log(this.name+‘:‘+this.age)
};
console.log(obj.age);
obj.data();

话不多说，看下第一种继承方法,通过拓展Object来实现继承

     //父类
    function Parent(add,net,no,teacher) {
        this.add = add;
        this.net = net;
        this.no = no;
        this.teacher = teacher;
    }
    //子类
    function Child(name,age,sex,id) {
        this.name = name;
        this.sex = sex;
        this.age = age;
        this.id = id;
    }
    /*继承方法*/
    Object.prototype.extend = function(ParentObj){
        for(var i in ParentObj){
            this[i] = ParentObj[i]
        }
    };
    /*实例化子类，实例化父类，子类调用继承方法*/
    var parent = new Parent(
"china","www.lemon-x.ml","1608","ccy"
);
    var child = new Child("lemon","男","18","1001");
    //调用我们写好的继承方法
    child.extend(parent);
    //现在我们就可以调用父类中的属性以及方法了
    console.log(child.add);

//如果看不懂看下面这个简单的
     //父类
    function Parent(add) {
        this.add = add;
       
    }
    //子类
    function Child() {
      
    }
    /*继承方法*/
    Object.prototype.extend = function(ParentObj){
        for(var i in ParentObj){
            this[i] = ParentObj[i]
        }
    };
    /*实例化子类，实例化父类，子类调用继承方法*/
    var parent = new Parent("china");
    var child = new Child();
    //调用我们写好的继承方法
    child.extend(parent);
    //现在我们就可以调用父类中的属性以及方法了
    console.log(child.add);

通过call  或 apply 来实现继承

 //call 无参
    function Person(){
        this.name = ‘lemon‘;
        this.age = ‘18‘;
    }
    function show(){
        alert(this.name+‘:‘+this.age);
    }
    var p = new Person;
    //通过call方法使show方法中的this指向p对象
    show.call(p);

    //call有参
    function Person2(){
        this.name = ‘lemon‘;
        this.age = ‘18‘;
    }
    function show2(id,add){
        alert(this.name+‘:‘+this.age+‘,‘+id+‘,‘+add);
    }
    var p2 = new Person2;
    //通过call方法使show方法中的this指向p对象
    show2.call(p2,‘001‘,‘山东‘);

    //apply 无参
    function Person3(){
        this.name = ‘lemon‘;
        this.age = ‘18‘;
    }
    function show3(){
        alert(‘apply无参:‘+this.name+‘:‘+this.age);
    }
    var p3 = new Person3;
    //通过apply方法使show方法中的this指向p对象
    show3.apply(p3);

    //apply有参
    function Person4(){
        this.name = ‘lemon‘;
        this.age = ‘18‘;
    }
    function show4(id,add){
        alert(‘apply有参‘+this.name+‘:‘+this.age+‘,‘+id+‘,‘+add);
    }
    var p4 = new Person4;
    //通过apply方法使show方法中的this指向p对象
    show4.apply(p4,[‘001‘,‘山东‘]);


    /*通过call apply实现继承*/
    //父类
    function Parent(add,net,no,teacher) {
        this.add = add;
        this.net = net;
        this.no = no;
        this.teacher = teacher;
    }
    //子类
    function Child(name,age,sex,id) {
        this.name = name;
        this.sex = sex;
        this.age = age;
        this.id = id;
        //Parent.call(this,‘山东‘,‘www.lemon-x.ml‘,‘001‘,‘ccy‘);
        Parent.apply(this,[‘山东‘,‘www.lemon-x.ml‘,‘001‘,‘ccy‘]);
    }
    var child = new Child(‘lemon‘,‘18‘,‘man‘,‘002‘);
    console.log(child.net);