<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类</title>
</head>
<body>
<button>点击</button>
<script>
/*-----------------创建类和生成实例----------------------------------*/
// 1.创建类
// class Star{
// constructor(name, age){ //是类的构造函数(默认方法),用于传递参数,返回实例对象,通过new命令生成实例时,自动调用该方法。若没有显示定义,类内部会自动创建一个constructor()
// this.name = name; //this指向创建的实例
// this.age = age;
// }
// }
// 利用类创建对象
// let star = new Star();
// let star1 = new Star('abc'); //将abc传递给Star constructor的name,name再给this.name;
// console.log(star1.name); //abc
// let star2 = new Star('aaa', 22)
// console.log(star2); //返回一个对象
// Star{
// name : 'aaa',
// age : 22
// }
/*-----------------类中添加共有方法----------------------------------*/
// class Book{
// constructor(name){
// this.name = name;
// }
// iBs(ibs){ //添加函数不需要使用function,函数之间不需要 ','
// console.log(`${this.name}的ibs是${ibs}`);
// }
// }
// let book = new Book('《西游记》');
// book.iBs('123456'); //《西游记》的ibs是123456
/*-----------------类的继承extends和super关键字----------------------------------*/
/*
class Father{
constructor(){
}
money(){
console.log(100);
}
}
class Son extends Father{
}
let son = new Son();
son.money(); //100
*/
/*
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){
this.x = x;
this.y = y;
}
}
let son = new Son(1, 2);
son.sum(); //报错 Must call super constructor in derived class before accessing 'this' or returning from derived constructor
父类中的sum中的this.x,this.y指向的是父类constructor中的this.x,this.y
实列son中的1,2传递给的是子类constructor的this.x,this.y 父类获取不到子类传递进来的值
*/
// super 关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数,也可以调用父类的普通函数
// 1.调用构造函数
/*
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); //super会调用父类的构造函数将子类传递进来的值,传递给父类
}
}
let son = new Son(1, 2);
son.sum(); //3
*/
// 2.调用普通函数
/*
class Father{
say(){
return '我是父类';
}
}
class Son extends Father{
say(){
// console.log('我是子类');
console.log(super.say()+`的子类`); //super.say() 就是调用父类中的普通函数
}
}
let son = new Son();
son.say(); //我是子类 就近原则 实列化子类先从子类里面找有没有say方法,若没有就去父类找
//我是父类的子类
*/
// 3.子类扩展方法
/*
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); //super必须在子类this之前调用,必须调用父类的构造方法,再使用子类的构造方法
this.x = x;
this.y = y;
// super(x, y);
}
subtract(){
console.log(this.x - this.y);
}
}
let son = new Son(3, 2);
son.sum(); //报错 Must call super constructor in derived class before accessing 'this' or returning from derived constructor
//5
son.subtract(); //报错 Must call super constructor in derived class before accessing 'this' or returning from derived constructor
//1
*/
// 注意
// 1.在ES6中类没有变量提升,所以必须先定义类,才能通过类实列化对象
// 2.类里面的共有属性和方法必须加this使用
/*
class Book{
constructor(name){
this.name = name;
// sing(); //报错 sing is not defined
this.sing(); //hhhhh
this.btn = document.querySelector('button');
this.btn.onclick = this.sing;
}
news(){
// console.log(name);
console.log(this.name);
}
sing(){
//这个this指向btn,因为btn调用了这个函数
console.log('hhhhh');
}
}
let book = new Book('123');
book.news(); //为空
//123
*/
// this指向问题
let that;
class Star{
constructor(name, age){ // constructor里面的this指向创建的实例对象
this.name = name;
this.age = age;
// that = this;
// console.log(this); //Star{name:12, age:24}
}
sing(){
that = this; //指向star,因为star调用了这个函数
console.log(this);
}
}
let star = new Star(12, 24);
star.sing();
console.log(that == star); //true
// 总结:constructor里面的this指向实例对象,方法里面的this指向这个方法的调用者
</script>
</body>
</html>
JS 类
最新推荐文章于 2023-02-22 17:05:32 发布