js原型的继承

2018-06-01  本文已影响0人  十年之后_b94a

1、拷贝继承)构造函数的父子类继承属性 以及原型链上的属性方法

//创建一个人的类
function createPer(name,sex){
  this.name = name;
  this.sex = sex
}
createPer.prototype.showName=function (){
  alert(this.name)
}
//创建一个职业类 这个类拥有名字、性别。职业
function createJob(name , sex , job){
  //直接调用人的类函数 利用call改变this指向
//把元吧人的类的this指向当前构造函数
  createPer.call(this,name,sex)
}
//原型链方法的继承
//这样直接进行原型链的赋值会出现问题,子类修改原型链上的方法,会影响到父类的方法
//此方法不可选
** **createJob.prototype =  createPer.prototype
//利用for in进行赋值
for(ler k in createPer.prototype){
  createJob.prototype[k] = createPer.prototype[k]
}
//这样就不会影响了
子类一样拥有了父类的showName方法 当子类添加方法 不会影响父类

总结
属性的继承:调用父类的方法使用call改变this指向
方法的继承:称之为拷贝继承 (for in)

2、类式继承

通过原型的直接赋值实例对象

function Aaa(){ //父类
  this.name = '小明'
}
Aaa.prototype.showName = function(){
  alert(this.name)
}

function Bbb(){
}
//类式继承 此时的constructor指向Aaa的 
Bbb.prototype = new Aaa()
let b = new Bbb();
b.showName() //弹出小明

Bbb的构造函数明明没有showName方法 已经Name属性,为什么b的实例对象能有这个方法
原理: 调用showName方法,先找自己的构造函数有没有这个方法,没有就通过原型链上去找,发现
原型链赋值了Aaa上面,就找到showName了。

一切的new 对象 可以看成一个json
{
name : '小明',
showName(){}
}


image.png

拷贝继承确实可以完整的继承父类的方法以及属性但是当下面这种情况

function Aaa(){
  this.name = '小明'
}
Aaa.prototype.showName = function(){
  alert(this.name)
}
function Bbb(){}
Bbb.prototype = new Aaa() //类式继承 属性以及方法
var b = new Bbb()
b.showName()  //小明
b.name = '小红'  //改变实例b的属性name的值
var c = new Bbb()  //在创建一个实例
c.showName()  //小红

改变的明明是b的实例属性 为什么 新创建的c的name也改变了
因为这里的Bbb构造函数的name都是指向Aaa的内存 修改了实例b的name 相当于改变了Aaa的name的值
完整的类式继承

function Aaa(){
  this.name = '小明'
}
Aaa.prototype.showName = function(){
  alert(this.name)
}
function Bbb(){
  Aaa.call(this)  //调用Aaa()的函数  使用call指向Bbb 继承Aaa的属性
}

function f(){}

f.prototype = Aaa.prototype // 由f继承 Aaa的原型链上的属性及方法

Bbb.prototype = new f()  //Bbb的原型

var b = new Bbb()
b.showName()  //小明
b.name = '小红'  //改变实例b的属性name的值
var c = new Bbb()  //在创建一个实例
c.showName()  //小明

3、原型继承

上一篇下一篇

猜你喜欢

热点阅读