ES6 面向对象编程

冷不防 2022-04-17 04:39 250阅读 0赞

**目录**

示例 1

示例 2

示例 3

示例 4

单例模式

--------------------

# 示例 1  #

![2018111310351261.png][]

ES6Demo1.html 内容如下：

ES6Demo1.js 内容如下：

/**
     * Created by Administrator on 2018/11/13 0013.
     */
    $(function () {
        //use strict：表示启用严格模式，严格模式下，代码书写必须符合规范，否则不通过
        //从 ES5 开始，函数内部可以设定为严格模式;ES6开始 js 默认开启严格模式
        'use strict';
    
        /**
         * Animal 相当与一个对象
         * showName、showAge 是对象的方法
         * @constructor
         */
        var Animal = function () {
            this.showName = function () {
                console.log("My name is DogChen.\r\n");
            }
            this.showAge = function () {
                console.log("我今年 8 岁.\r\n");
            }
        }
        /**调用 Animal 对象的方法*/
        new Animal().showName();
        new Animal().showAge();
    
        /**调用 Animal 对象的方法*/
        var animal = new Animal();
        animal.showName();
        animal.showAge();
    });

![20181113103608580.png][]

# 示例 2 #

ES6Demo1.html 内容不变，ES6Demo1.js 内容修改如下：

/**
     * Animal 相当与一个对象
     * showName、showAge 是对象的方法
     * @constructor
     */
    var Animal = function () {
        /**
         * 如果将来想要链式调用，则方法中将对象返回出去
         * @returns {Animal}
         */
        this.showName = function () {
            console.log("My name is DogChen.\r\n");
            return this;
        }
    
        this.showAge = function () {
            console.log("我今年 8 岁.\r\n");
            return this;
        }
    }
    
    //除了直接在对象里面定义方法，也可以后期使用 prototype 关键字进行定义
    Animal.prototype.showAddress = function () {
        console.log("我家住在大明湖畔.\r\n");
        return this;
    }
    
    $(function () {
        //use strict：表示启用严格模式，严格模式下，代码书写必须符合规范，否则不通过
        //从 ES5 开始，函数内部可以设定为严格模式;ES6开始 js 默认开启严格模式
        'use strict';
    
        /**调用 Animal 对象的方法*/
        new Animal().showName().showAge().showAddress();
    
        /**调用 Animal 对象的方法*/
        var animal = new Animal();
        animal.showName().showAge().showAddress();
    });

![20181113104253516.png][]

# 示例 3  #

ES6Demo1.html 内容不变，ES6Demo1.js 内容修改如下：

//使用 class 关键字来定义类
    class Animal {
        //constructor 相当于类的构造器
        constructor() {
            console.log("Animal 无参构构造器执行...");
        }
    
        //constructor 相当于类的构造器,注意与 Java 可以重载构造器不同，ES 6 中类的构造器只能有一个
        /*constructor(name, age) {
         console.log("Animal 有参构造器执行,name=" + name + ",age=" + age);
         }*/
    }
    
    $(function () {
        new Animal();
        //new Animal("华安", 35);
    });

![20181113105313941.png][]

# 示例 4  #

ES6Demo1.html 内容不变，ES6Demo1.js 内容修改如下：

//使用 class 关键字来定义类
    class Animal {
        //constructor 相当于类的构造器
        constructor() {
            console.log("Animal 无参构构造器执行...");
        }
    
        //类中普通方法
        showName() {
            console.log("我叫金三顺.");
            return this;
        }
    
        //类中的静态方法，类似 Java ，调用时直接使用 类.方法名，如 Animal.showAge()
        // 这样调用 new Animal().showAge() 则是错误的
        static showAge() {
            console.log("静态方法，我今年 30 岁.");
            return this;
        }
    }
    
    $(function () {
        new Animal().showName();
        console.log("---------");
        Animal.showAge();
    });

![2018111311025013.png][]

# 单例模式 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>单例模式/title>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    
        
        <script type="module">
    
            /**动物类
             */
            class Animal {
                constructor() {
                    console.log("Animal 构造器执行...");
                }
    
                /**
                 * 如同 java 的静态工程模式创建单例一样，一个游戏应该只有一个导演的，所以这里也是如此
                 * @returns {*}
                 */
                static getInstance() {
                    /**
                     * 直接创建成员变量 instance
                     * 第一次时 instance 为 undefined,而 !undefined 就会等于 true
                     * 只要 instance 有值，if 都会作为 true 处理
                     */
                    if (!Animal.instance) {
                        Animal.instance = new Animal();
                    }
                    return Animal.instance;
                }
            }
            $(function () {
                /**Animal 的构造器之后执行一次
                 */
                Animal.getInstance();
                Animal.getInstance();
                Animal.getInstance();
            });
        </script>
    </head>
    <body>
    </body>
    </html>

[2018111310351261.png]: /images/20220417/22c9a1031a024121816e63dea1d1faeb.png
[20181113103608580.png]: /images/20220417/0dc72ceed48e40ad830d3393f1b1ced9.png
[20181113104253516.png]: /images/20220417/fa5bc276607f4f74812f218c3b79b9b3.png
[20181113105313941.png]: /images/20220417/e2c98506b6fb46a49bc99bee0326ecfb.png
[2018111311025013.png]: /images/20220417/6fea1a257c31409aae63f961a8ee0f10.png