Javascript高级学习笔记4--继承

 

JS不是一门面向对象的编程语言,是一门基于对象的语言

面向对象的额编程语言中有类的概念,JS不是面向对象的语言所以JS中没有类,但是JS可以模拟面向对象,JS中会通过构造函数来模拟类的概念

继承:
继承是一种关系,类与类之间的关系,JS中没有类但是可以通过构造函数来模拟类,然后通过原型来实现继承
 
通过原型继承: 子类.prototype=new 父类;     改变原型的指向
借用构造函数继承:构造函数名.call(当前对象,属性,属性,属性)   主要解决属性值重复问题
组合继承:原型继承+借用构造函数继承。   解决属性值重复问题和方法
拷贝继承:把一个对象的属性和方法通过循环遍历的方式复制到另一个对象中
 
原型继承:
//JS中通过原型来实现继承
        function Person(name,age,sex){
            this.name=name;
            this.age=age;
            this.sex=sex;
        };
        Person.prototype.eat=function(){
            console.log("我在吃饭");
        };
        Person.prototype.sleep=function(){
            console.log("我在睡觉");
        };
        Person.prototype.play=function(){
            console.log("正在玩游戏");
        };

        function Student(score){
            this.score=score;
        };
        //改变学生的原型的指向即可====>学生和人已经发生了关系
        Student.prototype= new Person("guoguo",18,"男");

        Student.prototype.study=function(){
            console.log("我在学习");
        };

        var stu = new Student(100);
        console.log(stu.name);
        console.log(stu.age);
        console.log(stu.sex);
        console.log(stu.score);
        stu.study();
        stu.play();
        stu.eat();
        stu.sleep();

Javascript高级学习笔记4--继承_第1张图片

 

原型继承的缺陷: 因为改变原型指向的同时实现继承,直接初始化了属性继承过来的属性值都是一样的,只能重新调用对象的属性进行重新赋值

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

        function Student(score){
            this.score=score;
        };
        Student.prototype=new Person("guoguo",20,"男","55kg");

        var stu1 = new Student(100);
        stu1.name="lt";
        stu1.age=18;
        console.log(stu1.name,stu1.age,stu1.sex,stu1.weight,stu1.score);
        var stu2 = new Student(90);
        console.log(stu2.name,stu2.age,stu2.sex,stu2.weight,stu2.score);
        var stu3 = new Student(80);
        console.log(stu3.name,stu3.age,stu3.sex,stu3.weight,stu3.score);
    

Javascript高级学习笔记4--继承_第2张图片

借用构造函数继承:

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

        function Student(name,age,sex,weight,score){
            //借用构造函数
            Person.call(this,name,age,sex,weight);
            this.score=score;
        };

        var stu1 = new Student("guoguo",18,"男","55kg",100);
        console.log(stu1.name,stu1.age,stu1.sex,stu1.weight,stu1.score);
        //stu1.sayHi();
        var stu2 = new Student("lt",18,"男","55kg",90);
        console.log(stu2.name,stu2.age,stu2.sex,stu2.weight,stu2.score);
        var stu3 = new Student("guoguolt",18,"男","55kg",80);
        console.log(stu3.name,stu3.age,stu3.sex,stu3.weight,stu3.score);

Javascript高级学习笔记4--继承_第3张图片

 

借用构造函数继承的缺陷: 父级类别中的方法不能继承

Javascript高级学习笔记4--继承_第4张图片
 
组合继承:
  原型继承+借用构造函数继承。   解决属性值重复问题和方法
 
function Person(name,age,sex){
            this.name=name;
            this.age=age;
            this.sex=sex;
        };
        Person.prototype.sayHi=function(){
            console.log("2333");
        };

        function Student(name,age,sex,score){
            //借用构造函数:解决属性值重复问题
            Person.call(this,name,age,sex);
            this.score=score;
        };
        //改变原型指向--继承
        Student.prototype=new Person();
        Student.prototype.study=function(){
            console.log("学习");
        };

        var stu = new Student("果果",19,"男",100);
        console.log(stu.name,stu.age,stu.sex,stu.score);
        stu.sayHi();
        stu.study();

        var stu1 = new Student("guoguo",19,"女",110);
        console.log(stu1.name,stu1.age,stu1.sex,stu1.score);
        stu1.sayHi();
        stu1.study(); 

 

Javascript高级学习笔记4--继承_第5张图片

 
拷贝继承:
  把一个对象的属性和方法通过循环遍历的方式复制到另一个对象中
//拷贝继承
        function Person(){};
        Person.prototype.name="guoguo";
        Person.prototype.age=20;
        Person.prototype.sex="男";
        Person.prototype.Play=function(){
            console.log("玩游戏");
        };

        var obj2={};

        //Person的构造中有原型prototype,prototype就是一个对象,name,age,sex,play都是该对象的属性和方法
        //把一个对象当中的属性和方法通过循环遍历的方式放到另一个对象中
        for(var key in Person.prototype){
            obj2[key]=Person.prototype[key];
        };
        console.dir(obj2);
        obj2.Play();

Javascript高级学习笔记4--继承_第6张图片

 

总结:

            原型作用:数据共享,继承。目的:为了节省内存空间

            原型继承:改变原型的指向
            借用构造函数继承:主要解决属性值重复问题
            组合继承:原型继承+借用构造函数继承。解决属性值重复问题和方法
            拷贝继承:就是把对象中需要共享的属性或方法通过循环遍历的方式复制到另一个对象中

你可能感兴趣的:(Javascript高级学习笔记4--继承)