目录
  1. 1. js 原型继承分析
    1. 1.1. 1、继承上下文
    2. 1.2. 2、继承原型
    3. 1.3. 3、写在后面
js 原型继承分析

js 原型继承分析

1、继承上下文

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//人
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 原型、原型链、构造器关系

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//人
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),所以有

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
2
Writer===writer.constructor//false
writer.constructor===Person//true

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

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

  • 构造器原型的方法、属性
  • 原型链上的方法、属性

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

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

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

3、写在后面

纯属个人理解,有问题请不要留情
文章作者: Niko Yu
文章链接: https://www.nikoyu.asia/js-%E5%8E%9F%E5%9E%8B%E7%BB%A7%E6%89%BF%E5%88%86%E6%9E%90.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Niko Yu Blog
打赏
  • 微信支付
  • 支付宝
  • 私人微信

评论