〖大前端 - 基础入门三大核心之JS篇(53)〗- 构造函数与类

  • 说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费如需要项目实战或者是体系化资源,文末名片加V!
  • 作者:哈哥撩编程,十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。
  • 荣誉:2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker全栈领域优质创作者

  • 🏆 白宝书系列
    • 🏅 启示录 - 攻城狮的自我修养
    • 🏅 Python全栈白宝书
    • 🏅 ChatGPT实践指南白宝书
    • 🏅 产品思维训练白宝书
    • 🏅 全域运营实战白宝书
    • 🏅 大前端全栈架构白宝书


文章目录

  • ⭐用new操作符调用函数
  • ⭐类与实例

前面我们学习了上下文规则,也知道了上下文是由调用函数的方式来决定的,事实上,在面向对象中,不仅仅只有上面学到的那些函数的调用方式,还有一种非常常见的调用函数的方式,就是用操作符new来调用函数。

⭐用new操作符调用函数

现在,我们学习一种新的函数调用方式:new 函数()

你可能知道new操作符和“面向对象”息息相关,但是现在我们先不探讨它的“面向对象”意义,而是先把用new调用函数的执行步骤和它的上下文弄清楚。

用new操作符调用函数的”四步走“:

  1. 函数体内会自动创建出一个空白对象

  2. 函数的上下文(this)会指向这个对象

  3. 函数体内的语句会执行

  4. 函数会自动返回上下文对象,即使函数没有return语句

我们来举个例子详细的说明,下面的代码中用new操作符调用了函数fun()

function fun() {this.a = 3;this.b = 5;
}var obj = new fun();   // 使用new操作符调用了函数fun()
console.log(obj);   // 程序的执行结果是怎样的?

根据“四步走”规则,程序执行的步骤是这样的:

image-20230619134719384

所以上述代码执行的结果就是在控制台输出了一个对象:{a: 3, b: 5}:

image-20230619134928054

上面的例子其实是面向对象的基本操作,总结一下就是new操作符来调用函数时,函数会自动创建一个对象并执行函数中的语句来添加属性和方法,最后自动返回这个对象。

⭐类与实例

类:好比是“蓝图”,类只描述对象会拥有哪些属性和方法,但是并不具体指明属性的值

实例:具体的对象,实例一定是看得见摸得着了,非常非常具体的。

“人类”就是一个“类”,它拥有一些属性和方法,比如身高、体重、性别、能使用工具、能唱歌等。而“人类”这个类的实例必须是一个具体的人。比如“乔布斯”就是一个“实例”,他用于“人类”这个“类”的属性和方法,并且能够指明这些属性的值。

现在的程序语言大部分都是“面向对象”的语言,还有“面向过程“语言,而我们现在学习的JavaScript是”基于对象“的语言:

  • Java、C++等是**“面向对象”**(object-oriented,简称oo)语言
  • JavaScript是**“基于对象”**(object-base,简称ob)语言
  • JavaScript中的构造函数可以类比于OO语言中的“类”,写法的确类似,但和真正OO语言还是有本质不同,后面再做更详细的介绍。

下面来看一张图:

image-20230619141437058

上图中,People是一个构造函数,我们可以看作是”类“,这个”类“下面实例化了三个对象:xiaomingxiaoqiangxiaohong,这三个对象拥有同样的属性名和方法,但他们的属性值可能并不相同,但他们的属性值一定是“确定”的。

总结:1、要学会面向对象,一定要正确的理解“类”和“实例”;2、JavaScript是“基于对象”语言,它的“构造函数”就相当于”面向对象“中的“类”

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

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

相关文章

VMware安装ContOS 7 提示“客户机操作系统已禁用 CPU。请关闭或重置虚拟机。”

目录 实验环境报错截图报错原因猜测(根据实验现象)解决办法如下 实验环境 Vmware Workstation 17.5 CentOS7 镜像版本:2207-02版本 注意:2009版本并无该错误 报错截图 报错原因猜测(根据实验现象) CentO…

​platform --- 获取底层平台的标识数据​

源代码: Lib/platform.py 备注 特定平台按字母顺序排列,Linux 包括在 Unix 小节之中。 跨平台 platform.architecture(executablesys.executable, bits, linkage) 查询给定的可执行文件(默认为 Python 解释器二进制码文件)来获…

用AI画个女朋友回家过年,1行Python代码,免费实现

#这才是真功夫# 大家好,这里是程序员晚枫,全网同名。 马上过年了,还是单身的举个爪! 今年GPT系列的产品非常火爆,今天给大家分享一下,如何免费用AI代码画1个女朋友。👇 直接上代码 大家学习 或 …

Centos7防火墙及端口开启

1、防火墙 1.1、查看防火墙是否开启 systemctl status firewalld 1.2、开启防火墙 firewall-cmd --list-ports 1.3、重启防火墙 firewall-cmd --reload 2、端口 2.1、查看所有已开启的端口号 firewall-cmd --list-ports 2.2、手动开启端口 启动防火墙后,默认没有开…

【云原生kubernets】Ingress 功能与应用

一、Ingress 介绍 1.1.Ingress产生原因: 当我们使用Service的时候,Service对集群之外暴露服务的主要方式有两种:NotePort和LoadBalancer,但是这两种方式,都有一定的缺点: (1)Node…

【初阶C++】入门(超详解)

C入门 前言1. C关键字(C98)2. 命名空间2.1 命名空间定义2.2 命名空间使用2.3嵌套命名空间 3. C输入&输出4. 缺省参数4.1 缺省参数概念4.2 缺省参数分类 5. 函数重载5.1 函数重载概念5.2 C支持函数重载的原理--名字修饰(name Mangling) 6. 引用6.1 引用概念6.2 引用特性6.3 …

C++初阶(十五)Stack和Queue

文章目录 一、Stack的模拟实现二、Queue的模拟实现三、容器适配器1、什么是容器适配器2、STL标准库中stack和queue的底层结构3、 deque的简单介绍(了解)1、deque的原理介绍2、deque的缺陷 4、为什么选择deque作为stack和queue的底层默认容器 一、Stack的模拟实现 #include<…

Web server failed to start. Port 8888 was already in use.

端口占用 强制终止占用端口的进程 获取占用端口的进程ID&#xff08;PID&#xff09;&#xff1a;在终端或命令提示符中运行以下命令以查找占用端口的进程ID&#xff1a; ①在 Unix/Linux/Mac 上&#xff1a;lsof -i :8888 ②在 Windows 上&#xff1a;netstat -ano | findstr …

JS基础中VO和AO的关系

JS基础中VO和AO的关系 AO(Active Object)VO(Variable Object)AO和VO的关系 AO(Active Object) AO(ActiveObject)是函数的活动对象&#xff0c;它是在函数执行时创建的一个对象&#xff0c;用于存储函数内部的变量和函数声明。 VO(Variable Object) VO(VariableObject)是变量对象…

Cocoa Mac音频模块关键步骤总结

1. .driver 插件 #include <CoreAudio/AudioServerPlugIn.h> 头文件 static AudioServerPlugInDriverInterface gAudioServerPlugInDriverInterface 静态函数struct&#xff0c; 返回一系列回调的函数指针 //开始io&#xff0c;代表有对象链接进来了&#xff0c;如果是…

java实现局域网内视频投屏播放(四)投屏实现

代码链接​​​​​​​​​​​​​​​​​​​​​ 设备发现 上一篇文章说过&#xff0c;设备的发现有两种情况&#xff0c;主动和被动&#xff0c;下面我们来用java实现这两种模式 主动发现 构建一个UDP请求发送到239.255.255.250:1900获取设备信息&#xff0c;UDP包的…

【价值几十万的仿抖音直播电商系统源码共享】

当下&#xff0c;传统的图文电商模式已经走向没落&#xff0c;以抖音为首的直播电商模式备受用户追捧&#xff0c;它具有实时直播和强互动的特点&#xff0c;是传统电商所不具备的优势。而且&#xff0c;当前正是直播电商的红利期&#xff0c;很多主播和品牌商都通过直播电商业…

C语言经典错误总结(二)

一.运算符优先级问题 该问题对于大多数C语言程序员都是存在的&#xff0c;原因当然就是无法准确找到表达式计算顺序。 看例题&#xff1a; 假如我们有两个整数a &#xff0c;b&#xff0c;现在我们要求整数c是一个八位整数&#xff0c;使其前4位与a相同&#xff0c;后4位与b…

【java】保留前N月数据文件,定期删除数据

数据越积越多&#xff0c;过于冗余&#xff1b;数据库定期删除指定时间前的数据&#xff1b;文件生成的删除指定时间前端文件 SFTP文件定期删除 java sftp 定时清理指定文件中固定时间 依赖 <!-- ftp文件上传/下载Jar包 --> <dependency><groupId>com.jc…

K8S(四)—pod详解

目录 pod介绍Pod的概念&#xff1a;Pod的特性&#xff1a;Pod的配置&#xff1a;Pod的控制&#xff1a;示例 YAML 文件&#xff1a; pod启动流程问题 两种方式启动镜像的升级和回滚更新 Deployment&#xff1a;回滚检查 Deployment 历史版本回滚到之前的修订版本缩放 Deploymen…

青少年CTF-Crypto(Morse code/ASCII和凯撒)

FLAG&#xff1a;你这一生到底想干嘛 专研方向: Web安全 &#xff0c;Md5碰撞 每日emo&#xff1a;不要因为别人都交卷了&#xff0c;就乱选答案 文章目录 1.Morse code2、ASCII和凯撒的约定 1.Morse code 题目提示摩尔斯电码&#xff0c;这个是给的附件 直接用摩尔斯解密&am…

Linux中的磁盘挂载与取消

Linux中的磁盘挂载与取消 前言磁盘挂载查看分区信息分区设置格式化磁盘挂载持久化挂载点配置 取消磁盘挂载查看已挂载的磁盘取消挂载 前言 今天准备给一台PVE设备添加一块磁盘&#xff0c;踩了点小坑&#xff1a;磁盘挂载后重启后发现磁盘没有被挂载&#xff0c;于是整理记录一…

antv X6

文章目录 graph配置项力导向图路由router graph配置项 https://x6.antv.antgroup.com/api/graph/graph 力导向图 https://x6.antv.antgroup.com/examples/layout/general#force 路由router https://x6.antv.antgroup.com/api/registry/router initGraph () {// https://x…

常用的测试用例大全

登录、添加、删除、查询模块是我们经常遇到的&#xff0c;这些模块的测试点该如何考虑 1)登录 ① 用户名和密码都符合要求(格式上的要求) ② 用户名和密码都不符合要求(格式上的要求) ③ 用户名符合要求&#xff0c;密码不符合要求(格式上的要求) ④ 密码符合要求&#xf…

[c]输出字符金字塔

我们可以把字符金字塔类比数字金字塔 输入3 输出 类似下图 下面附上我的代码&#xff0c;可能有些繁琐 #include<stdio.h> int main() {char s;scanf("%c",&s);int lens-64;//将字符的ascii码值减去64得到循环次数&#xff0c;比如你输入A&#xff0c;l…