JavaScript中的常见继承总结

 更新时间:2022年09月21日 08:54:13   作者:陆荣涛  
这篇文章主要介绍了JavaScript中的常见继承总结,继承其实就是构造函数和构造函数之间的一种关系,更多相关介绍,需要的小伙伴可以参考下面文章内容

前言

我们在学习前端的过程中一定会遇到继承这个问题

继承其实就是构造函数和构造函数之间的一种关系

当一个构造函数A的实例使用构造函数B身上的属性和方法,这个时候我们就说构造函数A继承至构造函数B。

我们一般把构造函数A称之为子类,构造函数B称之为父类。

想要弄明白继承就要先弄明白原型链

原型链

  function Person() {
            // 属性
            this.name = 'Jack'
            this.age = 18
            this.gender = '男'
        }
		// 实例
        const p = new Person()


        // 1.p 的 __proto__ 指向了谁?
        console.log(p.__proto__ === Person.prototype)

        // 2.Person 的 __proto__ 指向了谁 ?
        console.log(Person.__proto__ === Function.prototype)

        // 3.Person.prototpye 的 __proto__ 指向了谁 ?
        console.log(Person.prototype.__proto__ === Object.prototype)

        // 4.Function.prototype 的 __proto__ 指向了谁 ?
        console.log(Function.prototype.__proto__ === Object.prototype)

        // 5.Function 的 __proto__ 指向了谁 ?
        console.log(Object.prototype.__proto__)

        // 6.Object.prototype 的 __proto__ 指向了谁 ?
        console.log(Function.__proto__ === Function.prototype)

        // 7.Object 的 __proto__ 指向了谁 ?
        console.log(Object.__proto__ === Function.prototype)

常用的继承方法

我们在面试或者开发过程中使用做多的继承有:

  • 原型继承
  • 原型链继承
  • 组合继承

当然还有一些别的继承,其它的继承相对于上面的三种情况使用的就少了很多:

主要介绍上面的三种继承

原型继承

原理

  • 原型继承的核心原理:子类的原型指向父类的实例
  • 这个也可以理解成把父类的实例赋值给子类的原型对象

优点

  • 父类构造函数体内的属性和原型上的方法都可以实现继承

缺点

  • 继承下来的属性不在自己身上, 在自己的原型上
  • 一个构造函数的实例, 需要在两个地方传递参数
  • 所有子类的实例, name 和 age 一模一样
        // 父类
        function Person(name, age) {
            //属性
            this.name = name
            this.age = age
        }
        // 方法
        Person.prototype.paly = function () { console.log('玩游戏'); }
​
        // 子类
        function Students(classRoom) {
            // 属性
            this.classRoom = classRoom
        }
​
        // 把子类的原型指向父类的实例对象
        // 把父类的实例赋值给子类的原型(原型对象)
        // 创建一个父类的实例
        const p = new Person('Jack', 25)
        // 子类的实例指向父类的原型对象
        Students.prototype = p
​
       // 实例化一个对象
       let s = new Students('高级1班')
       console.log(s);
       let s1 = new Students('高级2班')
       console.log(s1);

执行结果

借用构造函数继承

原理

  • 把我们的父类够构造函数当做普通函数在子类构造函数体内调用
  • 利用 call 方法改变函数内的 this 指向

优点

  • 子类的所有继承下来的属性都在自己身上
  • 子类的所有参数在一个地方传递
  • 子类的所有实例都可以给继承下来的属性赋不一样的值

缺点

父类的原型上的方法没有继承下来:

// 父类
function Person(name, age) {
    // 属性
    this.name = name
    this.age = age
}
// 原型对象上添加一个方法
Person.prototype.paly = function () { console.log('玩游戏'); }
// 子类
function Students(name, age,classRoom) {
    this.classRoom = classRoom
    // 因为这个this指向的就是子类的实例
    Person.call(this, name, age)
}
// 实例化一个对象
let s = new Students('张三',25,'高级1班')
console.log(s);
let s1 = new Students('李四',20,'高级2班')
console.log(s1);

执行结果

组合继承

原理

  • 把 原型继承 和 借用构造函数 继承放在一起使用

优点

  • 把原型继承 和 借用构造函数继承放在一起使用
  • 既达到了全都继承下来又能把属性继承在自己身上

缺点

子类的原型上有一套多余的属性:

// 父类
function Person(name, age) {
    // 属性
    this.name = name
    this.age = age
}
// 原型对象上添加一个方法
Person.prototype.paly = function () { console.log('玩游戏'); }
// 子类
function Students(name, age,classRoom) {
    this.classRoom = classRoom
    // 借用构造函数继承
    Person.call(this, name, age)
}
// 原型继承
// 主要的目的就是为了使用父类身上的方法
Students.prototype = new Person()
​
// 实例化一个对象
let s = new Students('张三',25,'高级1班')
console.log(s);
​
let s1 = new Students('王五',24,'高级2班')
console.log(s1);
s1.play()

执行结果

到此这篇关于JavaScript中的常见继承总结的文章就介绍到这了,更多相关JS常见继承内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript实现数字验证码的简单实例

    javascript实现数字验证码的简单实例

    本篇文章主要是对javascript实现数字验证码的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • 百度前台js笔试题与答案

    百度前台js笔试题与答案

    百度前台js笔试题与答案...
    2007-09-09
  • 原生js编写autoComplete插件

    原生js编写autoComplete插件

    这篇文章主要为大家详细介绍了原生js编写的autoComplete插件,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 微信小程序实现定位及到指定位置导航的示例代码

    微信小程序实现定位及到指定位置导航的示例代码

    这篇文章主要介绍了微信小程序实现定位及到指定位置导航的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • JS组件封装之监听localStorage的变化

    JS组件封装之监听localStorage的变化

    这篇文章主要介绍了JS组件封装之监听localStorage的变化,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • js原生实现FastClick事件的实例

    js原生实现FastClick事件的实例

    下面小编就为大家带来一篇js原生实现FastClick事件的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • js实现计算器功能

    js实现计算器功能

    这篇文章主要为大家详细介绍了js实现计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • Bootstrap每天必学之媒体对象

    Bootstrap每天必学之媒体对象

    Bootstrap每天必学之媒体对象,对BootBootstrap每天必学之媒体对象小编也了解的很少,希望通过这篇文章和大家更多的去学习Bootstrap每天必学之媒体对象,从中得到收获。
    2015-11-11
  • 使用js简单实现了tree树菜单

    使用js简单实现了tree树菜单

    使用js简单实现了树菜单!具体实现实例代码如下,相信自己你一定可以实现的更好
    2013-11-11
  • 如何在微信小程序中使用骨架屏的步骤

    如何在微信小程序中使用骨架屏的步骤

    这篇文章主要介绍了如何在微信小程序中使用骨架屏的步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06

最新评论