JavaScript几种继承方式

时间:2019-08-28
本文章向大家介绍JavaScript几种继承方式,主要包括JavaScript几种继承方式使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

我们先构建一个Person的构造函数

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

然后通过构建Student构造函数演示几种继承方式

1.通过原型链方式进行继承

function Student(age){
        this.age=age;
    }
Student.prototype.study1=function () {
        console.log("我热衷于学习");
    }
 Student.prototype=new Person(“张三”);//改变原型指向,指向Person的实例对象的__proto__
 Student.prototype.study2=function () {
    console.log("我热衷于敲代码");
    }

注意:使用此方式进行继承,在Student构造函数中添加原型方法应注意在改变原型指向后添加方法,上述代码中Student实例化后,Student的方式Study1调用失败study2才可调用成功

存在缺点:Person的实例化对象时name属性固定为“张三”,当多次实例化Student对象时,导致继承的name属性一直为“张三”;

2.在构造Student函数中使用call方式进行继承

function  Student(age,name) {
        this.age=age;
        Person.call(this,name);//通过call方式改变this指向
    }
    Student.prototype.study=function () {
        console.log("学习");
    }

存在缺点:此方式在Student实例化对象,可以调用Student原有方法study,但是无法调用Person构造函数中的方法

3.组合继承

function  Student(age,name) {
        this.age=age;
        Person.call(this,name);//通过call方式改变this指向
    }
  Student.prototype=new Person();//改变原型的指向
    Student.prototype.study=function () {
        console.log("学习");
    }

解决了上述两种方式出现的问题

4.拷贝继承

var obj1={
        name:"张三",
        age:16,
        sayHi:function () {
            console.log(this.name+",您好");
        }
    }
    var obj2={};
    for(var key in obj1){
        obj2[key]=obj1[key];
    }
    console.dir(obj2);
    console.dir(obj1);

原文地址:https://www.cnblogs.com/kongbaifeiye/p/11425118.html