面试知识点——常见的几种继承方式

  • 原型式继承(将父类的实例作为子类的原型,而且将类的构造器重置。)

  • 构造函数式继承(构造函数继承只继承父类对象上的东西,而不会继承父类的原型上的东西,所以如果有不需要继承的东西可以放在prototype。而原型继承,全部继承,包括父类对象和父类的原型)

  • 组合式继承(将构造函数继承和原型继承集合,既能减少子类的代码量(构造的功劳),又能继承原型上的方法)

  • ES6的继承(其实就是ES5中的组合式继承)

  • 拷贝式继承(浅拷贝:直接赋值拷贝。深拷贝:将A对象的属性全部复制到B对象上。)

  • 原型继承
        //1.父类
        function Person(){
            this.gender ="女";
        }
        //2父类的原型
        Person.prototype.hello = function(){
            console.log(`我是${this.name},我今年${this.age}`);  
        }
        //3.子类
        function Student(name,age){
            this.name = name;
            this.age = age;
        }
        //4.将父类的实例作为子类的原型
        Student.prototype = new Person();//(关键点)
        Student.prototype.constructor = Student;//重置name
        let stu1 = new Student('alice',20);
        console.log(stu1.constructor.name);//Person(),重置后变成student
    构造函数继承
     function sum(num1,num2){
            return num1+num2;
        }
        function diff(num1,num2){
            return num1-num2;
        }
        //diff调用sum
        let result1 = sum.call(diff,10,5);
        console.log(result1);//15
        //sum调用diff
        let result2 = diff.call(sum,10,5);
        console.log(result2);//5
        let result3 = diff.apply(sum,[10,5]);
        console.log(result3);//5
        let result4 = sum.apply(diff,[10,5]);
        console.log(result4);//15
    
        function Person(name,age){
           this.name = name;
           this.age = age;
           this.gender = "男";
        }
        Person.prototype.hello = function(){
           console.log(`我叫${this.name},我是${this.gender}`);  
        }
    
        function Student(name,age){
           Person.call(this,name,age)//this指向将来要被创建的对象
           
        }
        let stu = new Student('tom',20);//Student {name: "tom", age: 20, gender: "男"}
        console.log(stu);//stu.show-----undefined
    
    由以上的代码我们可以发现,这俩函数的特点都是里面调用外面,真正执行的都是call()或apply()方法的调用者。
    弄明白这俩函数的使用方式后我们就可以实现我们需要的构造函数式继承了。
    
    call():可以有无限制个参数
    
    参数1:新的this对象
    参数2,3,4...:其他参数
    	
    apply():只能有两个参数
    
    参数1:新的this对象
    参数2:数组或类数组对象
    
    
    组合继承
    function Person(name,age){
           this.name = name;
           this.age = age;
           this.gender = "男";
        }
        Person.prototype.hello = function(){
           console.log(`我叫${this.name},我是${this.gender}`);
           
        }
    
        function Student(name,age){
           Person.call(this,name,age)//this指向将来要被创建的对象
        }
       
        Student.prototype = new Person();//原型继承
        Student.prototype.constructor = Student;//重置name
        let stu = new Student('alice',16)
        console.log(stu instanceof Student);//true
        console.log(stu instanceof Person);//true
        console.log(stu);//Student {name: "alice", age: 16, gender: "男"}
        console.log(stu.show);//我叫alice,我是男
     // ES6中的继承
            // 父类(超类)
            class Person{
                constructor(name,age){
                    this.name = name
                    this.age = age
                }
                // Person.prototype.show = function(){};
                show(){
                    console.log(`my name is ${this.name}`);
                }
            }
            
            // 子类
            // 声明一个Student类,同时继承了Person类
            class Student extends Person{
                constructor(name,age){
                    // 调用超类的构造函数
                    // super关键字特指父类的构造器
                    super(name,age);
                }
            }
    
            let stu = new Student("tom",20);
            console.log( stu.show() );
            console.log( stu.constructor.name );
    浅拷贝
    
    
    let obj1 = {
    name:'tom',
    age:20
    };
    // 浅拷贝,直接赋值拷贝
    let obj2 = obj1;
    obj2.height = '180cm';
    
    obj1;// {name:'tom',age:20,height:'180cm'}
    obj2;// {name:'tom',age:20,height:'180cm'}
    深拷贝:
    递归实现:
    //     let obj1 = {
    //         name:"tom",
    //         age:20,
    //         hobby:['love','sing']
    
    //     }
       
    //     Object.deepClone = function(target_obj){
    //         let obj = Array.isArray(target_obj) ?[]:{};//判断对象是否是数组或者对象
    //         if(target_obj && typeof target_obj==='object'){//如果目标对象存在且是对象
    //             //遍历target_obj
    //             for(let key in target_obj){
    //                 //再一次判断值是否是存在或者为对象
    //                 if(target_obj[key] &&typeof target_obj[key]==='object'){
    //                     obj[key] = Object.deepClone(target_obj[key])//递归重新调用
    
    //                 }else{
    //                     obj[key] = target_obj[key];//赋值操作
    //                 }
    //             }
    //         }
    //         return obj;
    //     }
    //     let obj2 = Object.deepClone(obj1);
    //     obj2.hobby.push("dance")
    //     console.log(obj2,obj1);
    
    json字符串实现:
    //     let obj1 = {
    //         name:"tom",
    //         age:20,
    //         hobby:['love','sing']
    
    //     }
          const obj2= JSON.parse(JSON.stringify(obj1));(关键点)

     

你可能感兴趣的:(前端开发,javascript)