3.4 类
3.4.1 es5中的类:
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();
p.run();
p.work();
类中的静态方法:
function Person() {
this.name = '张三';
this.age= 20;
// 在构造函数中增加方法
this.run= function() { // 实例方法
alert(this.name);
}
}
//原型链上增加方法:
// 原型链上的属性会被多个实例共享,构造函数不会
Person.prototype.sex = '男';
Person.prototype.work = function() {
alert(this.name+'在工作');
}
Person.getInfo = function() {
alert('静态方法:');
}
var p = new Person();
p.run();
p.work();
//调用静态方法
Person.getInfo();
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(); // 直接报错,无法继承原型链上面的属性和方法。
原型链实现继承:
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() {
}
Web.prototype = new Person(); // 既可以继承构造函数中的属性方法也可可继承原型链上的方法
var w = new Web('wangwu', 23); // 实例化子类的时候无法给父类传参
w.run();
w.work();
原型链+对象组合实现继承
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() {
Person.call(this,name,age); // 对象冒充继承,实例化子类可以给父类传参
}
Web.prototype = new Person(); // 既可以继承构造函数中的属性方法也可可继承原型链上的方法
// or
Web.prototype = Person.prototype;// 无法区分对象的实例还是子类的实例
// 优化:
## 创建一个中间对象,同时把父类的原型对象赋初值:
Web.prototype = Object.create(Person.prototype);
## 区分了父类和子类的原型对象关系
Web.prototype.constructor = Web;
var w = new Web('wangwu', 23); // 实例化子类的时候无法给父类传参
w.run();
w.work();
3.4.2 ts中的类:
class Person{
// 定义属性:
name:string, // 前面省略了public关键词
constructor(name:string) { // 构造函数 实例化类的时候出发的方法
this.name = name
}
run():void{
alert(this.name);
}
}
// 实例化:
var p = new Person('张三');
p.run();
class Person{
// 定义属性:
name:string, // 前面省略了public关键词
constructor(name:string) { // 构造函数 实例化类的时候触发的方法
this.name = name
}
getName():string{
return this.name;
}
setName(name:string):void{
return this.name = name;
}
}
// 实例化:
var p = new Person('张三');
p.getName(); // 张三
p.setName('李四');
p.getName(); // 李四
3.4.3 ts中实现继承 extends / super
class Person{
name:string;
constructor(name:string) {
this.name = name;
}
run():string{
return `${this.name}在运动`;
}
}
class Web extends Person{
constructor(name:string) {
super(name); //super调用父类的构造函数 实现继承
}
}
var w = new Web('李四');
w.run();
## 如果子类和父类的方法相同,输出子类的方法。一般都是从子类找方法,如果没有在到父类中找方法。
3.4.4 ts类里面的修饰符 ts中定义属性的时候提供了三种修饰符
public : 共有, 在当前类里面,子类,类外面都可以访问
protected :保护类型 在当前类里面,子类里面可以访问,外部无法访问
private :私有的,在当前类里面可以访问,子类,类外部无法访问。
属性不添加修饰符默认是public
class Person{
public name:string;
constructor(name:string) {
this.name = name;
}
run():string{
return `${this.name}在运动`;
}
}
class Web extends Person{
constructor(name:string) {
super(name); // 子类可以访问
}
}
var w = new Web('李四');
w.run();
3.4.5 静态属性,静态方法
es5中的静态方法:
function Person() {
this.run1 = function() { // 实例方法
xxx
}
}
Person.run2 = function() { // 静态方法
xxx
}
// 调用:
var p = new Person();
p.run1();
Person.run2(); // 静态方法的调用
ts中的静态属性和方法
class Person{
public name:string;
static sex = '男'
constructor(name:string) {
this.name = name;
}
run():string{ // 实例方法
return `${this.name}在运动`;
}
work() {
alert(`${this.name}在工作`);
}
// 静态方法:
static print() {
alert(`print方法`);
// 静态方法里面没法直接调用类里面的属性,可以设置静态属性
alert(`${this.sex}`);
}
}
// 静态方法的调用:
Person.print();
Person.sex;
3.4.6 ts中的多态:父类定义一个方法不去实现,让其继承它的子类去实现,每一个子类有不同的表现
多态属于继承
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+'吃老鼠';
}
}
3.4.7 抽象方法 它提供其他类继承的基类,不能被直接实例化。
用abstruct关键字定义抽象类和抽象方法,抽象类中的抽象方法不包含具体实现并且必须在派生类中实现
abstruct抽象方法只能放在抽象类里
抽象类和抽象方法用来定义标准
eg:抽象类和抽象方法用来定义标准,标准:Animal 这个类要求它的子类必须包含eat方法
抽象方法实现抽象类
// 是一个被其他类继承的基类,子类必须要实现抽象类中的方法
abstract class Animal{
public name:string;
constructor(name:string) {
this.name = name;
}
abstruct eat():any;
}
class Dog extends Animal{
constructor(name:string) {
super(name)
}
// 抽象类的子类必须实现抽象类里面的抽象方法
eat() {
console.log(this.name+'吃肉');
}
}
var d = new Dog('lamu');
d.eat();
class Cat extends Animal{
constructor(name:any) {
super(name)
}
run() {
}
eat() {
console.log(this.name+'吃老鼠');
}
}
var c = new Cat('小黑');
c.eat();