怎么制作网站半透明背景,公司做网站都需要什么材料,上海网站开发培训,网站建设思路及设计方案目录 class构造函数方法原型方法访问器方法静态方法 继承super minxin关于多态 class
在ES6中之前如果我们想实现类只能通过原型链和构造函数的形式#xff0c;不仅难以理解步骤也十分繁琐 在ES6中推出了class关键字#xff0c;它可以在js中定一个类#xff0c;通过new来实… 目录 class构造函数方法原型方法访问器方法静态方法 继承super minxin关于多态 class
在ES6中之前如果我们想实现类只能通过原型链和构造函数的形式不仅难以理解步骤也十分繁琐 在ES6中推出了class关键字它可以在js中定一个类通过new来实例化这个类的对象 需要注意的是class关键字只是一个语法糖它的本质还是通过原型链和构造函数来实现的 class中的代码默认都是运行在strict模式下的 以下是一个简单的class关键字用法
class Person {name zhangsan;
}
let people new Person();
let Person2 class {name lisi;
};
let people2 new Person2();
console.log(people, people2);可以看到类有两个定义方法一个是类声明即class 类名还有一个是类表达式类表达式可以命名也可以不命名即 var/let/const 局部名称 class [类名] {} 无论是类声明还是类表达式都不会提升想要使用类就必须在类定义的后面 这种定义在class中的属性被称为公有字段如果在字段前加上#就成了私有字段
构造函数
如果我们希望在构造对象的时候传入一些参数就需要修改这个类的构造函数constructor
class Person {constructor(name, age, address) {this.name namethis.age agethis.address address}
}
let people new Person(zhangsan, 18, wuhan)
console.log(people)构造函数的名称确定为constructor如果一个类中含有多个constructor则会抛出一个错误
方法
原型方法
能被多个实例共享的方法
class Person {constructor(name, age, address) {this.name namethis.age agethis.address address}eating() {console.log(this.name eating...)}running() {console.log(this.name running...)}
}
let people new Person(zhangsan, 18, wuhan)
console.log(people)
people.running()
people.running()访问器方法
我们可以针对对应的属性设置get和set来拦截原本的修改和读取操作
class Person {constructor(name, age, address) {this._name namethis.age agethis.address address}get name() {console.log(执行了读取操作)return this._name}set name(newName) {console.log(执行了设置操作)this._name newName}
}
let people new Person(zhangsan, 18, wuhan)
console.log(people.name)
people.name lisi注意如果get或set与属性名重复的话就会发生死循环
静态方法
静态方法则是指直接由类来调用的方法不需要实例通过static来定义静态方法
class Person {constructor(name, age, address) {this.name namethis.age agethis.address address}static birth(name, age, address) {return new Person(name, age, address)}
}
let people Person.birth(wangwu, 0, wuhan)
console.log(people)继承
在ES6之前我们想要实现继承是十分麻烦且繁琐的如何在ES6之前实现继承可以看我这篇文章 js原型与原型链 而在ES6中有了新的关键字extends可以更方便的实现继承
class Person {constructor(name, age, address) {this.name namethis.age agethis.address address}
}
class Man extends Person {
}super
super关键字可以访问父类的方法与属性 需要注意的是在constructor中调用super前不能使用this 为什么在调用super前不能访问this可以看我这篇文章 未动笔未来可寄 super.prop可以访问父类的静态属性与方法
class Person {constructor(name, age, address) {this.name namethis.age agethis.address address}eating() {console.log(this.name eating...)}
}
class Man extends Person {constructor(...args) {super(...args)}eating() {super.eating()}
}
let people new Man(zhangsan, 18, wuhan)
console.log(people)
people.eating()minxin
因为js的继承只能继承一个类因为函数的显式原型不可能有多个 如果我们想要让子类有尽可能多的复用其他类就可以使用混入 混入的原理十分简单假如我们有ABC三个类我们希望C能继承AB两个类思路就是我们可以先让B继承A再让C继承B 我们可以将这个过程封装成一个函数再extends
class Person {constructor(name, age, address) {this.name namethis.age agethis.address address}eating() {console.log(this.name eating...)}
}
function minix(BaseClass) {return class extends BaseClass {sleeping() {console.log(this.name sleeping...)}}
}
class Man extends minix(Person) {constructor(...args) {super(...args)}eating() {super.eating()}
}
let people new Man(zhangsan, 18, wuhan)
console.log(people)
people.eating()
people.sleeping()关于多态
我觉得js是有多态多态的概念很简单同一操作作用于不同的对象可以有不同的解释产生不同的执行结果 就比如ab如果传入的是1和2返回的自然是3如果传入的是1和2返回的就是12 这么一看js也确实符合 多态最常用的实现方式就是重载与重写 重写在原型链上已经实现了不必再说关键就在于重载重载指同名但参数不同的方法但js中方法本身就可以传任意数量任意类型的参数我们可以通过if来判断不同类型的参数执行什么操作但这个算不算重载也很难说 我认为js作为一门弱类型的语言天然就应该是具有多态这个特性的
