返回顶部
首页 > 资讯 > 前端开发 > JavaScript >javascript中的类,继承,构造函数详解
  • 780
分享到

javascript中的类,继承,构造函数详解

2024-04-02 19:04:59 780人浏览 安东尼
摘要

目录前言一、Class类二、es5构造函数三、实例、类的关系实例的原型指向类的原型Constructor四、继承es6继承es5继承的实现总结前言 在es5中实现一个构造函数,并用n

前言

在es5中实现一个构造函数,并用new调用,即可得到一个类的实例。到了es6发布了Class的写法,js面向对象变成也变得比较规范了。聊到类就不能不说类的构造函数以及类如何继承

一、Class类

定义一个类:

    class A {
        constructor(name){
            this.name = name
        }
        getName(){
            return this.name
        }
    }
    var newA = new A("A")
    console.log(newA.getName())  // A

二、es5构造函数

在es5中没有Class的写法,想要实现一个类的写法是这样的:

    class A {
        constructor(name){
            this.name = name
        }
        getName(){
            return this.name
        }
    }
    var newA = new A("A")
    console.log(newA.getName())  // A

三、实例、类的关系

实例的原型指向类的原型

console.log(newA.__proto__ === A.prototype)  // true

关于这个可以了解一下实例化的过程究竟发生了什么,查看MDN的连接:new操作符

  • 创建一个空的简单javascript对象(即{});
  • 为步骤1新创建的对象添加属性__proto__,将该属性链接至构造函数的原型对象 ;
  • 将步骤1新创建的对象作为this的上下文 ;
  • 如果该函数没有返回对象,则返回this。

Constructor

    console.log(A.prototype.constructor) // Class A

所有的对象都会从原型上继承一个constructor属性,是对函数本身的引用,也就是说指向函数本身。

这里实例newA的原型与A的原型相等,两者的原型的constuctor又都指向A本身。

需要注意的是constrctor是可以被修改的:参照MDN官方实例:constructor

function Type() { };

var	types = [
	new Array,
    [],
	new Boolean,
    true,        // remains unchanged
	new Date,
	new Error,
	new Function,
	function(){},
	Math,
	new Number,
	1,           // remains unchanged
	new Object,
	{},
	new RegExp,
	/(?:)/,
	new String,
	"test"       // remains unchanged
];

for(var i = 0; i < types.length; i++) {
	types[i].constructor = Type;
	types[i] = [ types[i].constructor, types[i] instanceof Type, types[i].toString() ];
};

console.log( types.join("\n") );

只有,true、1、“test”这种只读的原生结构不可被修改constuctor

四、继承

es6继承

    class Father{
        constructor(name){
            this.name = name
        }
    }
    class Son extends Father{
        constructor(name,sname){
            super(name)
            this.sname = sname
        }
        getSon(){
            return this
        }
    }
    var newSon = new Son("f","s")
    console.log(newSon.getSon())  // Son {name: 'f', sname: 's'}

es5继承的实现

    // 寄生组合继承
    function Sub(name){
        // 优先执行this绑定,以免覆盖子类的构造的值
        // 这里还有一个作用是拷贝了父类属性,避免所有子类共享引用属性!!!!
        Person.call(this)
        this.name = name || 's'
    }
    // 复制一份父类的原型,避免修改原型影响其他实例
    var fn = function(){}
    fn.prototype = Person.prototype
    Sub.prototype = new fn()
    var sub = new Sub('sub')
    sub.showName() 
    // user extend.html:19
    // my name is sub extend.html:21

关于继承详细的可以参考这篇:前端必知必会ES5、ES6的7种继承

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!  

--结束END--

本文标题: javascript中的类,继承,构造函数详解

本文链接: https://lsjlt.com/news/140732.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • javascript中的类,继承,构造函数详解
    目录前言一、Class类二、es5构造函数三、实例、类的关系实例的原型指向类的原型Constructor四、继承es6继承es5继承的实现总结前言 在es5中实现一个构造函数,并用n...
    99+
    2024-04-02
  • C++类继承时的构造函数
    前言: 子类需要编写自己的构造函数和析构函数,需要注意的是,子类只负责对新增的成员进行初始化和扫尾编写构造和析构函数,父类成员的初始化和扫尾工作由父类的构造函数和析构函数完成。 无论...
    99+
    2024-04-02
  • 如何在javascript中使用构造函数继承
    本篇文章给大家分享的是有关如何在javascript中使用构造函数继承,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。1、说明使用父亲的结构函数来增强子类的实例,等于复制父亲的实...
    99+
    2023-06-15
  • C#中怎么继承构造函数
    这篇文章给大家介绍C#中怎么继承构造函数,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。C#继承构造函数的示例:using System;    namespace&nb...
    99+
    2023-06-17
  • C++ 函数继承详解:在继承中使用构造函数和析构函数时应注意哪些事项?
    在 c++++ 继承中,构造函数继承要求派生类构造函数第一个语句调用基类构造函数,析构函数继承要求派生类析构函数先执行派生类代码再调用基类析构函数。注意避免循环调用构造函数和析构函数,确...
    99+
    2024-05-04
    继承 c++函数 c++
  • C++类继承时的构造函数实例分析
    这篇“C++类继承时的构造函数实例分析”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“C++类继承时的构造函数实例分析”文章吧...
    99+
    2023-06-29
  • C#中怎么调用继承构造函数
    今天就跟大家聊聊有关C#中怎么调用继承构造函数,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。C#类的继承,构造函数实现及其调用顺序类层层派生,在实例化的时候构造函数的调用顺序是怎样的...
    99+
    2023-06-18
  • JAVA继承中子父类的构造方法
    首先,构造方法本身会有一个隐式的无参构造(默认):①不写构造方法,类中的第一行代码事实上有一个默认的无参构造(系统会隐式为你写好)public class Student { private String name; // ...
    99+
    2017-07-16
    java教程 继承 构造方法
  • C#继承与构造函数的调用实例
    本篇内容介绍了“C#继承与构造函数的调用实例”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!C#继承构造函数的调用实例演示using ...
    99+
    2023-06-18
  • C++11继承的构造函数举例分析
    本篇内容主要讲解“C++11继承的构造函数举例分析”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“C++11继承的构造函数举例分析”吧!假设我们有下面的CRect类:由于今天的内容是讲构造函数的,...
    99+
    2023-06-19
  • C++11继承的构造函数怎么使用
    本篇内容主要讲解“C++11继承的构造函数怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“C++11继承的构造函数怎么使用”吧!多重继承的情况上述方法在多重继承时仍然有效,除了一种情况:被...
    99+
    2023-06-19
  • C++ 函数继承详解:如何设计良好的基类和派生类继承层次结构?
    函数继承使派生类从基类继承方法,可实现代码重用和多态性。遵循单一职责、开放-封闭、里斯替换原则设计良好继承层次结构,可避免代码耦合和钻石问题。 C++ 函数继承详解:如何设计良好的基类...
    99+
    2024-05-03
    c++ 继承 lsp
  • C#中的类继承详解
    目录前言类的继承注意事项寄语总结前言 在日常的程序编码工作中,我们的最终目标是完成公司交给自己的开发任务,核心目标是写出好代码。 那么什么是好代码? 高内聚,低耦合 想必从事编码工作...
    99+
    2024-04-02
  • JS精髓原型链继承及构造函数继承问题纠正
    目录前言原型链继承构造函数继承组合继承前言 先从面向对象讲起,本瓜认为:面向对象编程,它的最大能力就是:复用! 咱常说,面向对象三大特点,封装、继承、多态。 这三个特点,以&ldqu...
    99+
    2024-04-02
  • JavaScript构造函数举例详解
    典型的面向对象编程语言(比如C++和Java),存在“类”(class)这个概念。所谓“类”就是对象的模板,对象就是“类&...
    99+
    2023-05-14
    js构造函数的作用 js构造函数定义方法 js构造函数实例
  • Js类的构建与继承案例详解
    JS里类的定义和继承实在五花八门,所以单独开一个笔记本记录。 定义 派生于Object的方式 1.new Object:在创建对象后动态定义属性、方法 var Car = new...
    99+
    2024-04-02
  • C++ 函数继承详解:如何使用继承实现插拔式架构?
    函数继承允许派生类覆盖基类的函数,避免代码重复。实现方法:在派生类函数前使用 override 关键字。实战案例:插拔式架构中,插件类作为基类,派生类提供插件实现,通过 pluginma...
    99+
    2024-05-02
    c++ 函数继承
  • C++继承中的对象构造与析构和赋值重载详解
    目录一、构造/析构顺序及继承性二、拷贝构造的继承性三、赋值重载不具有继承性总结一、构造/析构顺序及继承性 class A { private: int _a; public: A...
    99+
    2024-04-02
  • C++ 函数继承详解:如何在继承中使用“基类指针”和“派生类指针”?
    在函数继承中,使用“基类指针”和“派生类指针”来理解继承机制:基类指针指向派生类对象时,执行向上转型,只访问基类成员。派生类指针指向基类对象时,执行向下转型(不安全),必须谨慎使用。 ...
    99+
    2024-05-01
    c++ 继承 编译错误
  • C++ 函数继承详解:如何调试继承中出现的错误?
    继承错误调试技巧:确保正确的继承关系。使用调试器逐步执行代码,检查变量值。确保正确使用 virtual 修饰符。检查隐藏的继承带来的菱形继承问题。检查抽象类中未实现的纯虚函数。 C++...
    99+
    2024-05-02
    c++ 继承
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作