四川城乡住房城乡建设厅网站,中国检验认证集团北京有限公司,政务内网网站群建设,重庆360网络推广JS继承-ES6-基于 class 实现继承 mdn 类 阮一峰 ES6-class mdn-super ES6中推出了class类,是用来创建对象的模板。
class可以看作是一个语法糖,它的绝大部分功能#xff0c;ES5 都可以做到#xff0c;新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已…JS继承-ES6-基于 class 实现继承 mdn 类 阮一峰 ES6-class mdn-super ES6中推出了class类,是用来创建对象的模板。
class可以看作是一个语法糖,它的绝大部分功能ES5 都可以做到新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
class
核心语法:
MDN-类
// 定义类
class Person {// 实例属性namefood// 构造方法类似于构造函数new的时候会调用内部的this就是实例化的对象constructor(name, food) {this.name namethis.food food}// 实例方法sayHi() {console.log(你好我叫${this.name},我喜欢吃${this.food})}
}
const p new Person(小黑, 西蓝花)
p.sayHi()总结
class核心语法
通过class 类名{}的形式来定义类内部直接写实例属性,可以设置默认值实例方法的添加方式为方法名(){}构造函数通过constructor进行添加通过new 类名()创建实例,会调用构造函数constructor
class Person{namefood西兰花炒蛋constructor(name){this.namename}sayHi(){console.log(你好,我叫:,this.name)}
}
class 实现继承
子类通过 extends 继承父类子类构造函数中通过 super 调用父类构造函数
// 在上一份代码的基础上继续编写下面代码
class Student extends Person {songconstructor(name, food, song) {// 子类构造函数使用this以前必须调用supersuper(name, food)this.song song}// 添加方法sing() {console.log(我叫${this.name},我喜欢唱${this.song})}
}
const s new Student(李雷, 花菜, 孤勇者)
s.sayHi()
s.sing()总结
class实现继承
子类通过extends继承继承父类子类如果需要重新定义构造函数,必须在内部通过super关键字调用父类的构造函数
class 私有属性静态属性和方法
私有属性 / 方法静态属性 / 方法
class Person {constructor(name) {this.name name}// 通过#作为前缀添加的属性会变为私有// 私有属性#secret 我有一个小秘密就不告诉你// 私有方法#say() {// 私有属性可以在console.log(私有的say方法)}info() {// 在类的内部可以访问私有属性调用私有方法console.log(this.#secret)this.#say()}// 通过 static定义静态属性/方法static staticMethod() {console.log(这是一个静态方法)console.log(this)}static info 直立行走双手双脚
}const p new Person(jack)
console.log(p)
// 外部无法访问 点语法访问直接报错通过[]无法动态获取
console.log(p[#secret])
p.info()
// 通过类访问静态属性/方法
Person.staticMethod()
console.log(Person.info)总结
class 语法补充
class中私有属性/方法 定义和使用时需要使用关键字#私有属性只能在类的内部使用,外部无法使用(代码中)Chrome的控制台中为了方便调试,可以直接访问 class中静态属性/方法 定义和使用时需要使用关键字static通过类访问静态方法中的this是类
JS继承-ES5-基于原型和构造函数实现继承
ES5-寄生组合式继承
所谓寄生组合式继承即通过借用构造函数来继承属性通过原型链的混成形式来继承方法。
组合式继承借用构造函数原型链寄生父类的原型中有子类的构造函数
其背后的基本思路是:不必为了指定子类型的原型而调用超类型的构造函数我们所需要的无非就是超类型原型的一个副本而已。
核心步骤:
通过构造函数来继承属性通过原型链来继承方法
// 继承原型函数
function inheritPrototype(son, parent){const prototype object.create(parent.prototype)prototype.constructor sonson.prototype prototype
}// 父类构造函数
function Parent(name) {this.name namethis.foods [西蓝花, 西葫芦, 西红柿]
}Parent.prototype.sayHi function () {console.log(this.name, 我喜欢吃,${this.foods})
}// 子类借用父类的构造函数将 thisname 参数传递给父类
function Son(name, age) {Parent.call(this, name)this.age age
}
// 完成原型继承
inheritPrototype(Son,Parent)
// 可以继续在原型上添加属性/方法
Son.prototype.sayAge function () {console.log(我的年龄是, this.age)
}const son1 new Son(jack, 18)
const son2 new Son(rose, 16)总结
ES5-寄生组合式继承
寄生组合式继承的核心步骤是通过构造函数来继承属性通过原型链来继承方法寄生组合式继承和组合式继承的区别是原型链的继承并没有调用父类的构造函数而是直接基于父类的原型创建一个新副本实现继承
