JavaScript高级 class类篇
2023-12-22 17:37:16
1、class类的实现
class的基本结构
定义及用法：class关键字定义类，创建构造函数，类名首字母大写
语法结构：
class 类名{
constructor(参数1,参数2){
// 构造函数体，添加实例对象成员
}
方法名(){
// 添加原型对象成员
}
static 方法名{
// 添加静态成员，只能用类调用
}
}
var d=new 类名
ES5中，使用function定义一个类，并使用它来创建对象
function Person(name, age){
//实例成员
this.name = name;
this.age = age;
}
Person.prototype.doWork = function(){
console.log("ES5中在原型对象上添加方法")；
}
var p = new Person("Neld", 10);
在ES6中，使用class关键字定义同样的类
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
doWork(){
console.log("ES6中在原型对象上添加方法");
}
}
var p = new Person("Neld",10);
console.log(p);
ES6中使用class定义类只是一种语法糖（语法糖能够增加程序的可读性，从而减少程序代码出错的机会的一种语法），底层最终还是转换成ES5中使用的function类定义类，以及其中的实例成员和原型成员。
class使用的细节
（1）constructor方法是创建对象的构造方法，通常在这里为实例对象定义属性（方法也是可以的），new 之后会自动调用。
（2）constructor方法外面的方法是对象的原型方法。
（3）在之前外面还为构造方法添加过成员（静态成员），前面要加static。
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
static doWork(){
console.log("ES6中在原型对象上添加方法");
}
}
Person.doWork()
2、创建类和生成实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>创建类和生成实例</title>
</head>
<body>
<script type="text/javascript">
class Start{
constructor(name,age,year){
this.name=name;
this.age=age;
this.year=year;
}
}
var zs = new Start('张三','25','750');
var ls = new Start('李四','30','750');
console.log(zs.age);
console.log(ls.name);
</script>
</body>
</html>3、类中添加共有方法
（1）类的共有属性放在constructor里面
（2）多个函数方法之间不需要添加逗号分隔
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>类中添加共有方法</title>
</head>
<body>
<script type="text/javascript">
class Start{
constructor(name,age,year){
this.name=name;
this.age=age;
this.year=year;
}
sing(song){
console.log(this.name +"唱"+ song);
}
}
var zs = new Start('张三','25','750');
var ls = new Start('李四','30','750');
console.log(zs.age);
console.log(ls.name);
zs.sing('娘子')
ls.sing('啊哈')
</script>
</body>
</html>4、类继承extends和super关键字
extends：继承
super：调用了父类中的构造函数（传值到父类中使用父类的方法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>类继承extends和super关键字</title>
</head>
<body>
<script type="text/javascript">
// class Father{
// constructor(){
// }
// money(){
// console.log(100);
// }
// }
// class Son extends Father{
// }
// var 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);//调用了父类中的构造函数
}
}
var son = new Son(22,54);
son.sum();
</script>
</body>
</html>5、super调用父类普通函数以及继承中属性方法查找原则
继承中的属性或方法查找原则：就近原则
（1）继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的方法
（2）继承中，如果子类里面没有，就去查找父类有没有这个方法，如果有，就执行父类的这个方法（就近原则）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>super调用父类普通函数以及继承中属性方法查找原则</title>
</head>
<body>
<script type="text/javascript">
class Father{
say(){
return "我是粑粑";
}
}
class Son extends Father{
say(){
console.log(super.say() + "的儿子");
//super.say()就是调用父类中的普通函数 say()
}
}
var son = new Son();
son.say();
</script>
</body>
</html>6、super必须放到子类this之前
子类在构造函数中使用super，必须放在this前面（必须先调用父类的构造方法，在使用子类构造方法）
subtract()：减法操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>super必须放到子类this之前</title>
</head>
<body>
<script type="text/javascript">
class Father{
constructor(x,y){
this.x = x;
this.y = y;
}
add(){
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);
}
}
var son = new Son(98,5);
son.add();
son.subtract();
</script>
</body>
</html>7、使用类2个注意点
1.在ES6中，类没有变量提升，所以必须先定义类，才能通过实例化对象
2.类里面的共有的属性和方法一定要加this使用
3.constructor里面的this指向实例对象，方法里面的this指向这个方法的调用者
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用类2个注意点</title>
</head>
<body>
<button>点击</button>
<script type="text/javascript">
var that;
var _that;
class Star{
constructor(uname,age){
this.uname = uname;
this.age = age;
// this.sing();
this.btn = document.querySelector('button');
this.btn.onclick = this.sing;
console.log(this);
that = this;
}
sing(){
//这个sing方法里面的this指向的是btn这个按钮，因为这个按钮调用了这个函数
console.log(this);
console.log(that.uname);//that里面存储的是constructor里面的this
}
dance(){
//这个_that里面的this 指向的是实例对象 ldh 因为 ldh 调用了这个函数
_that = this;
console.log(this);
}
}
var ldh = new Star('离歌笑',20);
console.log(that === ldh);
ldh.dance();
console.log(_that === ldh);
// 1. 在 ES 6 中类没有变量提升 所以必须先定义类 才能通过实例化对象
// 2. 类里面的共有的属性和方法一定要加this使用
// 3. constructor 里面的this指向实例对象 方法里面的this指向这个方法的调用者
</script>
</body>
</html>
文章来源:https://blog.csdn.net/qq_57162921/article/details/135155904
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！