ES6 - 类与继承

作者: 饮杯梦回酒 | 来源:发表于2019-01-15 17:06 被阅读0次

面向对象类
ES的类与继承
ES6
继承
react组件
javascript之模拟类继承
JS中类的继承封装和多态
es5 es6静态方法、类、单例模式
ES6中类与继承的理解（java对比记忆）
JavaScript 面向对象编程

导读：

以前ES5的时候也有构造函数和继承这一说法，但是实现起来又要借助原型又要改this指向，就会显得很麻烦，而ES6出来了这个主流的类这么个概念，几乎就跟Java里面的类与继承实现一模一样，看代码。

例子：

构造函数比较：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        // ES5的构造函数
        function Person(name, age) {
            this.name = name;
            this.age = age;
        }
        Person.prototype.showName = function() {
            return `名字是： ${this.name}`;
        }
        Person.prototype.showAge = function() {
            return `年龄是： ${this.age}`;
        }

        // ES6语法模拟
        /*Object.assign(Person.prototype, {
            showName() {
                return `名字是： ${this.name}`
            },
            showAge() {
                return `年龄是： ${this.age}`
            }
        })*/

        let p1 = new Person('Verin', 18);
        console.log(p1.showName());
      
        //  ES6的类（构造函数）
        class Person {
            constructor(name, age) {
                // 构造函数，用法同java的构造函数就行了
                this.name = name;
                this.age = age;
            }
            showName() {
                return `名字是： ${this.name}`
            }
            showAge() {
                return `年龄是： ${this.age}`
            }
        }

        let p1 = new Person('Verin', 18);
        console.log(p1.showName(), p1.showAge())

    </script>
</body>
</html>

继承比较：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        // ES5继承
        function Person(name) {
            this.name = name
        }
        Person.prototype.showName = function() {
            return `我的名字是： ${this.name}`;
        }

        function Student(name, skill) {
            Person.call(this, name) // 继承属性
            this.skill = skill;
        }
        Student.prototype = new Person();

        let s1 = new Student('Verin', '逃学');
        console.log(s1.name, s1.skill);   //  Verin, 逃学


        // ES6继承
        class Person2 {
            constructor(name) {
                this.name = name
            }
            showName() {
                return `我的名字是： ${this.name}`;
            }
        }

        class Student2 extends Person2 {
            constructor(name, skill) {
                super(name);
                this.skill = skill;
            }
            showSkill() {
                return `哥们的技能是： ${this.skill}`
            }
        }

        let s2 = new Student2('Verin', '逃学');
        console.log(s2.name, s2.showSkill());   //  Verin, 哥们的技能是： 逃学

    </script>
</body>
</html>

子类可以在继承父类的所有属性方法外，新增自己的属性方法，若要在已有方法上新增功能，则需先执行super() || super.方法()后再写入自己定义的功能，如下简单实现拖拽，子类新增限制拖拽范围功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
        .left {
            left: 0;
        }
        .right {
            right: 0;
        }
    </style>
</head>
<body>
    <div class="box left">box1</div>
    <div class="box right">box2</div>
    <script type="text/javascript">
        class Drag {
            constructor(id) {
                this.oDiv = document.querySelector(id);
                this.disX =0;
                this.disY = 0;
                this.init();
            }
            init() {
                this.oDiv.onmousedown = function(ev) {
                    this.disX = ev.clientX - this.oDiv.offsetLeft;
                    this.disY = ev.clientY - this.oDiv.offsetTop;
                    document.onmousemove = this.fnMove.bind(this);
                    document.onmouseup = this.fnUp.bind(this);

                    return false;
                }.bind(this)
            }
            fnMove(ev) {
                this.oDiv.style.left = ev.clientX - this.disX + 'px';
                this.oDiv.style.top = ev.clientY - this.disY + 'px';
            }
            fnUp() {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }

        // 子类 —— 限制距离
        class LimitDrag extends Drag {
            fnMove(ev) {
                super.fnMove(ev);

                // 限制范围
                if(this.oDiv.offsetLeft <= 0) this.oDiv.style.left = 0;
            }
        }

        new Drag('.left');
        new LimitDrag('.right');
    </script>
</body>
</html>