美文网首页
js原型的继承

js原型的继承

作者: 十年之后_b94a | 来源:发表于2018-06-01 09:50 被阅读0次

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、原型继承

相关文章

  • js基础之实现继承的几种方式

    js 实现继承的方式有: 原型链继承; 构造函数继承; 组合继承(原型链继承 + 构造函数继承)(最常用);(原型...

  • 2019-03-25 继承

    js中通过原型来实现继承 组合继承:原型继承+借用构造函数继承

  • js继承

    js继承js 继承-简书 原型链实现集继承 上面的代码实现原型链继承最重要的son.prototype=new f...

  • js继承遇到的小问题

    这两天在看js继承方面,它不像OC那种传统的类继承。js继承方式还是挺多的。比如:原型继承、原型冒充、复制继承 原...

  • 浅析JS继承方法

    JS 实现继承的方法有:1.原型链继承2.构造函数继承3.组合继承(原型链继承 + 构造函数继承)4.原型式继承(...

  • 前端开发必须知道的JS(一) 原型和继承(转载)

    前端开发必须知道的JS(一) 原型和继承 原型和闭包是Js语言的难点,此文主要讲原型及原型实现的继承,在(二)中会...

  • JavaScript如何实现继承?

    JS 中的继承主要分为两种:原型继承和非原型继承,非原型继承又分为寄生方式继承、借用或伪造构造函数方式继承、组合方...

  • JS汇总---面向对象&数组

    面向对象 js原型链的继承 静态属性怎么继承 js原型链以及特点 面向对象有哪几个特点 封装,继承,多态 对象的继...

  • js之继承

    文章主讲 JS 继承,包括原型链继承、构造函数继承、组合继承、寄生组合继承、原型式继承、 ES6 继承,以及 多继...

  • JS中继承的实现

    JS中继承的实现 #prototype (js原型(prototype)实现继承) 全局的Function对象没有...

网友评论

      本文标题:js原型的继承

      本文链接:https://www.haomeiwen.com/subject/flshsftx.html