JS中的类，类的继承方法

Posted 2020-09-02 小凡

大牛请无视此篇！

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

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);