js 原型继承分析

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 原型、原型链、构造器关系

//人
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的原型

返回的是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、写在后面
纯属个人理解，有问题请不要留情