js继承方式详解

js中继承能够分为两种：对象冒充和原型链方式

    1、对象冒充包括三种：临时属性方式、call()及apply()方式

      1.临时属性方式:      

1 function A(x){
2 　　this.x=x;
      this.say = function(){
          alert('My name is '+this.name);
      }
3 }  
4  function B(x,y){
5 　　this.tmpObj=A;
6 　　this.tmpObj(x);
7 　　delete this.tmpObj;
8 　　this.id = y;
      this.showId = function(){
           alert('Good morning,Sir,My work number is '+this.id);
      }
9 }
var simon = new B('Simon',9527);
simon.say();
simon.showId();

/**/第五、六、7行：建立临时属性tmpObj引用构造函数A，而后在B内部执行，执行完后删除。当在B内部执行了 this.x=x后（这里的this是B的对象），B固然就拥有了x属性，固然B的x属性和A的x属性二者是独立，因此并不能算严格的继承。第五、六、7行有更简单的实现，就是经过call(apply)方法：A.call(this,x);

  2.call()/apply()方式：实质上是改变了this指针的指向、

function Person(name){
     this.name = name;
     this.say = function(){
          alert('My name is '+this.name);
     }
}
function F2E(name,id){
     Person.call(this,name); //apply()方式改为Person.apply(this,[name]);
     this.id = id;
     this.showId = function(){
          alert('Good morning,Sir,My work number is '+this.id);
     }
}
var simon = new F2E('Simon',9527);
simon.say();
simon.showId();

  /**/call和apply均可以实现继承，惟一的一点参数不一样，func.call(func1,var1,var2,var3)对应的apply写法为：func.apply(func1,[var1,var2,var3])。

 经过对象冒充的方式，没法继承经过prototype方式定义的变量和方法：

function Person(name){
     this.name = name;
     this.say = function(){
          alert('My name is '+this.name);
     }
}
Person.prototype.age = 20;
Person.prototype.sayAge = function(){alert('My age is '+this.age)};

function F2E(name,id){
     Person.apply(this,new Array(name));
     this.id = id;
     this.showId = function(){
          alert('Good morning,Sir,My work number is '+this.id);
     }
}

var simon = new F2E('Simon',9527);
simon.sayAge(); //提示TypeError: simon.sayAge is not a function

2、原型链继承（能够继承经过prototype方式定义的变量和方法：）

  一：

function Parent(){   
    this.name = 'mike';
 }    
 function Child(){ 
       this.age = 12;
    
  }
  Child.prototype = new Parent();//Child继承Parent，经过原型，造成链条
  var test = new Child();
  alert(test.age);
  alert(test.name);//获得被继承的属性
  //继续原型链继承
  function Brother(){   //brother构造
      this.weight = 60;
  }
  Brother.prototype = new Child();//继续原型链继承
  var brother = new Brother();
  alert(brother.name);//继承了Parent和Child,弹出mike
  alert(brother.age);//弹出12

  二：

function Person(){
     this.name = 'Simon';
}
Person.prototype.say = function(){
     alert('My name is '+this.name);
}

function F2E(id){
     this.id = id;
     this.showId = function(){
          alert('Good morning,Sir,My work number is '+this.id);
     }
}
F2E.prototype = new Person();

var simon = new F2E(9527);
simon.say();
simon.showId();
alert(simon.hasOwnProperty('id')); //检查是否为自身属性

       原型链能够理解成：js中每一个对象均有一个隐藏的__proto__属性，一个实例化对象的__proto__属性指向其类的prototype方法，而这个prototype方法又能够被赋值成另外一个实例化对象，这个对象的__proto__又须要指向其类，由此造成一条链，也就是前面代码中的 F2E.prototype = new Person();

        缺点显而易见，原型链方式继承，就是实例化子类时不能将参数传给父类，也就是为何实例二中的function Person()没有参数，而是直接写成了this.name=”Simon”的缘由。下面的代码将不能达到预期的效果：

unction Person(name){
     this.name = name;
}

Person.prototype.say = function(){
     alert('My name is '+this.name);
}

function F2E(name,id){
     this.id = id;
     this.showId = function(){
          alert('Good morning,Sir,My work number is '+this.id);
     }
}

F2E.prototype = new Person();  //此处没法进行传值，this.name或者name都不行，直接写F2E.prototype = new Person('wood')是能够的，可是这样的话simon.say()就变成了My name is wood

var simon = new F2E("Simon",9527);
simon.say();  //弹出 My name is undefined
simon.showId();

 

综上分析所得：javascript中最经常使用的继承模式 组合继承

<script type="text/javascript"> 
//建立基类 
function Person(name, age) { 
  this.name = name; 
  this.age = age; 
} 
//经过原型方式给基类添加函数（这样能够服用此函数） 
Person.prototype.showName = function () { 
alert(this.name); 
} 
//建立子类 
function Student(name, age, score) { 
  this.score = score; 
  Person.call(this,name,age); 
} 
//把父类的实例赋值给子类的原型 
Student.prototype = new Person(); 
//经过原型方式给子类添加函数（这样能够服用此函数） 
Student.prototype.showScore = function () { 
  alert(this.score); 
} 

//如下为使用 
var student = new Student("zhangsan", 22, 100); 
student.showName(); 
student.showScore(); 
</script>

 

参照：http://www.jb51.net/article/24556.htm

            http://www.jb51.net/article/47619.htm

            http://www.javashuo.com/article/p-ueosnihj-ew.html

           http://www.cnblogs.com/ljchow/archive/2010/06/08/1753526.html