详细了解JavaScript中的class类

最新推荐文章于 2024-07-04 20:36:51 发布

会编码的派大星

最新推荐文章于 2024-07-04 20:36:51 发布

阅读量304

点赞数 1

分类专栏： HTML JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_67584973/article/details/130263325

版权

JavaScript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTML

6 篇文章 0 订阅

订阅专栏

文章详细介绍了JavaScript中的Class声明方式，包括基本的类声明、构造函数的使用、类的方法添加、类的继承以及如何添加静态方法。同时，还讲解了setter和getter在类中的应用，提供了一系列示例代码进行解释。

摘要由CSDN通过智能技术生成

class类声明

// 可以通过以下这两种方式声明
class Speech{}
const Speech = class{}

// 使用
// 注意：使用时需要先声明class类
const speech = new Speech()

constructor

constructor 用于初始化一个由class创建的对象，在每次 new 的时候都会触发 constructor ，一个类只能拥有一个 constructor
来看下面的例子🌰

class Speech {
    constructor() {
        console.log('初始化Speech')
    }
}
class Speech2 {
    constructor() {
        this.text = '初始化Speech2'
    }
}

const speech = new Speech() // 输出 初始化Speech
const speech2 = new Speech2()
console.log(speech2.text) // 输出 初始化Speech2

// 在实例上传入参数
class Speech {
    constructor(name,say) {
    	this.name = name;
    	this.say = say
    }
}

const speech = new Speech("张三","说，你猜猜我是谁")
console.log(speech.name,speech.say) // 这里毫无疑问输出：张三 说，你猜猜我是谁

接下来为class添加方法

<button class="button_1">一级</button>
<script>
	// 拿到我们的按钮
	const button_1 = document.querySelector('.button_1');
	// 创建 Speech class类
    class Speech {
        constructor(name, say) {
            this.name = name;
            this.say = say;
        }
        // 添加 work 方法
        work() {
            console.log(this.name, this.say)
        }
    }
    // 给按钮添加点击事件，每次点击出发 speech 的 work 方法
    button_1.addEventListener('click', () => {
        // 生成 speech 实例
        const speech = new Speech('张三', '说，你是谁')
        speech.work() // 调用 speech 的 work 方法
    })
</script>

class继承

使用 exdends 用于继承

还是上面的代码，我们拿过来稍作修改

<button class="button_1">一级</button>
<button class="button_2">二级</button>
<script>
	// 拿到我们的按钮
	const button_1 = document.querySelector('.button_1');
	const button_2 = document.querySelector('.button_2');
	// 创建 Speech class类
    class Speech {
        constructor(name, say) {
            this.name = name;
            this.say = say;
        }
        // 添加 work 方法
        work() {
            console.log(this.name, this.say)
        }
    }

	// 创建子类（继承父类）
	class Son_of_Speech extends Speech { }
	
    // 给按钮添加点击事件，每次点击出发 speech 的 work 方法
    button_1.addEventListener('click', () => {
        // 生成 speech 实例
        const speech = new Speech('张三', '说，你是谁')
        speech.work() // 调用 speech 的 work 方法
    })
    button_2.addEventListener('click', () => {
        // 只需要 extends 我们的子类就也可以输入同样的参数，也可以有show方法，功能是一模一样的
        const son_of_speech = new Son_of_Speech('李四', '说，你是谁')
        son_of_speech.work()
    })
</script>

增加属性

如果我们想给二级增加一个属性呢，应该怎么做，看下面代码。

<button class="button_1">一级</button>
<button class="button_2">二级</button>
<script>
	const button_1 = document.querySelector('.button_1');
	const button_2 = document.querySelector('.button_2');
    class Speech {
        constructor(name, say) {
            this.name = name;
            this.say = say;
        }
        work() {
            console.log(this.name, this.say)
        }
    }
	class Son_of_Speech extends Speech {
	    constructor(know) {
            this.know = know
        }
    }
    button_1.addEventListener('click', () => {
        const speech = new Speech('张三', '说，你是谁')
        speech.work()
    })
    button_2.addEventListener('click', () => {
        const son_of_speech = new Son_of_Speech('李四', '说，你是谁','我们认识吗？')
        son_of_speech.work()
    })
    // 这样子写代码肯定是错误的
    // 这样写子类的constructor其实就是在覆盖父类的constructor方法
    // 那你现在是不是觉得既然是覆盖，我把子类得constructor彻底重写不就行了嘛
    // 换成下面这样，答案也是错误的。
   	class Son_of_Speech extends Speech {
	    constructor(name, say, know) {
            this.name = name;
            this.say = say;
            this.know = know
        }
    }

    // 如果在子类写了constructor就必须要调用super，问题就出现在子类的this
    // 父类和子类都有this，也都是绑定各自的实例，子类继承了父类，直接这样使用this的话肯定是会混乱的
    // 因此我们需要用super来初始化this（记住，在子类constructor里面写this之前一定要写super）
    class Son_of_Speech extends Speech {
        constructor(name,say,know) {
        	super(name,say) // 我们在这里使用super传入父类的两个参数
            this.know = know
        }
        /*
			对比父类：子类不需要重复写父类的代码，直接用super来调用
			子类也有自己独特的属性
		*/
		// 方法也可以改写，我们在这里把方法重写
		work() {
            console.log(this.name, this.say, this.know)
        }
    }
</script>

static

使用static 来创建静态方法

<body>
    <button class="button_1">一级</button>
    <button class="button_2">二级</button>
    <button class="button_3">调用静态方法</button>
</body>
<script>
    const button_1 = document.querySelector('.button_1'), button_2 = document.querySelector('.button_2')
    class Speech {
    	static myName() {
            return '我是王五'
        }
        static isKnow() {
            // 这里的this是没问题的，因为在静态方法里面调用另一个静态方法是可以用this的
            // 这里的this并不是绑定的实例，这里this绑定的是类的本身（静态方法是需要用类去调用而不是用实例调用）
            console.log(this.myName(), '我们不认识')
        }
        constructor(name, say) {
            this.name = name;
            this.say = say;
        }
        work() {
            console.log(this.name, this.say)
        }
    }

    class Son_of_Speech extends Speech {
        constructor(name, say, know) {
            super(name, say)
            this.know = know
        }
        work() {
            console.log(this.name, this.say, this.know)
        }
    }

    button_1.addEventListener('click', () => {
        const speech = new Speech('张三', '说，你是谁')
        speech.work()
    })
    button_2.addEventListener('click', () => {
        const son_of_speech = new Son_of_Speech('李四', '说,你是谁', '我们认识吗？')
        son_of_speech.work()
    })
	// 调用类的静态方法
    button_3.addEventListener('click', () => {
        Speech.isKnow()
    })
</script>

最后我们来说setter和getter

我们在Javascript中的对象是可以用setter、getter的
在class类中也是可以使用的
我们来看下面代码

<body>
    <button class="button_1">一级</button>
</body>
<script>
    const button_1 = document.querySelector('.button_1');
    class Speech {
        constructor(name, say) {
            this.name = name;
            this.say = say;
        }
        work() {
            console.log(this.name, this.say)
        }

        set extra(value) { // 设置set
            this.value = value
            console.log(value)
        }

        get extra() { // 设置get
            return '你管我是谁，我想干嘛就干嘛'
        }
    }

    button_1.addEventListener('click', () => {
        const speech = new Speech('张三', '说，你是谁')
        speech.work()
        speech.extra = '你想干嘛！' // 虽然可以给setter赋值，定义的时候也像是方法，但其实是访问器属性
        console.log(speech.extra)
        // 这里大家注意
        // 不要这样写 speech.extra() 因为 extra 是属性
    })
</script>