面向对象编程

zhuaaaa3944210

于 2023-11-02 14:49:57 发布

阅读量37

点赞数

分类专栏： js 工作总结文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/zhuaaaa3944210/article/details/134182348

版权

js 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

工作总结

6 篇文章 0 订阅

订阅专栏

在写代码的过程中常常需要面向对象编程，这个也是js比较重要的点，接下来就附上一段关于面向对象编程的代码，共同学习，一起进步。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面向对象编程</title>
</head>
<body>
    <script>
        function Book(name,page,auth){
            this.name = name;
            this.page = page;
            this.auth = auth;
        }
        // 基于原型
        Book.prototype.reading = function(user) {
            console.log(`${user}读${this.name}`);
        }
        let book = new Book('数据结构',100,'拖拉机')
        console.log(book.auth);
        book.reading('xxxx');

        // 我们可以用 ES2015 把语法简化，如下所示
        class BookTwo{
            constructor(name,page,auth){
                this.name = name;
                this.page = page;
                this.auth = auth;
            }
            reading(user){
                console.log(`${user}读${this.name}`);
            }
        }
        let book2 = new BookTwo('数据结构',100,'拖拉机')
        console.log(book2.auth);
        book2.reading('xxxx')

        /* 
        我们可以用 extends 关键字扩展一个类并继承它的行为（行{1}）。在构造函数中，我们也
        可以通过 super 关键字引用父类的构造函数（行{2}）。
        尽管在 JavaScript 中声明类的新方式所用的语法与 Java、C、C++等其他编程语言很类似，但
        JavaScript 面向对象编程还是基于原型实现的。
        */
        // 继承
        class ItBook extends Book{
            constructor(name,page,auth,type){
                super(name,page,auth)
                this.type = type;
            }
            payPrace(prace){
                console.log(`${this.name}花了￥${prace}购买${this.type}类型的书`);
            }
        }
        let book3 = new ItBook('数据结构',100,'拖拉机','it')
        console.log(book3.type);
        book3.payPrace(100);


        //  使用属性存取器
        /* 
        ES2015 也可以为类属性创建存取器函数。虽然不像其他面向对象语言（封装概念），类的属
        性不是私有的，但最好还是遵循一种命名模式。
        下面的例子是一个声明了 get 和 set 函数的类。
        */

        class Person {
            constructor(name){
                this._name = name;  // {1}
            }
            get name(){
                return this._name;  // {2}
            }
            set name(value){  // {3}
                this._name = value;
            }
        }

        let xiaoming = new Person('小明')
        console.log(xiaoming._name,xiaoming.name); // {4}  小明 小明
        xiaoming.name = '小红'; // {5}  
        console.log(xiaoming._name,xiaoming.name);  // 小红 小红
        xiaoming._name = '老王'; // {6}
        console.log(xiaoming._name,xiaoming.name); // 老王 老王

        /* 
        要声明 get 和 set 函数，只需要在我们要暴露和使用的函数名前面加上 get 或 set 关键字
        （行{2}和行{3}）。我们可以用相同的名字声明类属性，或者在属性名前面加下划线（行{1}），
        让这个属性看起来像是私有的。
        然后，只要像普通的属性一样，引用它们的名字（行{4}和行{5}），就可以执行 get 和 set
        函数了。
        _name 并非真正的私有属性，我们仍然可以引用它（行{6}）。
        */
    </script>
</body>
</html>