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

作者:霜叶w 时间:2024-07-30 01:08:53 

前言

在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() { };

vartypes = [
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、&ldquo;test&rdquo;这种只读的原生结构不可被修改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种继承

来源:https://blog.csdn.net/weixin_44043130/article/details/123147416

标签:javascript,类,继承,构造函数
0
投稿

猜你喜欢

  • python 层次聚类算法图文示例

    2023-09-25 05:57:46
  • MySQL 数据编码 latin1 转 UTF8

    2010-10-14 14:20:00
  • ant design vue datepicker日期选择器中文化操作

    2024-05-09 10:51:35
  • Python垃圾邮件的逻辑回归分类示例详解

    2021-02-21 04:21:00
  • element-UI el-table树形数据 修改小三角图标方式

    2023-07-02 17:09:53
  • python爬取网页内容转换为PDF文件

    2023-04-29 10:53:12
  • Python 经典贪心算法之Prim算法案例详解

    2024-01-01 18:18:27
  • Python的子线程和子进程是如何手动结束的?

    2022-09-08 18:54:41
  • Python3.7 读取 mp3 音频文件生成波形图效果

    2022-09-08 18:02:25
  • Python中使用装饰器和元编程实现结构体类实例

    2023-04-17 17:44:36
  • asp中文URL编码server.urlencode

    2008-08-08 11:22:00
  • 微信小程序搭建及解决登录失败问题

    2023-06-28 09:51:49
  • 对于Python装饰器使用的一些建议

    2022-05-26 09:05:43
  • 分析Mysql大量数据导入遇到的问题以及解决方案

    2024-01-23 19:10:08
  • Python unittest装饰器实现原理及代码

    2022-05-06 22:33:49
  • MySQL之where使用详解

    2024-01-16 11:11:08
  • python 实现aes256加密

    2021-01-20 22:31:38
  • XMLTextReader和XmlDocument读取XML文件的比较

    2008-09-05 16:04:00
  • Windows下用py2exe将Python程序打包成exe程序的教程

    2021-07-11 23:03:17
  • python登录豆瓣并发帖的方法

    2021-03-06 14:48:35
  • asp之家 网络编程 m.aspxhome.com