js 原型继承分析
1、继承上下文
1
| //人
|
2
| function Person(lastname,firstname,gender){
|
3
| this.lastname=lastname;
|
4
| this.firstname=firstname;
|
5
| this.gender=gender;
|
6
| }
|
7
| //作家
|
8
| function Writer(lastname,firstname,gender,worksname){
|
9
| this.worksname=worksname;
|
10
| Person.apply(this,arguments);//继承人类的上下文
|
11
| //Person.apply(this,lastname,firstname,gender);
|
12
| }
|
13
| //给作家添加原型方法
|
14
| Writer.prototype.introduce=function(){
|
15
| console.log('我叫 %s %s \n性别 %s \n我的成名作是 %s',this.lastname,this.firstname,this.gender,this.worksname);
|
16
| }
|
17
| //实例化作家苏洵
|
18
| var writer=new Writer('苏','洵','mela','六国论');
|
19
| writer.introduce();
|
20
| /*我叫 苏 洵
|
21
| 性别 mela
|
22
| 我的成名作是 六国论*/
|
2、继承原型
关于原型、原型链不了解可以戳这 js 原型、原型链、构造器关系
1
| //人
|
2
| function Person(lastname,firstname,gender){
|
3
| this.lastname=lastname;
|
4
| this.firstname=firstname;
|
5
| this.gender=gender;
|
6
| }
|
7
| Person.prototype={
|
8
| constructor:Person,
|
9
| eat(){
|
10
| console.log('我饿了需要吃饭');
|
11
| },
|
12
| breathe(){
|
13
| console.log('我不呼吸会死的');
|
14
| }
|
15
| }
|
16
| //作家
|
17
| function Writer(lastname,firstname,gender,worksname){
|
18
| this.worksname=worksname;
|
19
| Person.apply(this,arguments);//继承人类的上下文
|
20
| //Person.apply(this,lastname,firstname,gender);
|
21
| }
|
22
| //原型继承
|
23
| Writer.prototype=new Person();
|
24
| //或者Writer.prototype=Object.create(Person.prototype);
|
25
| Writer.prototype.constructor=Writer;
|
26
| Writer.prototype.introduce=function(){
|
27
| console.log('我叫 %s %s \n性别 %s \n我的成名作是 %s',this.lastname,this.firstname,this.gender,this.worksname);
|
28
| }
|
29
| Writer.prototype.init='老子可是笔下生花的作家呀';
|
30
| var writer=new Writer('苏','洵','mela','六国论');
|
31
| writer.eat()//我饿了需要吃饭
|
32
| writer.breathe()//我不呼吸会死的
|
33
| writer.introduce()/*我叫 苏 洵
|
34
| 性别 mela
|
35
| 我的成名作是 六国论*/
|
36
| console.log(writer.init)//"老子可是笔下生花的作家呀"
|
分析:Writer.prototype=new Person()
这句代码让Write的原型成为Person的一个实例,而new Person()的原型链(__proto__)指向Person的原型(prototype),所以有
1
| Writer.prototype.__proto__===Person.prototype//true
|
再看看此时Writer的原型
返回的是Person对象,但是
1
| 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;
如果缺少这句就有
1
| Writer===writer.constructor//false
|
2
| writer.constructor===Person//true
|
因为Writer的原型的构造器是Person,但是缺少这句并不影响继承
之所以不影响继承是因为实例writer继承的方法和属性有:
1
| writer.__proto__===Writer.prototype//true
|
所以writer就有了introduce方法和init属性
3、写在后面
纯属个人理解,有问题请不要留情