美文网首页
73-ES6继承

73-ES6继承

作者: 仰望_IT | 来源:发表于2019-04-27 23:38 被阅读0次
    • ES6之前的继承

      • 1. 在子类中通过call / apply方法借助父类的构造函数

      • 2. 将子类的原型函数设置为父类的实例对象

            function Person(myName, myAge) {
                this.name = myName;
                this.age = myAge;
            }
            Person.prototype.say = function () {
                console.log(this.name, this.age);
            }
            function Student(myName, myAge, myScore) {
                // 1.在子类中通过call/apply方法借助父类的构造函数
                Person.call(this, myName, myAge);
                this.score = myScore;
                this.study = function () {
                    console.log("day day up");
                }
            }
            // 2.将子类的原型对象设置为父类的实例对象
            Student.prototype = new Person();
            Student.prototype.constructor = Student;
        
            let stu = new Student("zs", 18, 98);
            stu.say();  // zs 18
        
    • ES6开始的继承

      • 1. 通过子类extends父类, 来告诉浏览器子类要继承父类

      • 2. 通过super()方法修改 this

            class Person{
                constructor(myName, myAge){
                    // this = stu;
                    this.name = myName; // stu.name = myName;
                    this.age = myAge;   // stu.age = myAge;
                }
                say(){
                    console.log(this.name, this.age);
                }
            }
            // 以下代码的含义: 告诉浏览器将来Student这个类需要继承Person这个类
            class Student extends Person{
                constructor(myName, myAge, myScore){
                    // 在子类中通过call/apply方法借助父类的构造函数
                    // Person.call(this, myName, myAge);
                    super(myName, myAge);   // 这一行代码相当于在子类中通过call/apply方法借助父类的构造函数
                    this.score = myScore;
                }
                study(){
                    console.log("day day up");
                }
            }
        
            let stu = new Student("zs", 18, 98);
            stu.say();  // zs 18
        

    相关文章

      网友评论

          本文标题:73-ES6继承

          本文链接:https://www.haomeiwen.com/subject/netrnqtx.html