JS對象繼承的幾種方式總結
阿新 • • 發佈:2017-07-19
tor style div on() 引用 super 繼承 不兼容 font
今天學習了一下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對象繼承的幾種方式總結