前端学习辑录(1):js继承总结

js中的继承

    • 一、原型继承
    • 二、借用构造函数继承
    • 三、组合继承
    • 四、拷贝继承
    • 总结


这是博主目前学习并掌握到的继承方式,并不能完整覆盖到所有的继承方式,会在学习中持续更新ヾ(◍°∇°◍)ノ゙。


一、原型继承

为了数据共享,改变原型指向,做到了继承==>通过改变原型指向实现的继承。

		//创建人这个构造函数;
 		function Person(name,age,sex) {
      
            this.name=name;
            this.age=age;
            this.sex=sex;
        }
		 Person.prototype.sayHi=function () {
     
            console.log("您好");
        };
		//创建学生这个构造函数
        function Student(score) {
     
            this.score=score;
        }
        //改变学生的原型的指向========>使得学生继承人
        Student.prototype=new Person("小李",20,"男")
        Student.prototype.study=function () {
     
            console.log("学习是一件持之以恒的事");
        };
        var stu = new Student(100);
        stu.sayHi();
        stu.study();

缺陷:因为改变原型指向的同时实现继承,直接初始化了属性,继承过来的属性的值都是一样的了。
不能实现多继承(一个子类同时继承多个父类)。
解决方案:继承的时候,不用改变原型的指向,直接调用父级的构造函数的方式来为属性赋值。

二、借用构造函数继承

借用构造函数:构造函数的名字.call(当前对象,属性,属性…)

		function Person(name,age,sex) {
     
            this.name=name;
            this.age=age;
            this.sex=sex;
        }
        Person.prototype.sayHi=function () {
     
            console.log("您好");
        };
		//借用构造函数:属性值重复的问题==>继承属性
		//通过使用call改变this指向,指向父类实例,相当于复制父类实例的属性给子类
        function Student(name,age,sex,score) {
     
            Person.call(this,name,age,sex);
            this.score=score;
        }

        var stu= new Student("小李",20,"男",100);
        console.log(stu.name,stu.age,stu.sex,stu.score);
        stu.sayHi();//报错

主要解决属性的问题,不能很好的解决方法继承的问题。

三、组合继承

组合继承:原型继承+借用构造函数继承。

       function Person(name,age,sex) {
     
            this.name=name;
            this.age=age;
            this.sex=sex;
        }
        Person.prototype.sayHi=function () {
     
            console.log("您好");
        };

        function Student(name,age,sex,score) {
     
            //借用构造函数:属性值重复的问题==>继承属性
            Person.call(this,name,age,sex);
            this.score=score;
        }
        //改变原型继承==>继承方法
        Student.prototype = new Person();//不传值
        var stu = new Student("小李",20,"男",100);
        console.log(stu.name,stu.age,stu.sex,stu.score);
        stu.sayHi();

优点:可以同时继承属性和方法。

四、拷贝继承

拷贝继承;把一个对象中的属性或者方法直接复制到另一个对象中。

		function Person() {
     

        }
        Person.prototype.name="小李";
        Person.prototype.age="20";
        Person.prototype.sex="男";
        Person.prototype.sayHi=function () {
     
            console.log("您好呀");
        };

        var obj1 ={
     };
         //Person的构造中有原型prototype,prototype就是一个对象,那么里面,age,sex,height,play都是该对象中的属性或者方法。
        for(var key in Person.prototype){
     
            obj1[key]=Person.prototype[key];
        }
        console.log(obj1);
        obj1.sayHi();

缺点:因为每次都要执行遍历,造成内存消耗严重,效率低。

总结

总结常用的四种继承,以及他们的优缺点。

你可能感兴趣的:(JS学习笔记,javascript,继承)