JavaScript继承

最新推荐文章于 2022-12-02 21:51:23 发布
最新推荐文章于 2022-12-02 21:51:23 发布
阅读量349 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 原型模式 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/uotail/article/details/124718846
版权

文章目录

继承是OO语言中的概念。
许多OO语言的继承都支持两种继承方式：接口继承和实现继承。
接口继承只继承方法签名，而实现继承则继承实际的方法。
由于js函数中没有签名。所以无法实现接口继承。
ES中只支持实现继承，而且继承主要是依靠原型链来实现的。

1.原型链的继承

构造函数，原型，实例之间的关系:

  • 每一个构造函数都有一个原型对象
  • 原型对象都包含一个指向构造函数的指针
  • 而实例都包含一个指向原型对象的内存指针

原型搜索机制

访问一个对象的属性时:

  1. 先在自身属性中查找，找到返回
  2. 如果没有，再沿原型__proto__这条链单相向上查找，找到返回
  3. 如果最终没找到返回undefined
  4. 作用：查找对象的属性 （查找变量是根据作用域链）
function Fn(){
    this.test1=function(){console.log('test1()')}
}
Fn.prototype.test2=function(){console.log('test2()')}
var fn = new Fun()
fn.test1()
fn.test2()
console.log(fn.toString())

原型链的继承实现1和问题

  1. 定义父类型构造函数并给它的原型添加方法
  2. 定义子类型的构造函数
  3. 父类的原型直接赋给子类的原型（关键）

:::warning

  1. 父类的原型直接赋给子类的原型，再给子类型的原型上添加属性就会直接影响到父类的原型
    （解决：那么如何才能做到让子构造函数的原型既含有父构造函数的原型上的属性，又能自定义属性并且不影响父构造函数的原型呢？—>圣杯模式）
  2. 因为constructor是从原型中的constructor获取的，所以子类的constructor指向父类
    :::
//父类型
function Supper(){
    this.supProp = 'supper property'
}
Supper.prototype.showSupperProp = function(){
    console.log(this.supProp)
}
//子类型
function Sub(){
    this.subProp = 'sub property'
}
//直接将父类型构造函数的原型赋值给子类型构造函数的原型
Sub.prototype = Supper.prototype
Sub.prototype.showSubProp = function(){
    console.log(this.subProp)
}
Sub.prototype.test = 1;
console.log(Supper.prototype.test );//1
//问题：这样如果直接给子类型的原型上添加方法就会直接影响到父类型的原型

var sub = new Sub()
sub.showSupperProp()

console.log(sub.constructor)
//指向super，因为constructor是从原型中的constructor获取
console.log(sub instanceof Supper)//super

原型链的继承实现2

  1. 定义父类型构造函数并给它的原型添加方法
  2. 定义子类型的构造函数
  3. 父类的一个实例对象直接赋给子类的原型（关键）

:::tip

  • 解决修改子类原型直接影响父类原型：
    子类型的原型为父类型的一个实例对象
  • 解决原型链继承中constructor的改变
    //让子类型的原型的constructor指向子类型
Sub.prototype.constructor = Sub

:::

:::warning
子类型的原型为父类型的一个实例对象,这样父类实例对象的属性也会被继承到子类原型中去。
而父类实例化属性一般不需要继承
:::

//父类型
function Supper(){
    this.supProp = 'supper property'
}
Supper.prototype.showSupperProp = function(){
    console.log(this.supProp)
}
//子类型
function Sub(){
    this.subProp = 'sub property'
}
//子类型的原型为父类型的一个实例对象
Sub.prototype = new Supper()
//解决：让子类型的原型的constructor指向子类型
Sub.prototype.constructor = Sub
Sub.prototype.showSubProp = function(){
    console.log(this.subProp)
}

var sub = new Sub()
sub.showSupperProp()
console.log(sub)

原型链的继承实现3-圣杯模式

解释上节父类实例化属性被继承的问题
:::tip 圣杯模式实现

  1. 使一个中间类的原型指向父类的原型
  2. 子类的原型为中级类的一个实例对象
    :::
//父类型
function Supper(){
    this.supProp = 'supper property'
}
Supper.prototype.showSupperProp = function(){
    console.log(this.supProp)
}
//子类型
function Sub(){
    this.subProp = 'sub property'
}

//圣杯模式
function inherit(target,orign){
    function F(){}
    F.prototype = orign.prototype
    target.prototype = new F();
    target.prototype.constuctor = target;
}
inherit(Sub,Supper)

Sub.prototype.showSubProp = function(){
    console.log(this.subProp)
}

var sub = new Sub()
sub.showSupperProp()
console.log(sub.constructor)
console.log(sub instanceof Supper)//super

Sub.prototype.test = 1
console.log(Supper.prototype.test )//1

默认的原型

  1. 原型链用第一种继承实现更好
  2. 原型式继承和圣杯模式的区别

所有引用类型都默认继承了Object，而这个继承也是通过原型链来实现的。
所有函数的默认原型都是Object的实例，因此默认原型都会包含一个内部指针指向Object.prototype.
这也正是所有自定义类型都会继承toString(),valueOf()等默认方法的根本原因

确定原型和实例的关系instanceof和isPrototypeOf()

可以通过两种方式来确定原型和实例之间的关系

  • 第一种是instanceof操作符
    只要实例是由原型链中的任意一个构造函数创建出来的，就会返回true
//A instanceof B A的原型链上有没有B的原型
function Car(){}
var car = new Car()
console.log(car instanceof Car) //true
console.log(car instanceof Object) //true
console.log([] instanceof Array) //true
console.log([] instanceof Object) //true
console.log({} instanceof Object) //true
  • 判断变量a是不是数组的三种方法
// 判断变量a是不是数组 3中方法
var a = [] || {}
console.log(a.constructor) //1 'function Array() { [native code] }'
console.log(a.constructor.toString().includes('Array'))

console.log(a instanceof Array)//2

var str = Object.prototype.toString.call(a)//3
console.log(str) //[object Array]
if(str==='[object Array]'){
    console.log('是数组')
}
  • 第二种是isPrototypeOf()方法
    和instanceof一样，它的原型只要是原型链中出现过的原型都会返回true

谨慎地定义方法

子类型有时候会重新超类中的某个方法，
或者需要添加超类型中不存在的某个方法。
但不管怎样，给原型添加方法的代码一定要放在替换原型的语句之后。

//父类型
function Supper(){
    this.supProp = 'supper property'
}
Supper.prototype.showSupperProp = function(){
    console.log(this.supProp)
}
//子类型
function Sub(){
    this.subProp = 'sub property'
}
//子类型的原型为父类型的一个实例对象
Sub.prototype = new Supper()
//添加新方法
Sub.prototype.showSubProp = function(){
    console.log(this.subProp)
}
//重新超类中的方法
Sub.prototype.showSupperProp = function(){
    console.log(this.supProp,'重写')
}
var sub = new Sub()
//sub.toString()
sub.showSupperProp()
console.log(sub.constructor)//指向super，因为constructor是从原型中的constructor获取的
console.log(sub instanceof Supper)//super

注意：通过原型链继承时不能使用对象字面量创建原型的方法，因为这样做会重写原型链

问题

最主要的问题是包含引用类型值的原型。
前面说过包含引用类型值的原型属性会被所有实例共享，
而这也正是为什么要在构造函数中而不是原型对象中定义属性的原型。
在通过原型链继承时，原型实际上会变成另一个类型的实例。
于是原先的实例属性也就顺理成章地变成了现在的原型属性
第二个问题是在创建子类型的实例时，不能向超类的构造函数中传递参数。

CSS圣杯模式

  1. 圣杯布局就是左右两边大小固定不变，中间宽度自适应。
  2. 圣杯布局是一种很常见的css布局。他要求：
    • 上部和下部各自占领屏幕所有宽度。
    • 上下部之间的部分是一个三栏布局。
    • 三栏布局两侧宽度不变，中间部分自动填充整个区域。
    • 中间部分的高度是三栏中最高的区域的高度。
  1. 利用flex布局实现
    • 容器设为display:flex
    • 左右宽度固定
    • 中间flex:1 自适应
<!-- html -->
<div class="header"></div>
<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>
<style>
    /* css */
    .container {
        height: 400px;
        background-color: pink;
        display: flex;
    }

    .left,
    .right {
        width: 200px;
        background-color: yellow;
    }

    .center {
        flex: 1;
        background-color: blue;
    }

    .header,
    .footer {
        height: 60px;
        width: 100%;
        background-color: pink;
    }
</style>
  1. 利用定位实现
    • 容器相对定位 position:relative;
    • 左右绝对布局分别知道宽度，left:0/right:0、top:0
    • 中间和左右指定高度
<!-- html -->
<div class="header"></div>
<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>
<style>
    /* css */
    .header,
    .footer {
        height: 60px;
        background-color: pink
    }

    .container {
        position: relative;
        padding: 0 200px;
    }

    .left,
    .right {
        height: 400px;
        background-color: yellow;
        width: 200px;
        position: absolute;
        top: 0;
    }

    .left {
        left: 0;
    }

    .right {
        right: 0;
    }

    .center {
        background-color: blue;
        height: 400px;
    }
</style>
  1. 利用浮动实现
    • 容器指定左右间距padding: 0 200px;
    • 左右相对布局，指定宽高，同向浮动，同向margin:-XX
    • 中间指定高度，向左浮动
<div class="header"></div>
<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>

<style>
    /* css */
    .container {
        padding: 0 200px;
    }

    .left {
        width: 200px;
        height: 400px;
        background-color: yellow;
        float: left;
        position: relative;
        margin-left: -200px;
    }

    .right {
        width: 200px;
        height: 400px;
        background-color: yellow;
        float: right;
        position: relative;
        margin-right: -200px;
    }

    .center {
        background-color: blue;
        height: 400px;
        float: left;
        width: 100%;
    }

    .header,
    .footer {
        height: 60px;
        width: 100%;
        background-color: pink;
    }

    .footer {
        clear: both;
    }
</style>

2.借用构造函数

也叫伪构造函数或经典继承

这种技术的基本思想相当简单，即在子类型构造函数的内部通过call或apply调用超类型构造函数。

  1. 定义父类型的构造函数
  2. 定义子类型的构造函数
  3. 在子类型构造函数中调用父类型构造函数
  4. 关键：在子类型构造函数中通过call()调用父类型构造函数
function Person(name ,age){
    this.name = name
    this.age = age
    this.sayName = function(){
        alert(this.name)
    }
    
}
function Student(name,age,price){
    //继承Person
    Person.call(this,name,age) //相当于this.Person(name,age) 借用Person的构造函数
    // Person.apply(this,[name,age])
    this.price = price
}
var s= new Student('Tom',20,1400)

传递参数

相对于原型链而言，借用构造函数可以在子类型构造函数中向超类构造函数传递参数

问题

如果仅仅是借用构造函数，那么也将无法避免构造函数存在的问题—方法都在构造函数中定义，因此函数复用就无从谈起了

3.组合继承

也叫伪经典继承，指的是将原型链和借用构造函数的技术组合到一块
其背后的思路是使用原型链实现对原型属性和方法的继承，而通过构造函数来实现实例属性的继承。
这样既通过原型上定义方法实现了函数复用
又能保证每个实例都有它自己的属性

  1. 利用原型链实现对父类型对象的方法继承
  2. 利用call借用父类型构造函数初始化相同属性
function Person(name ,age){
    this.name = name
    this.age = age
    
}

Person.prototype.sayName = function(){
    alert(this.name)
}

function Student(name,age,price){
    Person.call(this,name,age) 
    //1. 继承属性
    //相当于this.Person(name,age) 借用Person的构造函数
    this.price = price
}
//2. 继承方法
// new Person()没有任何属性，只是为了继承方法
Student.prototype = new Person()

var s= new Student('Tom',20,1400)
s.sayName()

组合继承避免了原型和借用构造函数的缺陷，成为了JavaScript中最常用的继承模式。
而且instanceof 和 isPrototype() 也能够识别基于组合继承创建的对象

4.原型式继承

function object(o){
    function F(){}
    F.prototype = o
    return new F()
}

在object()函数内部先创建了一个临时性的构造函数。
然后将传入的对象作为这个构造函数的原型。
最后返回这个临时构造函数的一个新实例。
从本质上讲，object()对传入的对象执行了一次浅复制

function object(o){
    function F(){}
    F.prototype = o
    return new F()
}

var person = {
    name:'Tom',
    friends:['Job','Kitty']
}
var anotherPerson = object(person)
anotherPerson.name = 'Greg'
anotherPerson.friends.push('test1')

var anotherPerson1 = object(person)
anotherPerson1.name = 'Linda'
anotherPerson1.friends.push('test2')

console.log(person.friends)// ["Job", "Kitty", "test1", "test2"]

ES5通过新增Object.create()方法规范了原型式继承。
这个方法接收两个参数：
一个用作新对象原型的对象(可选)
一个为新对象定义额外的对象
在传入一个参数的情况下Object.create()和object()方法的行为相同

var person = {
    name:'Tom',
    friends:['Job','Kitty']
}
var anotherPerson = Object.create(person)

Object.create()方法的第二个参数与Object.defineProperties()方法的第二个参数格式相同：
每个属性都是通过自己的描述符定义的。
以这中方式创建的任何属性都会覆盖原型对象上的同名属性

var person = {
    name:'Tom',
    friends:['Job','Kitty']
}
var anotherPerson = Object.create(person,{
    name:{
        value:'Hello'
    }
})
console.log(anotherPerson)//{name: "Hello"}

注意的是 这种模式下创建的对象，如果包含引用类型的属性始终都会共享相应的值

5.寄生式继承

寄生式继承是与原型式继承紧密相关的一种思路。
寄生式继承的思路与寄生构造函数和工厂模式类似
即创建一个仅用于封装继承过程的函数

function createAnother(o){
    var clone = Object.create(o);//通过浅拷贝创建新的对象
    clone.sayHi = function(){//以某种方式增强这个对象
        alert('hi')
    }
    return clone //返回这个对象
}

var person = {
    name:'Tom',
    friends:['Job','Kitty']
}
var anotherPerson = createAnother(person,{
    name:{
        value:'Hello',
        friends:['Job2','Kitty2']

    }
})

使用寄生式继承来为对象添加函数，会由于不能做到函数复用而降低效率，这一点与构造函数类似

6.寄生组合式继承

前面说过组合继承是JavaScript最常用的继承模式，
不过它也有自己的不足。
组合继承最大的问题是无论什么情况下都会调用两个类型构造函数；
一次是在创建超类实例赋值给子类型构造函数的原型的时候
另一次是子类型构造函数内部调用超类的构造函数初始化超类属性

子类型最终会包含超类对象的全部实力属性，
但我们不得不在调用子类型构造函数时重新这些属性。

function Sup(name){
    this.name = name
    this.colors = ['red']
}
Sup.prototype.sayName(){
    alert(this.name)
}

function Sub(name,age){
    Sup.call(this,name)//第二次调用Sup
    this.age = age
}

Sub.prototype = new Sup()//第一次调用Sup
Sub.prototype.constructor = Sub
Sub.prototype.sayAge=function(){
    alert(this.age)
}

解决-> 寄生组合式继承

//接收子类型构造函数和超类型构造函数
function inheritPrototype(sub,sup){
    //1. 创建超类原型对象副本
    var prototype = Object.create(sup.protoytype)
    //2. 为创建的副本添加constructor属性
    //从而弥补因重新原型而失去默认的constructor属性
    prototype.constructor = sub
    //3. 将创建的副本赋值给子类型的原型
    sub.prototype = prototype
}

//----use----

function Sup(name){
    this.name = name
    this.colors = ['red']
}
Sup.prototype.sayName(){
    alert(this.name)
}

function Sub(name,age){
    Sup.call(this,name)//第二次调用Sup
    this.age = age
}

//Sub.prototype = new Sup()//第一次调用Sup
//Sub.prototype.constructor = Sub

inheritPrototype(Sub,Sup)
Sub.prototype.sayAge=function(){
    alert(this.age)
}

这个模式被普遍认为是引用类型最理想的继承模式

神奇小白
关注
专栏目录
Js中的构造函数继承, 原型继承等继承的学习详解
yangyang_A的博客
07-21 1293
文章目录JS中继承学习和详解1.0 构造函数继承构造函数继承代码演示构造函数继承的原理构造函数继承的缺点2.0 通过原型链继承原型继承代码演示原型继承的原理原型继承的缺点3.0 组合继承组合继承代码演示**组合继承原理:**组合继承的缺点组合继承的优化4.0 Object.create实现继承Object.create继承代码演示Object.create继承原理Object.create继承优点5.0 class 类继承class类继承代码演示总结: JS中继承学习和详解 1.0 构造函数继承 构造函数继
JavaScript 继承的实现
10-29
JavaScript继承的实现方式多样，除了原型链之外，还有如下几种常见方式： 1. **构造函数继承**：通过调用父构造函数来初始化子对象，但不能避免方法重复。 2. **原型链继承**：通过修改子构造函数的原型使其指向父...
继承 子类的原型指向父类的实例
qq_45219069的博客
07-23 797
<script> //子类的原型指向父类的实例 //构造函数 Animal function Animal(){ //属性 name this.name="name" //方法say this.say=function(){ ...
原型式继承的constructor指向问题
那谁家的博客
05-07 1503
让我们先来了解一下constructor constructor属性不影响任何JavaScript的内部属性。 constructor 的含义是 返回指向创建了该对象原型的函数引用. instanceof检测对象的原型链，通常你是无法修改的（不过某些引擎通过私有的__proto__属性暴露出来）。 constructor其实没有什么用处，只是JavaScript语言设计的历史遗留物。 由...
图解 JavaScript 继承
最新发布
甜心森的博客
12-02 206
JavaScript 继承方式，JavaScript 原型继承，组合继承，寄生继承，寄生组合继承，ES6 继承
59、js实现继承的几种方式
sunnnnh的博客
06-17 808
//构造函数 function Animal(name) { this.name = name || 'Animal'; this.sleep = function() { console.log(this.name + '正在睡觉！'); }; } //原型上面的方法： Animal.prototype.eat = function(food) { console.log(this.name + '正在吃:' + food); } ...
JavaScript继承与聚合实例详解
01-19
本文实例讲述了JavaScript继承与聚合。分享给大家供大家参考，具体如下： 一、继承 第一种方式：类与被继承类直接耦合度高 1. 首先，准备一个可以被继承的类（父类），例如 //创建一个人员类 function Person(name)...
java学习之JavaScript继承
01-08
然而，继承中所涉及的不仅仅是一个对象，并且 js 也没有继承这一现有的机制，那它如何实现的呢？ 原型 在 JavaScript 中，每个构造函数都拥有一个prototype属性，它指向构造函数的原型对象，这个原型对象中有一个 ...
史上最为详细的javascript继承（推荐）
11-28
相信小伙伴们都知道到原型链继承（ECMAScript 中描述了原型链的概念，并将原型链作为实现继承的主要方法），因为原型链继承非常的强大，但是也有它的缺点，接下来咱们就按照上面的维度看看原型链继承到底是什么鬼 ...
javascript中子类调用父类方法解决方案
rainxie_的专栏
10-11 8038
捕风之巢 导航 BlogJava首页新随笔联系聚合管理 2014年10月 > 日 一 二 三 四 五 六 28 29 30 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
高级JS 详解面向对象、构造函数、原型、实例与原型链、原型链继承
alokka的博客
05-09 656
写在前面： JS 面向对象 在前端学习来说 一直是个重点和难点，不过在前端学习中 是很重要的思想 在es6 还有框架中 都有广泛的使用，所以是前端开发者必须要学会的知识 我在工作中用面向对象的时候比较少 所以基本学完之后就废弃了 基本忘的差不多了 最近开始学习react了 发现react上来就开始用es6的class定义类（class是一个语法糖 能简化构造函数原型的写法更加清晰）里面就涉及到了...
JS 面向对象之继承
u011705725的博客
05-07 443
JS 里面有很多没那么好懂的内容，像是闭包，继承，this。我打算将这些内容揉碎了分别输出文档。 这篇讲继承，查看完整代码请戳：继承 为什么要有继承 从 JS 创始人 Brendan Eich 讲起 JS 也是面向对象语言，一切都是对象，必须要有一种机制，将所有对象联系起来。但 Brendan Eich 的创始人又不想在 JS 中引入"类"，因为一旦引入“类”， JS 就会变成一种完整的面向对象编程语言，这显示太正式，不是创建 JS 语言的初衷。受 C++ 和 JAVA 里new命令的影响，他就把 ne
JS继承的六种方法
君兮的博客
09-21 426
①原型链继承 ​ 将父类的实例作为子类的原型 【因为实例对象是沿着原型链进行继承的（和构造函数无关）】 //爸爸 function Father () { // } //儿子 function Son () { // } //原型链继承核心 Son.prototype = new Father() //如果不手动指回来的话 Son.prototype.constructor = Father了 //因为Son.prototype是Father的实例赋值过来的 //那么Father 的实例的constru
JavaScript中的子类和父类的继承
michael8512的博客
08-20 1673
使用原型继承，中间使用临时对象作为Child的原型属性，临时对象的原型属性再指向同一个对象，这样当修改子类的原型属性，就不会影响到其他子类和父类。 function extend(Child, Parent){ var F=function(){};//创建临时对象 Child.prototype=Parent.prototype;//临时对象的原型属性指向同一个父类的原型 Child.p
js中的子类继承父类的方法和属性
kateLi的专栏
08-15 9476
上次讲了个简单的继承，这次 咱们讲个稍微复杂点的，那就是让子类继承父类的属性和方法，假设人 (Person)是父类，工人(Worker)是子类，让worker继承person的属性和方法： 父类： function Person(name,age) {         this.name=name;         this.age=age; } Person.prototype
总结JS继承的六种方式
热门推荐
AI_huihui的博客
10-15 1万+
1. 继承 1.1语法 //父类 classFather{ } //子类继承父类 classSonextendsFather{ } 例如： classFather{ constructor(sonname){ this.sonname=sonname; } say(){ console.log('你的姓是'+this.sonname); ...
JS子类继承父类，父类自动管理子类实例
u010989191的博客
04-30 1106
一、综述 有时候业务需要自动识别满足一定规则下的所有的子类，并且根据指定标识分发业务数据到子类处理。类似于Java中的面向接口编程，便于业务的扩展和维护。在js中该如何处理呢？如果你也有这样的需求，可参考这种处理方式。 二、开发环境 开发语言：html、js 编辑器：sublime text 三、源码解析 1. 定义接口 定义父类EventHandler接口，唯一参数eventId（事件ID...
JavaScript中子类调用父类方法
@奮 鬥@的专栏
03-06 3114
sdfsad     Shape = function () {         this.id = null;         this.picture = null;         this.draw = function (canvas) {             this.picture = "由父类产生的图像已经生成在画布上了";         };
JavaScript继承全面解析
"这篇文章详细介绍了JavaScript的继承机制，包括各种继承方式，如原型链继承、借用构造函数模式、组合继承、原型式继承、寄生式继承和寄生组合继承。文章旨在帮助读者深入理解JavaScript中的继承概念及其应用场景，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值