JS-03深入了解构造函数

news2024/11/23 23:57:41

目录

1 引入构造函数

2 通过构造函数创建对象-内置

3 自定义一个构造函数来创建对象

3.1 构造函数的概念

3.2关于new Object()

 3.3 构造函数的执行过程

3.3.1构造函数的返回值

    3.3.2 如何判断一个数据是否是复杂数据类型?

3.3.3为什么要理解构造函数的返回值?

3.3.4如何分辨出一个对象是不是某个构造函数的实例?


1 引入构造函数

通过创建多次单个对象,存在问题如下:

a、存在很多冗余代码 
b、所有的对象都有say方法,并且功能相似,但是他们占据了不同的内存-->会导致内存浪费(内存泄漏)

<script>
    var p1 = { age: 100, gender: "女", say: function () { } }
    var p2 = { age: 100, gender: "女", say: function () { } }
    var p3 = { age: 100, gender: "女", say: function () { } }
    var p4 = { age: 100, gender: "女", say: function () { } }
    var p5 = { age: 100, gender: "女", say: function () { } }
    var p6 = { age: 100, gender: "女", say: function () { } }
</script>

使用构造函数进行优化,使代码整洁了许多!!

<script>
    //构造函数
    function Person(age, gender) {
        this.age = age;
        this.gender = gender;
        //此时的say方法内存依然浪费了-->原型(解决方法,后面展开)
        this.say = function () {

        }
    }
    //使用这种方式创建对象,代码整洁了很多
    var p1 = new Person(5, "未知");
    //Person是p1的构造函数
    var p2 = new Person(5, "未知");
    var p3 = new Person(5, "未知");
    var p4 = new Person(5, "未知");
    var p5 = new Person(5, "未知");
    var p6 = new Person(5, "未知");
    //还有一个遗留问题(在后续继承中展开)
</script>

2 通过构造函数创建对象-内置

构造函数创建对象的例子:
+ var xiaoming = new Object()     --> (等价于)  var xiaoming = {};  
+ var now = new Date() 
+ var rooms = new Array(1,3,5)    -->   var rooms = [1,3,5]
+ `var isMale=/123/;`   ==> `var isMale=new RegExp("123")`
    - isMale是通过RegExp构造函数创建出来的对象
    - isMale是RegExp构造函数的实例

+ 以上例子中,Object、Date、Array都是内置的构造函数

3 自定义一个构造函数来创建对象

+ 构造函数
```js
    function Person(name,age){
        this.name=name;
        this.age=age;
    }
    var p1=new Person("张三",18)
```
+ 说明:`p1就是根据【Person构造函数】创建出来的对象`

3.1 构造函数的概念

构造函数的概念
+ 任何函数都可以当成构造函数,都可能称为构造函数
    `function CreateFunc(){ }`
+ 只要把一个函数通过new的方式来进行调用,我们就把这一次函数的调用方式称之为:构造函数的调用
    - new CreateFunc(); 此时CreateFunc就是一个构造函数
    - CreateFunc();     当成普通函数使用,此时的CreateFunc并不是构造函数 

3.2关于new Object()

+ new Object()等同于对象字面量{} 

在JavaScript中,new Object() 和 对象字面量 {} 确实在功能上非常相似,它们都用于创建一个新的对象实例。然而,从语法、性能和日常使用的角度来看,它们之间有一些细微的差别。

  1. 语法

    • new Object():这是使用构造函数创建一个新对象的传统方式。
    • {}:这是使用对象字面量语法创建一个新对象的更简洁、更现代的方式。
  2. 性能

    • 在现代JavaScript引擎中,两者在性能上的差异几乎可以忽略不计。然而,由于对象字面量语法更简洁,它可能稍微快一点,因为解析器需要处理的字符更少。
  3. 可读性

    • 对象字面量语法通常更受欢迎,因为它更简洁、更易于阅读和维护。
    • 使用 new Object() 在某些情况下可能会使代码看起来更加冗余或过时。
  4. 初始化属性

    • 使用对象字面量语法,你可以在创建对象的同时初始化其属性。例如:let obj = {a: 1, b: 2};
    • 使用 new Object(),你通常需要在之后单独设置对象的属性。例如:let obj = new Object(); obj.a = 1; obj.b = 2;
  5. 扩展性

    • 如果你正在使用ES6或更高版本的JavaScript,并且希望利用类的继承和其他面向对象的特性,那么使用类(通过 class 关键字)和 new 关键字可能更有意义。然而,这并不直接适用于 new Object() 与对象字面量之间的比较。
  6. 特殊情况

    • 当你需要在函数中返回一个新对象,但该函数还没有返回任何内容时,使用 new Object() 可能是有意义的,因为你可以通过链式调用在对象上立即设置属性或方法。但是,这通常可以通过使用对象字面量语法和IIFE(立即调用的函数表达式)来实现更简洁的代码。

总的来说,尽管 new Object() 和 对象字面量 {} 在功能上是相似的,但对象字面量语法通常更受欢迎,因为它更简洁、更易于阅读和维护。在大多数情况下,你应该优先使用对象字面量语法来创建新的对象实例。

 3.3 构造函数的执行过程

`var p1=new Person();`
+ 1、创建一个对象 (我们把这个对象称之为Person构造函数的实例)- `_p1 `
+ 2、创建一个内部对象,`this`,将this指向该实例(_p1)
+ 3、执行函数内部的代码,其中,操作this的部分就是操作了该实例(_p1)
+ 4、

3.3.1构造函数的返回值

- a、如果函数没有返回值(没有return语句),那么就会返回构造函数的实例(p1)
- b、如果函数返回了一个基本数据类型的值,那么本次构造函数的返回值是该实例(_p1)

 

 
    //无返回值
        function fn(){
            
        }
        var f1=new fn();    //f1就是fn的实例
    //基本类型值
        function fn2(){
            return "abc";
        }
        var f2=new fn2();   //f2是fn2构造函数的实例


    - c、如果函数返回了一个复杂数据类型的值,那么本次函数的返回值就是该值
 

 
        function fn3(){
            return [1,3,5]; 
            //数组是一个对象类型的值,
            //所以数组是一个复杂数据类型的值
            //-->本次构造函数的真正返回值就是该数组
            //-->不再是fn3构造函数的实例
        }
        var f3=new fn3();   //f3还是fn3的实例吗?错
        //f3值为[1,3,5]

3.3.2 如何判断一个数据是否是复杂数据类型?

    使用排除法:

    a、看它的值是不是:数字、字符串、布尔值、null、undefined,

    b、如果不是以上5种值,那就是复杂数据类型

     发杂数据类型举例:

  •     [1,3,5]
  •      /abc/
  •      function(){}
  •      new Object();

3.3.3为什么要理解构造函数的返回值?

String是一个内置函数

a、String()

b、new String()

结论:一个函数通过new调用,或者不通过new调用,很多时候会有截然不同的返回值

3.3.4如何分辨出一个对象是不是某个构造函数的实例?

a、var isTrue=xxx instanceof Person


    function Person(){

    }
    var p1=new Person();
    console.log(p1 instanceof Person);//true,就是Person的实例

    function Student(){
        return 100;
    }
    var s1=new Student();
    console.log(s1 instanceof Student);//true,就是Student的实例

    function Programmer(){
        return [1,3,5]
    }
    var pro=new Programmer();//pro并不是Programmer的实例
    console.log(pro instanceof Programmer);//false
    
    console.log("是数组的实例吗?",pro instanceof Array);//true

小技巧:如何通过肉眼识别xxx对象是哪个构造函数的实例?

    xxx.__proto__属性(Prototype),也是对象,该对象中一般都会有一个constructor属性,这个指向aaa函数,那么就可以认为:xxx是aaa构造函数的实例

 typeof运算符,只能判断:数字、字符串、布尔值、undefined、函数

 切记:千万不能使用typeof运算符来判断对象的构造函数

  •     typeof null === "object"
  •     typeof {}  === "object"
  •     typeof []  === "object"
  •     typeof function(){} === "function"
  •     typeof /abc/     === "object"

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

15、24年--信息系统管理——管理要点

1、数据管理 数据管理使指通过规划、控制与提供数据和信息资产的职能,包括开发、执行和监督有关数据的计划、策略、方案、项目、流程、方法和程序,以获取、控制、保护、交付和提高数据和信息资产价值。 DCMM定义了数据战略、数据治理、数据架构、数据应用、数据安全、…

如何官方查询论文分区,中科院及JCR

中科院分区 有一个小程序&#xff1a;中科院文献情报中心分区表 点2023升级版&#xff0c;输入期刊名 大类1区 JCR分区 进入官方网站 Journal Citation Reports 输入要查询的期刊名&#xff0c;点开 拼命往下拉 这就是根据影响因子的排名&#xff0c;在computer science&am…

柱状图中最大的矩形 - LeetCode 热题 73

大家好&#xff01;我是曾续缘&#x1f61b; 今天是《LeetCode 热题 100》系列 发车第 73 天 栈第 5 题 ❤️点赞 &#x1f44d; 收藏 ⭐再看&#xff0c;养成习惯 柱状图中最大的矩形 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xf…

使用docker-compose部署时序数据库InfluxDB1.8.4

背景 如今 InfluxDB 已经更新到了 2.x &#xff0c; InfluxDB 1.x 和 2.x 版本之间有几个主要的区别&#xff1a; 数据模型&#xff1a; 1.x&#xff1a;使用数据库和保留策略来组织数据。 2.x&#xff1a;引入了组织&#xff08;organizations&#xff09;和存储桶&#xff…

抖音极速版:抖音轻量精简版本,新人享大福利

和快手一样&#xff0c;抖音也有自己的极速版&#xff0c;可视作抖音的轻量精简版&#xff0c;更专注于刷视频看广告赚钱&#xff0c;收益比抖音要高&#xff0c;可玩性更佳。 抖音极速版简介 抖音极速版是一个提供短视频创业和收益任务的平台&#xff0c;用户可以通过观看广…

【LeetCode】【1】两数之和(1141字)

文章目录 [toc]题目描述样例输入输出与解释样例1样例2样例3 提示进阶Python实现哈希表 个人主页&#xff1a;丷从心 系列专栏&#xff1a;LeetCode 刷题指南&#xff1a;LeetCode刷题指南 题目描述 给定一个整数数组nums和一个整数目标值target&#xff0c;请在该数组中找出…

【linux-kernel内核移植记录-踩坑以及注意事项】

目录 1. 环境介绍2.编译原厂的kernel2.1 通过tftp挂载原厂linux内核 3. 修改对应的驱动3.1 修改CPU频率3.2 修改MMC3.3 修改网络驱动 4. 总结 1. 环境介绍 ubuntu版本16.04I.MX6ULL开发板&#xff0c;阿尔法uboot正常启动&#xff0c;能ping通ubuntu&#xff0c;可通过tftpboo…

使用delphi11编写一个基于xls作为数据库的照片展示程序

1、创建xls文档可以参考前一篇博客&#xff0c;并使用wps将文档保存为2003格式xls后缀。 2、在form上面放置adoconnection、adotable、datasource、spinedit、timer、checkbox、image、4个button组件。 image的设置&#xff1a; Image1.Align : alClient; Image1.Center : Tr…

【全开源】答题考试系统源码(FastAdmin+ThinkPHP+Uniapp)

答题考试系统源码&#xff1a;构建高效、安全的在线考试平台 引言 在当今数字化时代&#xff0c;在线考试系统已成为教育机构和企业选拔人才的重要工具。一个稳定、高效、安全的答题考试系统源码是构建这样平台的核心。本文将深入探讨答题考试系统源码的关键要素&#xff0c;…

mysql binlog统一恢复误删数据库、表、数据(没有任何备份)

先将mysql文件夹中的my.ini进行设置 在 [mysqld]下边加上 # mysql-bin 是日志的基本名或前缀名&#xff0c;最后生成的日志文件是mysql-bin.000001类似&#xff0c;重启mysql数字会递增 log_binmysql-bin #binlog格式&#xff0c;statement&#xff0c;row&#xff0c;mixed可…

【WEB前端2024】开源智体世界:乔布斯3D纪念馆-第28课-avatar玩家3D形象

【WEB前端2024】开源智体世界&#xff1a;乔布斯3D纪念馆-第28课-avatar玩家3D形象 使用dtns.network德塔世界&#xff08;开源的智体世界引擎&#xff09;&#xff0c;策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtns.network是一款主要由JavaScript编写的智体世界…

Python列表,元组,集合,字典详解一篇搞懂

目录 介绍 列表(List) 集合(Set) 字典(Dict) 元组(Tuple) 列表 列表定义 ​编辑 列表切片 列表常用方法 append extend ​编辑 insert ​编辑 remove pop ​编辑 clear ​编辑 列表修改元素 sort 升序 倒序 reverse count ​编辑 index 浅拷贝和深拷贝 …

CV之Nougat:Nougat(一种基于神经网络实现OCR功能的视觉转换器模型)的简介、安装和使用方法、案例应用之详细攻略

CV之Nougat&#xff1a;Nougat(一种基于神经网络实现OCR功能的视觉转换器模型)的简介、安装和使用方法、案例应用之详细攻略 目录 相关论文 《Nougat: Neural Optical Understanding for Academic Documents》的翻译与解读 Nougat的简介 Nougat的安装和使用方法 1、安装 …

成犬必备!福派斯鲜肉狗粮,亮毛祛泪痕的神奇功效!

对于成犬来说&#xff0c;选择一款合适且高质量的狗粮至关重要。成犬时期的狗狗正处于身体和生理机能逐渐稳定的阶段&#xff0c;因此&#xff0c;需要选择能够满足其日常营养需求、维持健康状态并有助于长寿的狗粮。理想的狗粮应当包含狗狗所需的各种营养物质&#xff0c;如高…

使用CyberRT写第一个代码, test ok

简介 计算框架是自动驾驶系统中的重中之重,也是整个系统得以高效稳定运行的基础。为了实时地完成感知、决策和执行,系统需要一系列的模块相互紧密配合,高效地执行任务流。由于各种原因,这些模块可能位于不同进程,也可能位于不同机器。这就要求计算框架中具有灵活的、高性…

uniapp+canvas实现逐字手写效果

在移动端使用 UniApp 进行逐字手写的功能。用户可以在一个 inputCanvas 上书写单个字&#xff0c;然后在特定时间后将这个字添加到 outputCanvas 上&#xff0c;形成一个逐字的手写效果。用户还可以保存整幅图像或者撤销上一个添加的字。 初始化 Canvas&#xff1a; 使用 uni.c…

SpringCloud系列(29)--准备使用Hystrix的前期工作,创建服务提供者模块

前言&#xff1a;在上一章节中我们简单的介绍了关于Hystrix的相关知识点&#xff0c;而本节内容则是关于如果去使用Hystrix构建一个支付微服务。 1、创建一个服务提供者模块&#xff0c;命名为cloud-provider-hystrix-payment8001 (1)在父工程下新建模块 (2)选择模块的项目类型…

香橙派华为昇腾CANN架构编译opencv4.9

香橙派华为升腾AI盒子 为啥要编译opencv4.9.0&#xff0c; 因为在4.9.0 中增加了华为昇腾CANN的外接开发库&#xff0c;下图为盒子外观&#xff0c;此次一接到这个盒子&#xff0c;立刻开始开箱操作&#xff0c;首先就是要编译opencv4.9&#xff0c;以前在香橙派3588 的盒子中…

台湾省军事演习路径规划:A*算法在复杂地形中的应用

❤️❤️❤️ 欢迎来到我的博客。希望您能在这里找到既有价值又有趣的内容&#xff0c;和我一起探索、学习和成长。欢迎评论区畅所欲言、享受知识的乐趣&#xff01; 推荐&#xff1a;数据分析螺丝钉的首页 格物致知 终身学习 期待您的关注 导航&#xff1a; LeetCode解锁100…

PyTorch 错误 RuntimeError: CUDA error: device-side assert triggered

训练数据的时候出现 RuntimeError:CUDA error:device-side assert triggeredCUDA kernel errors might be asynchronously reported at some other API call, so the stacktrace below might be incorrect.For debugging consider passing CUDA_LAUNCH_BLOCKING1.Compile with …