Javascript面向对象—继承

前面讲了怎样用Javascript怎样实现面向对象特性，现在实现怎样用Javascript来实现面向对象中的【继承】重要的功能；

【继承】字面上理解就是子女继承父辈的东西。而对于编程语言来说，继承就是子类继承来自父类的方法或属性，然后进行相应的扩展。这样间接的达到了复用的效果；

var parentClass1=function(name,age,sex){//创建父类prantClass
	this.name=name;
    this.age=age;
    this.sex=sex;
}
var childrenClass=function(addr,Sg){//创建子类childClass
    this.addr=addr;
    this.Sg=Sg;
    this.showInfo=function(){
    console.log("name:"+this.name);
    console.log("age:"+this.age);
    console.log("sex:"+this.sex);
    console.log("address:"+this.addr);
    console.log("Sg:"+this.Sg);
   }
}
childrenClass.prototype=new parentClass1("张三","男",26);//通过原型子类继承父类实例化parentClass1
var childObj=new childrenClass("江西南昌","176cm");
childObj.showInfo();

以上代码定义了父类parentClass1，它通过子类继承父类，从而子类中可以引用到父类的属性name，sex，age；这里实现继承的方式是通过JS的原型prototype实现的；

通过原型实现继承有个问题就是不能通过实例化子类来跟父类传递数据；如果在继承的时候必须通过给子类的构造函数赋值来改变父类构造函数的赋值，那这样就达不到复用的效果；

由于Javascript是灵活性的，所以我们可以通过apply或call方法来实现，apply和call方法不是继承方法，它们只是改变了上下文环境而已；代码如下：

ar parentClass1=function(name,age,sex){//创建父类prantClass
            this.name=name;
            this.age=age;
            this.sex=sex;
        }
var childrenClass=function(name,age,sex,addr,Sg){
            this.addr=addr;
            this.Sg=Sg;
            parentClass1.call(this,name,age,sex);//在子类中加上这个call就可以通过子类来跟父类传递数据了
            this.showInfo=function(){
                console.log("name:"+this.name);
                console.log("age:"+this.age);
                console.log("sex:"+this.sex);
                console.log("address:"+this.addr);
                console.log("Sg:"+this.Sg);
            }
        }
        childrenClass.prototype=new parentClass1();//这种继承方式无法初始化父类构造函数
        var childObj=new childrenClass("张三","男",26,"江西南昌","176cm");
        childObj.showInfo();

以上用法只是继承用法属于单继承，不要给子类prototype属性实例化多个父类，这样子类只能继承最后一次绑定的父类；

多继承的用法我理解为，并不是真正意义上的多继承，只是将多个对象中的属性或方法复制到子类中；实现代码如下：

var m_extend=function(){
            var len=arguments.length,
                target=arguments[0],
                arg;//arg用来临时保持当前遍历的对象
                for(var i=1;i<len;i++){//for循环从1开始，因为第一个参数往往是目标对象
                    arg=arguments[i];
                    for(var pro in arg){
                        target[pro]=arg[pro];
                    }
                }
                return target;
        }
        var targetObj={
            name:"张三",
            showObj:function(){
                console.log(this);
            }
        }
        var obj1={
            age:26
        }
        var obj2={
            sex:"男"
        }
        targetObj=m_extend(targetObj,obj1,obj2);
        targetObj.showObj(); //Object {name: "张三", age: 26, sex: "男", showObj: function}

严格来说Javascript无法通过原型链实现多继承，这是由于Javascript原型链是单条的引起，在Javascript不能有多个原型链，它查找某个属性或者方法的时候只能通过原型链想上级层级查找，一直找到为止。有兴趣可以去了解关于原型和原型链的文章；

Javascript面向对象—继承

猜你喜欢