Vue3+Ts第三天

第五集 Es5中的类和静态方法 继承

es5中的类

1、最简单的类

function Person(){
	this.name = '张三'
	this.age = 20
}
var p = new Person()
console.log(p.name)

2、构造函数和原型链里面可以增加方法

function Person(){
//构造函数
	this.name = '张三'
	this.age = 20
	this.run = function(){
		console.log(this.name+'在运动')
	}
}
//原型链上面的属性会被多个实例共享 构造函数
Person.prototype.sex = '男'
Person.prototype.work = function(){
	console.log(this.name +'在工作'
)}
var p = new Person()
p.run();
p.work ();

3、类里面的静态方法

function Person(){
//构造函数
	this.name = '张三'
	this.age = 20
	this.run = function(){
		console.log(this.name+'在运动')
	}
}
Person.prototype.sex = '男'
Person.prototype.work = function(){
	console.log(this.name +'在工作'
)}
Person.getInfo = function(){
	console.log('我是静态方法'
)}
//调用
Person.getInfo ();

4、es5里面的继承

function Person(){
	this.name = '张三'
	this.age = 20
	this.run = function(){
		console.log(this.name+'在运动')
	}
}
Person.prototype.sex = '男'
Person.prototype.work = function(){
	console.log(this.name +'在工作'
)}
//web类 继承Person类  原型链+对象冒充的组合继承模式

4.1、构造函数继承

var web = function(){
	Person.call(this);//对象冒充实现继承构造函数的属性和方法 但是没法继承原型链上面的属性继承
}
var v= new web();
v.run();

4.2、原型链继承

var web = function(){
}
web.prototype = new Person();//原型链实现继承 既可以实现构造函数的属性和方法 也可以实现原型链的属性和方法
//但实例化子类的时候没法给父类传参

4.3、原型链+对象冒充的组合继承模式

var web = function(){
	Person.call(this);
}
//方法1
web.prototype = new Person();
//方法2
web.prototype = Person.prototype;
var v= new web();
v.run();

第六集 ts中的类

ts中的类的定义

实例1

//es5
function Person(name){
	this.name = name
	this.run = function(){
		console.log(this.name+'在运动')
	}
}
var p = new Person('张三')
console.log(p.name)
//ts
class Person{
	name:string;//属性 前面省略了public关键词
	constructor(n:string){ // 构造函数  实例化类的时候出发的方法
		this.name = n
	}
	run():void{
		console.log(this.name)	
	}
}
var p = new Person('张三')//实例化对象 就会触发这个构造函数 就会把张三就会赋值给n 给name赋值
console.log(p.name)

实例2

class Person{
	name:string;//属性 前面省略了public关键词
	constructor(n:string){ // 构造函数  实例化类的时候出发的方法
		this.name = n
	}
	getName():string{
		return this.name
	}
	setName(name):void{
		this.name = name
	}
}
var p = new Person('张三')//实例化对象 就会触发这个构造函数 就会把张三就会赋值给n 给name赋值
console.log(p.getName())//张三
p.setName('李四')
console.log(p.getName())//李四

ts中如何实现继承 extends super

class Person{
	name:string;//属性 前面省略了public关键词
	constructor(n:string){ // 构造函数  实例化类的时候出发的方法
		this.name = n
	}
	getName():string{
		return this.name
	}
	setName(name):void{
		this.name = name
	}
	run():string{
		return this.name+'在运动'
	}
}
var p = new Person('张三')//实例化对象 就会触发这个构造函数 就会把张三就会赋值给Person 给name赋值
console.log(p.getName())//张三
p.setName('李四')
console.log(p.getName())//李四
class Web extends Person{
	construtor(name:string){
		super(name)
	}
}
var w = new web('李四');
w.run();

//父类的方法和子类的方法一致吗？ 一致 但子类可以拓展方法 可以使用父类的参数 方法 调用首先在子类里面找 没有的话 往父类找

3类里面的修饰符 typescript 里面的定义属性的时候给我们提供了三种修饰符

public : 公有 在当前类里面，子类，外类里面都可以访问
protected ： 保护类型 在当前类里面 子类里面 可以访问 在类外面没法访问
private： 私有 在当前类里面可以访问 其他不可以访问

属性如果不加修饰符 就是公有public

class Person{
	public name:string;
	constructor(name:string){
		this.name = name
	}
	run():string{
		return this.name+'在运动'
	}
}
class Web extends Person{
	construtor(name:string){
		super(name)
	}
	work():string{
		return this.name
	}
}
//类外面访问
var p = new Person('李四')
console.log(p.name)//李四
//子类访问
var p = new Web ('李四')
console.log(p.work();)//李四
//在类里面访问
var p = new Person('李四')
console.log(p.run())//李四