到哪个网站做任务,学校网站模板 中文,黑客收徒网站建设,免费建站好不好一、es5 对象
1、定义 类#xff08;对象#xff09;
原型链上的属性和方法会被多个实例共享。构造函数中的属性和方法不会。
// 自定义构造函数
function Person(name, age) {this.name namethis.age agethis.getInfo function() {console.log(${this.name} - ${this.…一、es5 对象
1、定义 类对象
原型链上的属性和方法会被多个实例共享。构造函数中的属性和方法不会。
// 自定义构造函数
function Person(name, age) {this.name namethis.age agethis.getInfo function() {console.log(${this.name} - ${this.age})}
}// 原型对象增加属性和方法
Person.prototype.sex 男
Person.prototype.getOtherInfo function() {console.log(${this.name} - ${this.age} - ${this.sex})
}let person new Person(zhangsan, 20)
person.getInfo() // zhangsan - 20
person.getOtherInfo() // zhangsan - 20 - 男2、类中的静态方法
静态方法不需要实例化通过【 类.方法名称() 】形式调用实例方法必须 new 创建对象后才能调用。
function Person(name, age) {this.name namethis.age agethis.getInfo function() { // 实例方法console.log(${this.name} - ${this.age})}
}Person.staticFun function() {console.log(静态方法)
}Person.staticFun() // 静态方法3、组合继承借用构造函数 call | apply 原型继承 prototype
借用构造函数只能动态传参不能继承构造函数原型对象上的属性和方法原型继承只能继承构造函数原型对象上的属性和方法实例化子类的时候不能给父类传参。
1 借用构造函数继承属性Parent.call(this, params)、Parent.apply(this, [params]) 2 原型继承方法Children.prototype new Parent(); Children.prototype.constructor Children;
function Person(name, age) {this.name namethis.age agethis.getInfo function () {console.log(${this.name} - ${this.age})}
}Person.prototype.sex 男
Person.prototype.getOtherInfo function () {console.log(${this.name} - ${this.age} - ${this.sex})
}// 借用构造函数
function Children(name, age) {Person.call(this, name, age)
}
// 原型继承
Children.prototype new Person()
Children.prototype.constructor Childrenconst child new Children(lily, 15)
child.getInfo() // 借用构造函数可以继承构造函数中的属性和方法
child.getOtherInfo() // 原型继承可以继承构造函数原型对象上的属性和方法二、typescript中的类
1、定义类
class Person {name: string // 属性前面省略了public 关键字constructor(name: string) { // 构造函数实例化类时触发的方法this.name name}getInfo(): string {return this.name}setInfo(name: string): void {this.name name}
}const person new Person(zhangsan)
person.getInfo() // zhangsan
person.setInfo(lily)
person.getInfo() // lily2、继承 extends、super
class Person {public name: stringconstructor(name: string) {this.name name}getInfo(): string {return this.name}
}class People extends Person {public age: numberconstructor(name: string, age: number) {super(name) // 初始化父类构造函数this.age age}getOtherInfo(): string {return 姓名${this.name} 年龄${this.age}}
}const people new People(lily, 20)
people.getInfo() // lily
people.getOtherInfo() // 姓名lily 年龄203、类的修饰符
typescript 里面定义属性的时候提供了三种修饰符属性如果不加类型默认为 public。
修饰符说明public公有类型在类里面、子类里面、类外面都可以访问protected保护类型在类里面、子类里面可以访问在类外部无法访问private私有类型在类里面可以访问子类、类外部都无法访问
// 父类
class Person {public name: string // 公共属性protected age: number // 受保护属性private sex: string // 私有属性constructor(name: string, age: number, sex: string) {this.name namethis.age agethis.sex sex}getInfo(): string {// 类里访问 公共属性、受保护属性、私有属性正常return 姓名${this.name} - 年龄${this.age} - 性别${this.sex}}
}const person new Person(慢慢, 20, 男)
console.log(person.name) // 类外部访问公共属性正常
console.log(person.age) // 类外部访问受保护属性ts编译报错
console.log(person.sex) // 类外部访问私有属性ts编译报错// 子类
class People extends Person {constructor(name: string, age: number, sex: string, ) {super(name, age, sex)}getOtherInfo(): string {// 子类中访问私有属性ts编译报错 // console.log(this.sex)// 子类中访问公共属性、受保护属性正常return 姓名${this.name} - 年龄${this.age}}
}4、类的静态属性、静态方法
静态方法在实际场景中的使用以 jquery 为例了解即可。
// $ 符封装返回实例化对象
function $(element) {return new Base(element)
}// jquery 的静态方法 get
$.get function() { } // jquery 的实例化函数
function Base(element) {this.element document.getElementById(element) // 获取dom节点// jquery 的实例方法 cssthis.css function(attr, value) {this.element.style.attr value}
}// 使用 jquery 实例化后的方法 css
$(#box).css(color, red)
// 使用 jquery 静态方法 get
$.get(url, function() {}) typescript 中使用 static 关键字声明类的静态属性通过【 类.静态属性 】 形式进行访问。
typescript 中使用 static 关键字声明类的静态方法通过【 类.静态方法() 】 形式进行调用静态方法中无法直接使用类的属性。
class Person {public name: string // 公共属性static age: number 20 // 静态属性constructor(name: string) {this.name name}// 实例方法getInfo(): void {// 使用公共属性name、静态属性ageconsole.log(this.name, Person.age)}// 静态方法中无法直接使用类中的属性static print(): void {console.log(调用Person类的静态方法print)console.log(使用Person类的公共属性name失败${this.name})console.log(使用Person类的静态属性age成功${Person.age}) }
}// 调用 Person 类的静态方法
Person.print()
console.log(使用 Person 类静态属性age, Person.age)// 实例化 Person 类
const person new Person(莉莉)
person.getInfo() // 莉莉 205、多态
父类定义一个方法不去实现让继承它的子类去实现每一个子类有不同的表现。
多态属于继承。
class Animal {public name: string // 公共属性constructor(name: string) {this.name name}eat(): void { // 具体吃什么继承它的子类去实现没一个子类的表现不一样console.log(吃的方法)}
}class Dog extends Animal {constructor(name: string) {super(name)}eat(): void {console.log(${this.name}吃肉)}
}class Cat extends Animal {constructor(name: string) {super(name)}eat(): void {console.log(${this.name}吃鱼)}
}const dog new Dog(狗)
const cat new Cat(猫)
dog.eat() // 狗吃肉
cat.eat() // 猫吃鱼6、抽象类
typescript 中的抽象类是提供其他类继承的基类不能直接被实例化。
用 abstract 关键字定义抽象类和抽象方法抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。
abstract 抽象方法只能放在抽象类中。
抽象类 和 抽象方法用来定义标准。
// 定义标准Animal 类要求它的子类必须包含 eat 方法
abstract class Animal {public name: stringconstructor(name: string) {this.name name} abstract eat(): any // 抽象方法speek(): void { // 其他方法实例方法 dog.speek()console.log(其他方法子类可以不实现抽象方法必须实现, this.name)}
}// 无法创建抽象类的实例
new Animal() // 报错: Cannot create an instance of an abstract class. class Dog extends Animal {constructor(name: string) {super(name)}// 抽象类的子类必须实现抽象类里面的抽象方法eat(): string {return ${this.name}吃肉}
}const dog new Dog(小花花)
dog.eat() // 小花花吃肉
