【学习笔记】ES6 标准 - 类(class)和继承
2019-06-20 本文已影响0人
Spidd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类(class)和继承</title>
<script type="module">
/*----------类(class)和继承-----------*/
/*面向对象理解
* ---人--- Person
* 属性:name,
* 方法:getName,
* */
// ES6之前-----------
{
function Person(name, age){
this.name = name;
this.age = age
this.getName = function () {
return this.name
}
}
// Person.prototype.showName = function(){
// return `名字为:${this.name}`
// };
// Person.prototype.showAge = function(){
// return `名字为:${this.age}`
// };
//【Object.assign】合并对象
Object.assign(Person.prototype,{
showName(){
return `名字为:${this.name}`
},
showAge(){
return `名字为:${this.age}`
}
});
let person = new Person('奶牛', 2);
console.log(person.showName())
console.log(person.showAge())
}
// ES6类变形
/*
* 【重点】属性名可以放表达式（或者变量），只要它能执行
* 【注意】class 没有提升
* */
{
// const Person = class{}
let name = 'showName';
class Person
{
constructor(name, age){ //构造方法(函数) 当前类被new时 自动执行
console.log(`构造函数执行了。 ${name}, ${age}`)
this.name = name;
this.age = age;
}
[name](){
return `名字为${this.name}`
}
}
let p1 = new Person('奶牛', 18);
console.log(p1)
console.log(p1[name]())
}
// 矫正this
/*
* fn.call(this指向谁, args1,args2.....)
* fn.apply(this指向谁, [args1,args2....])
* fn.bind() //es5新增
* */
{
class Person
{
constructor(){ //构造方法(函数) 当前类被new时 自动执行
this.name = '奶牛';
this.showName = this.showName.bind(this); // 矫正this.
}
showName(){
return `名字为${this.name}`
}
}
let p1 = new Person();
let { showName } = p1;
console.log(showName());
}
// set 监听 设置的值 get 监听 取值
{
class Person
{
constructor(){ //构造方法(函数) 当前类被new时 自动执行
}
get getA(){
console.log('456')
return this.a
}
set setA(val){
console.log(this)
this.a = val
}
}
let p1 = new Person();
p1.setA = 123;
console.log(p1.getA)
}
// 静态方法 static （类身上方法，原型上的方法，会继承到子类上。）
/*
* */
{
class Person
{
constructor(){ //构造方法(函数) 当前类被new时 自动执行
}
showName(){
return `这是showName方法`;
}
static aaa(){
return `这是静态方法aaa;`
}
}
let p1 = new Person();
console.log(Person.aaa()); //父类调用
// ES6之前的继承
{
function Person(name) {
this.name = name;
}
Person.prototype.showName = function () {
return `名字为：${this.name}`;
}
function Student(name, skill) {
Person.call(this,name); // 继承 属性
this.skill = skill;
}
Student.prototype = new Person(); //继承 静态方法
let stu1 = new Student('奶牛','逃学');
console.log(stu1.showName())
}
// ES6之后的继承 class Student extends Person
{
class Person
{
constructor(name){ //构造方法(函数) 当前类被new时 自动执行
this.name = name
}
showName(){
return `这是showName方法`;
}
static aaa(){
return `这是静态方法aaa;`
}
}
class Student extends Person{ //继承
constructor(name,sikll){
super(name); //传递父级需要的参数
this.skill = sikll;
}
showSikll(){
return `这是showSikll方法`
}
showName(){
console.log(super.showName()) // 父级的方法调用
return `子类里面的showName`;
}
}
let stu1 = new Student('Strive', '逃学');
console.log(stu1.showName());
}
}
</script>
</head>
<body>
<h1></h1>
</body>
</html>
