[JavaScript知识库]前端面试 js的几种继承

前端面试 js的几种继承

原型继承

        function Father(name){
            this.name = name;
            this.getName = function(){
                console.log(this.name);
            };
        };
        Father.prototype.show = function(){
            console.log(this.name);
        };
        Father.prototype.age = 18;
        function Son(name){
            this.name = name;
        };
        Son.prototype = new Father();//此时实现了原型的继承
        let s = new Son("lbj");
        s.show();
        s.getName();

        /* 特点：可继承父类的构造函数属性，父类的原型的属性
         缺点：
            新实例无法向父类构造函数传参
            继承单一
            原型上的属性是共享的，只要被继承的原型上一变动，继承该原型的实例都会受影响的
            */

构造函数继承

        function Father(...args) {
            this.name = "lbj";
            this.getName = function () {
                console.log(this.name);
            };
        };
        Father.prototype.show = function () {
            console.log(this.name);
        };
        Father.prototype.age = 18;

        function Son(...args){
            Father.call(this,...args);//这里是关键 将Father中的this执行Son的this
        };
        let s = new Son(1,5,6);
        s.getName();
        s.show();//此继承不能继承父函数的原型 所以这里会报错

组合继承

        function Father(...args) {
            this.name = "lbj";
            this.getName = function () {
                console.log(this.name);
            };
        };
        Father.prototype.show = function () {
            console.log(this.name);
        };
        Father.prototype.age = 18;

        function Son(...args){
            Father.call(this,args);
        };
        Son.prototype = new Father();
        /**
         * 优点：1、即可以实现原型的继承也可以实现构造函数的继承
         *       2、也可传参等
         *  缺点：会调用两次父类构造函数耗内存，而且子类构造函数会覆盖父类构造函数其中一次继承就是浪费，
         */

寄生组合继承

        function Father(...args) {
            this.name = "lbj";
            this.getName = function () {
                console.log(this.name);
            };
        };
        Father.prototype.show = function () {
            console.log(this.name);
        };
        function Son() {
            Father.call(this);//实现构造函数的继承
        };
        Son.prototype = Object.create(Father.prototype);//让Son的原型指向Father的原型，此时会导致Son的构造消失并且构造默认是不可遍历的所以采用以下方式设置Son的原型中constructor属性
        Object.defineProperty(Son.prototype, "constructor", {
            value: Son,//设置Son的构造函数为Son
            enumerable: false//设置Son的constructor不可遍历
        })

        // Object.create()方法是ES5中原型式继承的规范化。
        function object(o) {
            function F() { };
            F.prototype = o;
            return new F();
        }

class继承

            class Father{};
            class Son extends Father{
                constructor(...args){
                    super(...args);
                };//这里如果我们不写 js会默认给我们添加并执行
            };