01.创建类和对象
// 1. 创建类 class 创建一个 明星类
class Star {
constructor(uname, age) {
this.uname = uname;
this.age = age;
}
}
// 2. 利用类创建对象 new
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 20);
console.log(ldh);
console.log(zxy);
// Class（类）
// 在面向对象编程中（object - oriented programming）, 一个 类 定义了一个对象（object's）的特征。类是定义对象属性（properties）和方法（methods）的模板，是用来绘制具体对象实例的“蓝图”.
// Constructor
// 构造函数属于被实例化的特定类对象 。构造函数初始化这个对象，并提供可以访问其私有信息的方法。构造函数的概念可以应用于大多数面向对象的编程语言。本质上，JavaScript 中的构造函数通常在类的实例中声明。
// （1）通过 class 关键字创建类，类名首字母大写
// （2）类里 constructor 函数，接受传递的参数，返回实例对象
// （3）constructor 函数，只要 new 生成实例时，就会自动调用这个函数，如果不写这个函数，类也会自动生成这个函数
// （4）new 不能省略
// （5）语法规范，创建类，类名后面不能加小括号，生成实例，类名后面加小括号，构造函数不需要加 function
02.类中添加方法
// 1. 创建类 class 创建一个 明星类
class Star {
// 类的共有属性放到 constructor 里面
constructor(uname, age) {
this.uname = uname;
this.age = age;
}
sing(song) {
// console.log('我唱歌');
console.log(this.uname + song);
}
}
// 2. 利用类创建对象 new
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 20);
console.log(ldh);
console.log(zxy);
ldh.sing('冰雨');
zxy.sing('李香兰');
// （1）类里面所有的函数都不需要写 function
// （2）多个函数方法之间不需要添加逗号分隔
03.类的继承
// 1. 类的继承
// class Father {
// constructor() {
// }
// money() {
// console.log(100);
// }
// }
// class Son extends Father {
// }
// const son = new Son();
// son.money();
class Father {
constructor(x, y) {
this.x = x;
this.y = y;
}
sum() {
console.log(this.x + this.y);
}
}
class Son extends Father {
constructor(x, y) {
super(x, y) // 调用了父类中的构造函数
}
}
const son = new Son(1, 2);
const son1 = new Son(11, 22);
son.sum();
son1.sum();
// extends
// extends 关键字用于类声明或者类表达式中，以创建一个类，该类是另一个类的子类。
// super
// super 关键字用于访问对象字面量或类的原型（[[Prototype]]）上的属性，或调用父类的构造函数。
// super.prop 和 super[expr] 表达式在类和对象字面量任何方法定义中都是有效的。super(...args) 表达式在类的构造函数中有效。
04.super关键字调用父类普通函数
// super 关键字调用父类普通函数
class Father {
say() {
return '我是爸爸';
}
}
class Son extends Father {
say() {
// console.log('我是儿子');
// super.say() 就是调用父类中的普通函数 say()
console.log(super.say() + '的儿子');
}
}
const son = new Son();
son.say();
// 继承中的属性或者方法查找原则：就近原则
// 1. 继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有，就先执行子类的
// 2. 继承中，如果子类里面没有，就去父类查找，如果有，就执行父类的方法（就近原则）
05.子类继承父类方法同时扩展自己方法
// 父类有加法方法
class Father {
constructor(x, y) {
this.x = x;
this.y = y;
}
sum() {
console.log(this.x + this.y);
}
}
// 子类继承父类加法方法 同时 扩展减法方法
class Son extends Father {
constructor(x, y) {
// 利用 super 调用父类的构造函数
// super 必须写在子类 this 之前调用
super(x, y);
this.x = x;
this.y = y;
}
subtract() {
console.log(this.x - this.y);
}
}
const son = new Son(5, 3);
son.subtract();
son.sum();
06.使用类注意事项
<button>点击</button>
var that;
var _that;
class Star {
constructor(uname, age) {
// constructor 里面的 this 指向的是创建的实例对象
that = this;
console.log(this);
this.uname = uname;
this.age = age;
// this.sing()
this.btn = document.querySelector('button');
this.btn.onclick = this.sing;
}
sing() {
// 这个 sing 里面的 this 指向的是 btn 这个按钮，因为这个按钮调用了这个函数
console.log(this);
console.log(that.uname); // that 里面存储的是 constructor 里面的 this
}
dance() {
// 这个 dance 里面的 this 指向的是实例对象 ldh，因为 ldh 调用了这个函数
_that = this;
console.log(this);
}
}
const ldh = new Star('刘德华');
console.log(that === ldh);
ldh.dance();
console.log(_that === ldh);
// 1. 在 ES6 中类没有变量提升，必须先定义类，才能通过类实例化对象
// 2. 类里面的共有属性和方法一定要加 this 使用
