typescript - 4.es5與typescript的類與繼承
阿新 • • 發佈:2019-05-08
組合 繼承 his () 屬性和方法 增加方法 構造 但是 var
``` javascript
function Person() {
this.name = ‘張三‘; /屬性/
this.age = 20;
this.run = function () { /實例方法/
alert(this.name + ‘在運動‘);
}
ES5中的類與類的繼承
(1)簡單的類
function Person() {
this.name = '張三';
this.age = 20;
}
var p = new Person();
alert(p.name);
(2)構造函數和原型鏈裏面增加方法
function Person() { this.name = '張三'; /*屬性*/ this.age = 20; this.run = function () { alert(this.name + '在運動'); } } //原型鏈上面的屬性會被多個實例共享 構造函數不會 Person.prototype.sex = "男"; Person.prototype.work = function () { alert(this.name + '在工作'); } var p = new Person(); // alert(p.name); // p.run(); p.work();
(3)ES5靜態方法
function Person() {
this.name = '張三'; /*屬性*/
this.age = 20;
this.run = function () { /*實例方法*/
alert(this.name + '在運動');
}
}
Person.getInfo = function () {
alert('我是靜態方法');
}
//調用靜態方法
Person.getInfo();
(4)es5裏面的繼承 對象冒充實現繼承
對象冒充可以繼承構造函數裏面的屬性和方法 但是沒法繼承原型鏈上面的屬性和方法
function Person() {
this.name = ‘張三‘; /屬性/
this.age = 20;
this.run = function () { /實例方法/
alert(this.name + ‘在運動‘);
}
} Person.prototype.sex = "男"; Person.prototype.work = function () { alert(this.name + '在工作'); } //Web類 繼承Person類 原型鏈+對象冒充的組合繼承模式 function Web() { Person.call(this); /*對象冒充實現繼承*/ } var w = new Web(); // w.run(); //對象冒充可以繼承構造函數裏面的屬性和方法 w.work(); //對象冒充可以繼承構造函數裏面的屬性和方法 但是沒法繼承原型鏈上面的屬性和方法
```
(5)es5裏面的繼承 原型鏈實現繼承
原型鏈實現繼承:可以繼承構造函數裏面的屬性和方法 也可以繼承原型鏈上面的屬性和方法
function Person() {
this.name = '張三'; /*屬性*/
this.age = 20;
this.run = function () { /*實例方法*/
alert(this.name + '在運動');
}
}
Person.prototype.sex = "男";
Person.prototype.work = function () {
alert(this.name + '在工作');
}
//Web類 繼承Person類 原型鏈+對象冒充的組合繼承模式
function Web() {
}
Web.prototype = new Person(); //原型鏈實現繼承
var w = new Web();
//原型鏈實現繼承:可以繼承構造函數裏面的屬性和方法 也可以繼承原型鏈上面的屬性和方法
//w.run();
w.work();
(6)原型鏈繼承的問題?有參數的情況
實例化子類的時候沒法給父類傳參
function Person(name,age){
this.name=name; /*屬性*/
this.age=age;
this.run=function(){ /*實例方法*/
alert(this.name+'在運動');
}
}
Person.prototype.sex="男";
Person.prototype.work=function(){
alert(this.name+'在工作');
}
function Web(name,age){
}
Web.prototype=new Person();
var w=new Web('趙四',20); //實例化子類的時候沒法給父類傳參
w.run();
// var w1=new Web('王五',22);
(7)原型鏈+對象冒充的組合繼承模式
有參數的的情況下,原型鏈+對象冒充,可以傳參給子類
function Person(name,age){
this.name=name; /*屬性*/
this.age=age;
this.run=function(){ /*實例方法*/
alert(this.name+'在運動');
}
}
Person.prototype.sex="男";
Person.prototype.work=function(){
alert(this.name+'在工作');
}
function Web(name,age){
Person.call(this,name,age); //對象冒充繼承 實例化子類可以給父類傳參
}
Web.prototype=new Person();
var w=new Web('趙四',20); //實例化子類的時候沒法給父類傳參
// w.run();
w.work();
// var w1=new Web('王五',22);
(8)原型鏈+對象冒充繼承的另一種方式
Web.prototype=new Person();
的另一種寫法
Web.prototype=Person.prototype;
Typescript中的類
typescript - 4.es5與typescript的類與繼承