js 继承(1)

js 如何实现继承呢?

下面是一个简单的继承demo

console.clear();
//child 继承 parent
var extend=function(child,parent)
{
  child.prototype=new parent();
  
}
function A(){
  this.name="A";
  this.sayHello=function(){
    console.log("Hello , "+this.name);
  }
  
}

function B(){
  this.sex='man';
  this.mySex=function(){
    console.log("sex:"+this.sex);
  }
}



extend(B,A);

var b=new B();
b.mySex();
b.sayHello();

 运行结果:

sex:man

 

Hello , A

说明:B 本身没有sayHello 方法,而是从A 继承过来的.

 

那么我们再让B继承另外一个类C 

function C(){
  this.age=26;
  this.myAge=function(){
    console.log("age:"+this.age);
  }
}



extend(B,A);
extend(B,C);
var b=new B();
b.mySex();
b.sayHello();

 报错:

 继承C 之后,调用sayHello竟然报错,但是sayHello不是从A 继承过来的吗?

说明我们的继承方法有问题:

var extend=function(child,parent)
{
  child.prototype=new parent();
  
}

 B先继承A,然后继承C,那么之前继承A的属性都没了.这显然不合要求.

所以我优化一下继承方法:

//child 继承 parent
var extend=function(child,parent)
{
  var p1=child.prototype;
  child.prototype=new parent();
  child.prototype.__proto__=p1;
  
}

 完整代码如下:

console.clear();
//child 继承 parent
var extend=function(child,parent)
{
  var p1=child.prototype;
  child.prototype=new parent();
  child.prototype.__proto__=p1;
  
}
function A(){
  this.name="A";
  this.sayHello=function(){
    console.log("Hello , "+this.name);
  }
  
}

function B(){
  this.sex='man';
  this.mySex=function(){
    console.log("sex:"+this.sex);
  }
}

function C(){
  this.age=26;
  this.myAge=function(){
    console.log("age:"+this.age);
  }
}


extend(B,A);
extend(B,C);
var b=new B();
b.mySex();
b.sayHello();
b.myAge();

 执行结果:

sex:man

 

Hello , A

age:26

 

 

即B 成功地调用了A和C 的方法

 我们继续优化,因为__proto__在IE中不能访问.

优化的结果:

 //child 继承 parent
        var extend=function(child,parent)
        {
            var p1=child.prototype;
            var p2=parent.prototype;
            parent.prototype=p1;
            child.prototype=new parent();
            parent.prototype=p2;

        }
        function A(){
            this.name="A";
            this.sayHello=function(){
                console.dir("Hello , "+this.name);
            }

        }

        function B(){
            this.sex='man';
            this.mySex=function(){
                console.dir("sex:"+this.sex);
            }
        }

        function C(){
            this.age=26;
            this.myAge=function(){
                console.dir("age:"+this.age);
            }
        }


        extend(B,A);
        extend(B,C);
        var b=new B();
        b.mySex();
        b.sayHello();
        b.myAge();
        console.dir(A);
        console.dir(B);
        console.dir(C);

 运行结果:

 

 继承方法:

 //child 继承 parent
        var extend=function(child,parent)
        {
            var p1=child.prototype;
            var p2=parent.prototype;
            parent.prototype=p1;
            child.prototype=new parent();
            parent.prototype=p2;
            delete p1;
            delete p2;
        }