类(回顾一下ES5)
// es5中最简单的类
function Person() {
// 构造函数定义
this.name = '张三';
this.age = '30';
this.run = funciton(){
alert(this.name+'在跑步')
}
}
// 原型链中定义,原型链上的属性会被多个实例共享,构造函数不会
Person.prototype.sex = '男'
// 静态方法
Person.getInfo = function () {
console.log('静态方法')
}
// Web类 继承Person类 原型链+对象冒充的组合继承模式
function Web(){
Person.call(this) //对象冒充实现继承
}
var w = new Web()
w.run() //张三在跑步(对象冒充可以继承构造函数的属性和方法)
console.log(w.sex) //undefined (不能继承原型链上面的属性和方法)
var person = new Person() //实例化
function Fn() {
}
Fn.prototype = new Person //原型链继承
var q = new Fn()
console.log(q.sex) // 男 (原型链继承既可以继承构造函数的属性和方法,也可以继承原型链上面的属性和方法,但是无法给父类传参。)
console.log(person.name) // 张三
组合继承加原型链继承
function Person(name,age) {
// 构造函数定义
this.name = name;
this.age = age;
this.run = funciton(){
alert(this.name+'在跑步')
}
}
Person.prototype.sex = '男'
function Web(name,age) {
Person.call(this,name,age) // 对象冒充继承 实例化子类可以给父类传参
}
Web.prototype = new Person() // 原型链继承
var w = new Web('张三',20) //实例化子类的时候无法将参数传给父类
w.run() // 张三在跑步
ts 中的类
下面写出了类的定义,方法的定义,方法的传值,改变属性,获取属性
class Person {
name:string; //属性,前面省略了public关键字
constructor(n:string) {
this.name = n
}
getName():string{ // 获取的方法
return this.name
}
setName(name:string) :void{ //设置的方法
this.name = name
}
}
let p = new Person('张三')
console.log(p.getName()) // 张三
p.setName('李四')
console.log(p.getName()) //李四
TS中的继承
主要通过两个关键字实现,extends ,super,super相当于 实例化子类,调用父类的构造函数。
类里面的修饰符,typescript里面定义属性的时候给我们提供了三种修饰符
1.public: 公有(在类里面,子类,类外面都可以访问)
2.protected: 保护类型(在类里面,子类里面可以访问,在类外面无法访问)
3.private: 私有(在类里面可以访问,子类、类外部都无法访问)
属性如果不加修饰符,默认就是公有(public)
class person {
public name:string; // 公有属性(name:string效果一样)
constructor(name:string) {
this.name = name;
}
run ():string{
return `${this.name}在运动`
}
}
let p = new Person('欢喜')
console.log(p.run()) // 欢喜在运动
// 继承父类
class Web extends Person {
constructor(name:string){
super(name) // 初始化父类的构造函数
}
run () {
alert(`${this.name}在打代码。`) // 同样的方法,会走子类的方法
}
work (){ // 也可以拓展自己的方法
alert(`${this.name}在工作`)
}
}
let w = new Web('老夫子')
console.log(w.run()) // 老夫子在打代码。
再看看ES5中的静态属性,静态方法在TS中如何定义
在javaScript中,实例方法的调用必须实例化构造函数,静态方法的调用直接调用就可以,同理,静态属性也是一样的,在jq源码中大多数都是这么玩的,例如,
$('#box').css('color', 'red');$.get(url,callback)
function Per( ){
// 实例方法
this.Fn = function() {
console.log(1)
}
}
Per.Fn1 = function () { //静态方法
console.log(2)
}
var p = new Per()
p.Fn() // 实例方法的调用
Per.Fn1() //静态方法的调用
TS中的定义(静态方法)
静态方法无法调用类里面的属性,可以调用静态属性
class Person {
public name:string
static sex = '男'
constructor(name:string){
this.name = name
}
fun(){
alert(`${this.name}`在运动)
}
static print(){ //静态方法
alert('静态方法')
console.log(Person.sex) //静态属性可以调用
}
}
Person.print() //同样的静态方法直接调用
多态: 父类定义一个方法不去实现,让继承他的子类去实现,每一个子类有不同表现,多态属于继承
class Animal {
name:string;
constructor(name:string){
this.name = name;
}
eat(){
console.log('吃的方法')
}
}
class Dog extends Animal {
constructor(name:string){
super(name)
}
eat(){
return this.name + '吃火腿'
}
}
class Cat extends Animal {
constructor(name:string){
super(name)
}
eat(){
return this.name + '吃老鼠'
}
}
TS中的抽象类(abstract(关键字)抽象方法只能放在抽象类里面),它是提供其他类继承的基类,无法直接实例化抽象类。
//定义一个标准:抽象方法在子类中必须实现
abstract class Animal {
public name:string;
constructor(name:string){
this.name = name
}
abstract eat():any; //抽象方法只能放在抽象类里面
}
// 抽象类的子类必须实现抽象类里面的抽象方法
class Dog extends Animal {
constructor(name:any){
super(name)
}
eat(){
console.log(this.name + '吃火腿')
}
}
var d = new Dog('小花')
d.eat();