一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

详解js的三种继承方式

时间:2017-02-13 编辑:简简单单 来源:一聚教程网

1.js原型(prototype)实现继承

代码如下

 代码如下 复制代码

  function Parent(name,age){

     this.name=name;

     this.age=age;

     this.sayHi=function(){

        alert("Hi, my name is "+this.name+", my age is "+this.age);

     }

   }

//Child继承Parent

   function Child(grade){

     this.grade=grade;

     this.sayGrade=function(){

        alert("My grade is "+this.grade);

     }

   }

   Child.prototype=new Parent("小明","10");///////////

   var chi=new Child("5");

   chi.sayHi();

   chi.sayGrade();

2.构造函数实现继承 

代码如下:

 代码如下 复制代码

  function Parent(name,age){

     this.name=name;

     this.age=age;

     this.sayHi=function(){

        alert("Hi, my name is "+this.name+", my age is "+this.age);

     }

   }

//Child继承Parent

   function Child(name,age,grade){

     this.grade=grade;

     this.sayHi=Parent;///////////

     this.sayHi(name,age);

     this.sayGrade=function(){

        alert("My grade is "+this.grade);

     }

   }

   var chi=new Child("小明","10","5");

   chi.sayHi();

   chi.sayGrade();

3.call , apply实现继承         -----很方便!

代码如下:

 代码如下 复制代码

  function Parent(name,age){

     this.name=name;

     this.age=age;

     this.sayHi=function(){

        alert("Hi, my name is "+this.name+", my age is "+this.age);

     }

   }

   function Child(name,age,grade){

     this.grade=grade;

     // Parent.call(this,name,age);///////////

     // Parent.apply(this,[name,age]);/////////// 都可

     Parent.apply(this,arguments);///////////

     this.sayGrade=function(){

        alert("My grade is "+this.grade);

     }

    // this.sayHi=function(){

     //   alert("Hi, my name is "+this.name+", my age is "+this.age+",My grade is "+this.grade);

     // }

   }

   var chi=new Child("小明","10","5");

   chi.sayHi();

   chi.sayGrade();

热门栏目