2021-07-08

最新推荐文章于 2021-11-10 17:26:45 发布

buty_nice

最新推荐文章于 2021-11-10 17:26:45 发布

阅读量65

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/buty_nice/article/details/118584759

版权

笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

本文介绍了ES6中的类概念，作为构造函数的语法糖，以及如何使用constructor和prototype进行属性和方法的定义。同时，详细讲解了继承的实现方式，包括使用extends关键字和super调用父类构造函数。此外，讨论了this关键字在对象方法中调用属性的重要性，并通过实例展示了如何创建和使用子类。最后，强调了继承在代码维护中的价值。

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

ES6的类与继承

ES6

ES6：ES2015
在ES6之前，js是没有类这个东西的。在ES6时，引入了Class 的概念。
之前是通过构造函数创建对象。现在可以通过class创建对象。
class 其实可以看做构造函数的语法糖。
将所有的属性赋值写在constructor里面。函数直接写在class里面，就相当于添加在原型对象上。

    <script>
        function Person2(name, age, grade) {
            this.name = name;
            this.age = age;
            this.grade = grade;
        }
        Person2.prototype.sayHi = function() {
            console.log("hello");
        }

        class Person {
            constructor(name, age, grade) {
                    this.name = name;
                    this.age = age;
                    this.grade = grade;
                }
                // 相当于Person.prototype.sayHi = 。。。。
            sayHi() {
                console.log("你好，我是渣渣辉");
            }
        }
        var p1 = new Person2("古天乐", 45, "男");
        // console.log(p1);

        var p2 = new Person("渣渣辉", 48, "男");
        console.log(p2);
        p2.sayHi();

        // console.log(typeof Person);
        // console.log(Person.prototype);
    </script>

继承

1.在子类的类名后使用 extends 父类名
2.在constructor中，使用super()调用父类的构造函数

  <script>
    // 父类
    class Person {
      constructor(name, age, grade) {
        this.name = name;
        this.age = age;
        this.grade = grade;
      }
      // 相当于Person.prototype.sayHi = 。。。。
      sayHi() {
        console.log("你好，我是渣渣辉");
      }
    }
    // 子类  打工人  extends继承Person类
    class Worker extends Person{
      constructor(name, age, grade,job){
        // 调用父类的构造函数
        super(name, age, grade)
        this.job = job;
      }
      showJob(){
        console.log("我的工作是："+this.job);
      }
    }
    var itMan = new Worker("小张",20,"男","程序员");
    console.log(itMan);
    itMan.showJob();
    itMan.sayHi();
    // itMan.showJob();
  </script>

this调用属性

如果要在对象的方法中使用对象的属性，必须在属性名前加this来调用。

 <script>
    var name = "window"
    function Person(name, age, grade) {
      this.name = name;
      this.age = age;
      this.grade = grade;
    }
    Person.prototype.sayHi = function () {
      console.log("雷浩，我是："+this.name);
    }
    var zjh = new Person("张家辉",25,"男");
    zjh.sayHi();
    console.log(window);
  </script>

子类继承

如果你只是创建一个类，不需要继承。
如果你需要创建多个类，这些类又有相同的属性和方法，最好是将相同的属性和方法抽离出来，变成一个父类，让子类们去继承。
这样便于我们维护。

    <script>
    //父类
        class Person {
            constructor(name, age, grade) {
                this.name = name;
                this.age = age;
                this.grade = grade;
            }
            eat() {
                console.log("干饭");
            }
        }
//子类
        // 打工人
        class Worker extends Person {
            constructor(name, age, grade, job) {
                super(name, age, grade)
                this.job = job;
            }
            showJob() {
                console.log("我的工作是：" + this.job);
            }
        }

        // 老板
        class Boss extends Person {
            constructor(name, age, grade, play) {
                super(name, age, grade)
                this.play = play;
            }
            showPlay() {
                console.log("我的玩法是：" + this.play);
            }
        }
        //房东、
        class Landlord extends Person {
            constructor(name, age, grade, house) {
                super(name, age, grade)
                this.house = house;
            }
            getRent() {
                console.log("在吗，下个月的房租交一下");
            }
        }
        var itMan = new Worker("小张", 20, "男", "程序员");
        itMan.eat();
        var fd = new Landlord("包租婆", 48, "女", 10);
        fd.eat();
    </script>