概要
類的創(chuàng)建
源碼
//創(chuàng)建一個類
class Person{
//增加兩個屬性
name:string;
age:number;
//增加可以傳參的構(gòu)造方法
constructor(name:string,age:number){
this.name = name;
this.age = age;
}
//增加一個自定義的普通的打印函數(shù)
print(){
return this.name + ":" + this.age;
}
}
//使用上面創(chuàng)建的類
// var p = new Person();//這里在使用上面的類時沒有傳遞參數(shù)是會報錯的荠卷，因為上面定義的 constructor 構(gòu)造方法中存在參數(shù)，所以這里也一定要傳遞參數(shù)
var p = new Person('xiaochuan',22);
alert(p.print());
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TypeScript 類(Classes)的創(chuàng)建</title>
</head>
<body>
<script type="text/javascript" src="Functions.js"></script>
</body>
</html>
類的繼承
源碼一 未使用 constructor 構(gòu)造方法
//創(chuàng)建一個最基本的類
class Person{
//增加兩個屬性
name:string;
age:number;
//增加一個自定義的普通的輸出函數(shù)
tell(){
return this.name + ":" + this.age;
}
}
//再新建一個擴展自 Person 這個類的子類
//這樣擴展之后 這個 Student 就也有了 name 和 age 兩個屬性笆怠，還用 tell 這個方法
class Student extends Person{
//還可以給 Student 新增自己的屬性
school:string;
//這里還可以重寫繼承而來的方法
tell(){
return this.name + ":" + this.age + ":" + this.school;
}
}
//使用這個子類
var s = new Student();
// s.tell();//這樣直接寫是沒有任何的輸出的因為上面沒有對其屬性做任何的賦值
//下面是賦值之后再輸出
s.name = 'xiaochuan';
s.age = 22;
s.school = '北京大學(xué)';
alert(s.tell());
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TypeScript 類(Classes)的繼承</title>
</head>
<body>
<script type="text/javascript" src="Functions.js"></script>
</body>
</html>
源碼二 使用 constructor 構(gòu)造方法實現(xiàn)
//接著再在上面的 Person 類中增加一個 constructor 構(gòu)造方法
//創(chuàng)建一個最基本的類
class Person{
//增加兩個屬性
name:string;
age:number;
//新增一個構(gòu)造方法
constructor(name:string,age:number){
this.name = name;
this.age = age;
}
//增加一個自定義的普通的輸出函數(shù)
tell(){
return this.name + ":" + this.age;
}
}
//再新建一個擴展自 Person 這個類的子類
//這樣擴展之后 這個 Student 就也有了 name 和 age 兩個屬性，還用 tell 這個方法
class Student extends Person{
//還可以給 Student 新增自己的屬性
school:string;
//這里因為 Person 有構(gòu)造方法如果子類不傳遞的話就會報錯待德，所以也要增加
//這里參數(shù)直接傳遞這個子類自增的屬性即可
constructor(school:string){
//再在內(nèi)部使用 super 的方法繼承來自 Person 父類中定義的方法 b并將相應(yīng)的參數(shù)傳遞進(jìn)去
super('xiaochuan',22);
this.school = school;
}
//這里還可以重寫繼承而來的方法
tell(){
return this.name + ":" + this.age + ":" + this.school;
}
}
//這個時候使用這個子類時直接傳遞 school 的值即可
var s = new Student('北京大學(xué)');
//上面已經(jīng)通過構(gòu)造方法將所有的屬性值都已經(jīng)傳遞過了所以這里就不需要再傳遞了丁眼，可以直接輸出結(jié)果了
// s.name = 'xiaochuan';
// s.age = 22;
// s.school = '北京大學(xué)';
alert(s.tell());
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TypeScript 類(Classes)的繼承</title>
</head>
<body>
<script type="text/javascript" src="Functions.js"></script>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
