js 原型继承分析

r囧r小猫 2022-06-11 09:45 167阅读 0赞

1、继承上下文

//人
    function Person(lastname,firstname,gender){ 
        this.lastname=lastname;
        this.firstname=firstname;
        this.gender=gender;
    }
    //作家
    function Writer(lastname,firstname,gender,worksname){ 
        this.worksname=worksname;
        Person.apply(this,arguments);//继承人类的上下文
        //Person.apply(this,lastname,firstname,gender);
    }
    //给作家添加原型方法
    Writer.prototype.introduce=function(){ 
        console.log('我叫 %s %s \n性别 %s \n我的成名作是 %s',this.lastname,this.firstname,this.gender,this.worksname);
        }
    //实例化作家苏洵
    var writer=new Writer('苏','洵','mela','六国论');
    writer.introduce();/*我叫 苏 洵 性别 mela 我的成名作是 六国论*/

2、继承原型  
关于原型、原型链不了解可以戳这 [**js 原型、原型链、构造器关系**][js]

//人
    function Person(lastname,firstname,gender){ 
        this.lastname=lastname;
        this.firstname=firstname;
        this.gender=gender;
    }
    Person.prototype={
        constructor:Person,
        eat(){
            console.log('我饿了需要吃饭');
        },
        breathe(){
            console.log('我不呼吸会死的');
        }
    }
    //作家
    function Writer(lastname,firstname,gender,worksname){ 
        this.worksname=worksname;
        Person.apply(this,arguments);//继承人类的上下文
        //Person.apply(this,lastname,firstname,gender);
    }
    //原型继承
    Writer.prototype=new Person();
    //或者Writer.prototype=Object.create(Person.prototype);
    Writer.prototype.constructor=Writer;
    Writer.prototype.introduce=function(){ 
        console.log('我叫 %s %s \n性别 %s \n我的成名作是 %s',this.lastname,this.firstname,this.gender,this.worksname);
        }
    Writer.prototype.init='老子可是笔下生花的作家呀';
    var writer=new Writer('苏','洵','mela','六国论');
    writer.eat()//我饿了需要吃饭
    writer.breathe()//我不呼吸会死的
    writer.introduce()/*我叫 苏 洵 性别 mela 我的成名作是 六国论*/
    console.log(writer.init)//"老子可是笔下生花的作家呀"

分析：**`Writer.prototype=new Person()`**

这句代码让Write的原型成为Person的一个实例，而new Person()的原型链(\_\_proto\_\_)指向Person的原型(prototype)，所以有

Writer.prototype.__proto__===Person.prototype//true

再看看此时Writer的原型

![这里写图片描述][SouthEast]

返回的是Person对象，但是

Writer.prototype===Person//false  new Person()当然不等于Person

**自我理解是Writer继承new Person()提供的Person方法和属性后就与Person脱离关系**  
这也是为啥不直接用`Writer.prototype=Person.prototype`  
到此Writer的实例就可以使用Person的原型方法了

分析：**`Writer.prototype=Object.create(Person.prototype);`**

Object.create(proto, \[ propertiesObject \])函数创建一个指定原型且可选择性地包含指定属性的对象  
可以先肤浅的认为和**`Writer.prototype=new Person()`**效果一样  
分析：**`Writer.prototype.constructor=Writer;`**

如果缺少这句就有

Writer===writer.constructor//false
    writer.constructor===Person//true

因为Writer的原型的构造器是Person,但是缺少这句并不影响继承

之所以不影响继承是因为实例writer继承的方法和属性有：

*  **构造器原型的方法、属性**
 *  **原型链上的方法、属性**
    
    虽然实例writer的构造器是 Person,Person没有Writer添加的原型方法、属性，但是writer的原型链指向Writer的原型

writer.__proto__===Writer.prototype//true

所以writer就有了introduce方法和init属性

3、写在后面  
纯属个人理解，有问题请不要留情

[js]: http://blog.csdn.net/weixin_38283159/article/details/76531118
[SouthEast]: /images/20220611/44c7c7369b22487981a341466e489b37.png