【二】构造函数和原型

ES6(ECMAScript 6.0)之前js没有引入类的概念

在ES6之前,对象不是基于类创建的,而是用一种称为构建函数的特殊函数来定义对象和它们的特征

ES6之前创建对象可以通过以下三种方式创建对象:

对象字面量:

var obj ={
    
}

new Object():

var obj=new Object()

自定义构造函数:

function Star(name,age){
    this.name=name;
    this.age=age;
    this.sing=function(){
        console.log("我会唱歌!")
    }
}
var star=new Star("张三",20)
console.log(star.name);
star.sing()   //我会唱歌!

构造函数是一种特殊的函数,主要用于初始化对象,他总是与new一起使用,我们把对象的一些公共的属性和方法抽取出来,然后封装到这个函数里面

new 在执行时会做四件事情:

  1. 在内存中创建一个新的对象

  2. 让this指向这个新的对象

  3. 执行构造函数中的代码,给这个新对象添加属性和方法

  4. 返回这个新的对象

成员即是构造函数包含的属性和函数,而成员又分为:实例成员和静态成员

实例成员

实例成员就是在构造函数内部通过this添加的成员如上面的name、age和sing,实例成员只能通过实例化对象进行访问

var star=new Star("张三",20)
//star.kk=1029  这也是实例成员
console.log(star.name);

静态成员

在构造函数本身上添加的成员

star.sex='男'
console.log(star.sex)  //男

静态成员只能通过构造函数进行访问

 

我们希望所有对象使用同一个函数,这样就比较节省内存,而解决方法就是我们接下来要讲的原型对象prototype(构造函数通过原型分配的函数是所有对象所共享的)

JavaScript规定,每一个构造函数都有一个prototype属性,指向另一个对象。注意这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有,下面我们看看打印的构造函数:

 

我们可以把哪些不变的方法,直接定义在prototype对象上,这样所有对象的实例就可以共享这些方法

以上面代码为例:

Star.prototype.sing=function(){
    console.log("我会唱歌")
}
let star=new Star()
star.sing()

所以一般情况下,我们的公共属性定义到构造函数里面,公共的方法放在原型对象上

每一个对象都有一个属性proto指向我们构造函数的原型对象,但是我们不能通过proto对原型对象中的属性进行赋值

接下来我们来仔细探讨一下构造函数、实例和原型对象之间的关系

function Star(username,age){
      this.username=username;
      this.age=age
    }
    Star.prototype.sing=function(){
      console.log("我会唱歌");
    }
    let star=new Star()
    console.log(Star.prototype);   //输出构造函数上的原型对象
    console.log(star);     //输出对象

上述程序运行结果如下:

 

对象原型([[Protootype]])和构造函数(prototype)原型对象里面都有一个属性constructor属性,constructor我们称为构造函数,因为它指回构造函数本身
constructor主要用于记录该对象引用与哪个构造函数,它可以让原型对象指向原来的构造函数
很多情况下,我们需要手动的利用constructor这个属性指向原来的构造函数
Star.prototype = {
    movie: function(){
        console.log("我会演电影');
        }
 }//prototype是对象,如果这样赋值就会覆盖原来的对象,这会使得原型上没有了构造函数
 console.log(Star.prototype)

原型对象上没有了构造函数具体影响取决于你在代码中的使用方式。以下是可能的影响:

  1. 丢失原型链:通过将 star.prototype 设置为新的对象字面量,你将丢失默认的原型链。默认情况下,原型链是由构造函数和其原型对象构成的。如果没有了默认的原型对象,那么对象实例将不再具有原型链上的属性和方法的继承能力。

  2. 构造属性丢失:由于新的原型对象没有 constructor 属性,所以对象实例将不再具有指向构造函数的 constructor 属性。当你通过检查对象的构造属性来确定其构造函数时,将无法准确地识别对象的类型。

  3. 对象实例继承变更:新创建的对象实例将继承新原型对象上的属性和方法。在你的示例中,新对象实例将继承 movie 方法。这意味着你可以在新对象上调用 movie() 方法,输出 "我会演电影"。

请注意,由于丢失了默认的原型对象和构造属性,这种设置可能会导致代码的可读性和可维护性下降。通常情况下,最好不要完全替换原型对象,而是通过扩展或修改原型对象来添加或覆盖属性和方法。

以下是一个示例,展示了将 star.prototype 设置为新对象字面量的影响:

function Star(name) {
  this.name = name;
}
​
// 将 star.prototype 设置为新对象字面量
Star.prototype = {
  movie: function() {
    console.log("我会演电影");
  }
};
​
var star1 = new Star("张三");
​
// 对象实例继承了新原型对象上的方法
star1.movie(); // 输出:我会演电影
​
// 丢失了默认的构造属性
console.log(star1.constructor === Star); // false
console.log(star1.constructor); // 输出:[Function: Object]

在上述示例中,star1 对象实例继承了新的原型对象上的 movie 方法,可以调用该方法。但它失去了默认的构造属性,constructor 不再指向 Star 构造函数,而是指向 Object 构造函数。

这时我们需要手动添加constructor指回原来的构造函数

 

 通过原型对象扩展内置对象

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/32377.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Spring AOP】面向切面编程,面向切面编程是面向对象编程的孪生兄弟嘛?且听我细细道来! ! !

前言: 大家好,我是良辰丫,面向切面编程和面向对象编程是两种几乎不同的编程方式,并不是所谓的孪生兄弟,但是我们可以说面向切面编程是面向对象编程的一种补充和完善,到底是什么意思呢?请跟随良辰的步伐往下瞧! ! !💌💌💌 🧑个人主…

TypeScript ~ 掌握基本类型 ①

作者 : SYFStrive 博客首页 : HomePage 📜: TypeScript ~ TS 📌:个人社区(欢迎大佬们加入) 👉:社区链接🔗 📌:觉得文章不错可以点点关注 &…

Redis原理 - IO详解

原文首更地址,阅读效果更佳! Redis原理 - IO详解 | CoderMast编程桅杆https://www.codermast.com/database/redis/redis-IO.html 用户空间与内核空间 任何Linux 系统的发行版,其系统内核都是 Linux 。我们的应用都需要通过 Linux 内核与硬…

怎么给PDF添加图片水印?其实很简单,看这篇就会了!

许多人都意识到版权问题的重要性,尽管在日常生活中我们可能很少遇到,但在办公和学习中却经常涉及到此类问题。例如,我们辛辛苦苦制作的PDF文件,如何确保不被他人盗用呢?这就涉及到如何为PDF添加图片水印的问题,相当于…

经典基于外观的SLAM框架-RTABMAP(RGBD视觉输入方案)

经典基于外观的SLAM框架-RTABMAP 文章目录 经典基于外观的SLAM框架-RTABMAP1. RTABMAP整体框架2.RTABMAP的内存管理机制3. 视觉里程计4. 局部地图5. 回环检测与图优化6. 代码工程实践 1. RTABMAP整体框架 RTABMAP是采用优化算法的方式求解SLAM问题的SLAM框架,本赛题…

【python 第三方库安装换源】

换源: pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple/其他国内第三方库的下载源地址: 阿里云:http://mirrors.aliyun.com/pypi/simple/ 科技大学:https://pypi.mirrors.ustc.edu.cn/simple/ 豆瓣&a…

Vue实例知识点分享

文章目录 导文下面是创建 Vue 实例的基本步骤 常用的 Vue 实例方法和属性总结 导文 Vue的实例是用来创建 Vue 应用程序的对象。通过实例化 Vue 构造函数,我们可以创建一个具有响应式数据、计算属性、方法和生命周期钩子等特性的 Vue 实例。 下面是创建 Vue 实例的基…

python技术分享

文章目录 python介绍应用领域环境搭建基础知识编程工具变量基本数据类型容器数据类型程序结构运算符函数类 技巧总结python内存管理python常用技术python的缺陷优化python的编码规范提升性能总结 python介绍 弱类型的语言 声明一个变量,直接赋值即可,简…

Android强大的原生调试工具adb的常用命令

文章目录 ADB简介常用命令列出链接的设备进入设备的shell环境设备日志安装应用程序卸载应用程序将本地文件复制到调试设备上将设备上的文件拉取到本地启动程序强制停止程序运行截图屏幕录制列出调试设备所有的应用的报名 结语 ADB简介 ADB(Android Debug Bridge&am…

【从零开始学习JAVA | 第二十一篇】常见API介绍 System

目录 前言: System: System类中静态方法: 总结: 前言: system 是一个很底层的 API,是一个工具类,提供了一些与系统相关的方法。他在我们写项目的时候提供了一些非常实用的方法,本…

量子机器学习Variational Quantum Classifier (VQC)简介

变分量子分类器(Variational Quantum Classifier,简称VQC)是一种利用量子计算技术进行分类任务的机器学习算法。它属于量子机器学习算法家族,旨在利用量子计算机的计算能力,潜在地提升经典机器学习方法的性能。 VQC的…

优化--分类树,我从2s优化到0.1s

1.前言 分类树查询功能,在各个业务系统中可以说随处可见,特别是在电商系统中。 但就是这样一个简单的分类树查询功能,我们却优化了5次。 到底是怎么回事呢? 2.背景 我们的网站使用了SpringBoot推荐的模板引擎:Thym…

【Python实战】Python采集情感音频

成年人的世界真不容易啊 总是悲伤大于欢喜 爱情因为懵懂而快乐 却走进了复杂和困惑的婚姻 前言 我最近喜欢去听情感类的节目,比如说,婚姻类,我可能老了吧。我就想着怎么把音乐下载下来了,保存到手机上,方便我们业余时…

Jnpf低代码开发平台

一、写在前面 低代码开发平台,一个号称能在几分钟的时间里开发出一套公司内部都可使用的应用系统开发工具。 很多人或许都隐隐听说过低代码,因为低代码不仅远名国外,国内的腾讯、阿里、华为、网易、百度等科技巨头也纷纷入局,足以…

URL到页面: 探索网页加载的神秘过程

当我们从浏览器的地址栏输入 URL, 按下回车, 再到最后出现需要的网页界面, 这中间究竟发生了什么, 接下来就一步步进行解析. 主要是如下过程: 输入网址DNS 解析客户端发送 HTTP 请求建立 TCP 连接服务器处理请求, 计算响应, 返回响应浏览器渲染页面关闭连接 本篇中只是概述整…

docker 操作手册

名词解释 images:封装了应用程序的镜像 tag:镜像的标记,一个镜像可以创建多个标记 container:装载镜像并运行 常用命令 查看容器 docker ps -a //查看全部镜像 启动容器 docker start mysql //启动mysql容器 停止容器 doc…

Maven(三):Maven的组成详解

文章目录 坐标和依赖坐标详解依赖配置依赖范围传递性依赖依赖调节可选依赖优化排除依赖归类依赖优化依赖 仓库本地仓库远程仓库仓库镜像常用搜索地址 生命周期与插件三套生命周期clean生命周期default生命周期site生命周期 插件 聚合与继承更加灵活的构建常见问题使用jdk来运行…

TuyaOS 开发固件OTA上传固件指南

文章目录 一、产品创建二、TuyaOS设备开发三、固件上传 通过TuyaOS接入涂鸦云的产品全部默认支持固件OTA功能,TuyaOS设备实现固件OTA需要: 自定义产品创建TuyaOS嵌入式开发固件上传固件OTA配置与发布 等步骤实现产品OTA。本文重点讲述TuyaOS开发模式下&…

基于数据驱动 U-Net 模型的大气污染物扩散快速预测,提升计算速度近6000倍

项目背景 当前,常见的大气污染预测模型大多是基于物理机理构建的,比如空气质量预测模型 Calpuff、AERMOD、CMAQ 等。然而,这些模型运算较为复杂,对于输入数据的要求非常高,运算耗时也比较长,适合用于常规固…

如何在 ZBrush 和 UE5 中创建精灵吟游诗人(P1)

小伙伴们大家好,今天 云渲染小编给大家带来的是CG艺术家Hugo Sena关于“精灵吟游诗人”项目背后的工作流程,讨论了角色身体、服装和竖琴的工作流程,并解释了如何在虚幻引擎 5 中设置灯光。篇幅较长,分为上下两篇,大家接…