JS對象繼承的幾種方式總結

標籤：ons   java   今天   完成   super   app   父類   on()   function   

今天學習了一下js的繼承，js中的繼承主要分四種，原型繼承，建構函式繼承，call/apply繼承以及es6的extend繼承。
1.原型繼承：
原型繼承主要利用js對象的prototype引用父類的建構函式來複製父類的方法。

//定義一個Person類     function Person(name){          this.name=name;      }      //打招呼    Person.prototype.sayHello=function(){          alert("Hello,my name is "+this.name);      }           //定義Man類，繼承Person類    function Man(name,age){        this.name=name;        this.age=age;     }    Man.prototype=new Person();    var man= new Man("隔壁老王",30);    man.sayHello();

2.建構函式繼承
子類中調用父類的建構函式，完成繼承。

 //定義一個Person類     function Person(name){          this.name=name;          this.sayHello=function(){          alert("Hello,my name is "+this.name);          }      }       //定義Man類，繼承Person類    function Man(name,age){        this.constructor=Person;        this.constructor(name);        this.age=age;    }    var man= new Man("隔壁老王",30);    man.sayHello();

3.call/apply繼承
利用call/apply方法調用父類建構函式實現繼承

 //定義一個Person類     function Person(name){          this.name=name;          this.sayHello=function(){          alert("Hello,my name is "+this.name);          }      }       //定義Man類，繼承Person類    function Man(name,age){        Person.call(this,name);        this.age=age;    }    var man= new Man("隔壁老王",30);    man.sayHello();

4.extends繼承
使用ES6定義類的方法，類似java定義類的方式實現繼承，注意部分瀏覽器不相容 - -

‘use strict‘;     //定義一個Person類     class Person{       //建構函式        constructor(name){            this.name=name;        }        sayHello(){            alert("My name is"+this.name);        }    }          class Man extends Person{        constructor(name,age){            //調用父類建構函式            super(name);            this.age=age;        }            }    var man= new Man("隔壁老王",30);    man.sayHello();

 

JS對象繼承的幾種方式總結