学习笔记整理-面向对象-03-构造函数

一、构造函数

1. 用new调用函数的四步走

 new 函数();

  • JS规定，使用new操作符调用函数会进行"四步走"：

    • 函数体内会自动创建出一个空白对象
    • 函数的上下文(this)会指向这个对象
    • 函数体内的语句会执行
    • 函数会自动返回上下文对象，即使函数没有return语句

  • 四步走详解

      function fun() {this.a = 3;this.b = 5;}var obj = new fun();console.log(obj);

    • 第1步：函数体内会自动创建出一个空白对象。
      obj-1.png

    • 第2步：函数的上下文(this)会指向这个对象。
      obj-2.png

    • 第3步：执行函数体中的语句
      obj-3.png

    • 第4步：函数会自动返回上下文对象，即使函数没有return语句。
      obj-4.png

2. 构造函数

  • 用new调用一个函数，这个函数就被称为"构造函数"，任何函数都可以是构造函数，只需要用new调用它。

  • 顾名思义，构造函数用来“构造新对象”，它内部的语句将 为新对象添加若干属性和方法，完成对象的初始化。

  • 构造函数必须用new关键字调用，否则不能正常工作，正因 如此，开发者约定构造函数命名时首字母要大写。

  • 一个函数是不是构造函数，要看它是否用new调用，而至于名称首字母大写，完全是开发者的习惯约定。

  • 如果不用new调用构造函数

      function People(name, age, sex) {this.name = name;this.age = age;this.sex = sex;} People('小明', 12, '男');People('小红', 10, '女');People('小刚', 13, '男');
    • 结果：都会成为全局的变量，且变量的值会依次覆盖，就是小刚 13 男

  • 使用new构建

      function People(name, age, sex) {this.name = name;this.age = age;this.sex = sex;}var xiaoming = new People('小明', 12, '男');var xiaohong = new People('小红', 10, '女');var xiaogang = new People('小刚', 13, '男');

  • 为对象添加方法

      function People(name, age, sex) { this.name = name;this.age = age;this.sex = sex;this.sayHello = function () {console.log('我是' + this.name + '，我' + this.age + '岁了');}; }var xiaoming = new People('小明', 12, '男'); var xiaohong = new People('小红', 10, '女'); var xiaogang = new People('小刚', 13, '男'); xiaoming.sayHello();xiaohong.sayHello();xiaogang.sayHello();

  • 构造函数中的this不是函数本身

3. 类和实例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1cNSmlDn-1692020300179)(https://raw.githubusercontent.com/yangdong520/drawing-bed-workspace/main/js/obj-5.png)]

  • Java、C++等是"面向对象"(object-oriented)语言。
  • JavaScript是"基于对象"(object-based)语言。
  • JavaScript中的构造函数可以类比于OO语言中的"类"， 写法的确类似，但和真正OO语言还是有本质不同，
    JS和其他OO语言完全不同的、特有的原型特性。

4. prototype和原型链查找

  • 什么是prototype

    • 任何函数都有prototype属性，prototype是英语"原型"的意思。
    • prototype属性值是个对象，它默认拥有constructor属性指回函数。
      obj-7
    • 普通函数来说的prototype属性没有任何用处，而构造函数的prototype属性非常有用。
    • 构造函数的prototype属性是它的实例的原型

  • 构造函数的prototype是实例的原型
    obj-8

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function People(name, age, sex) {this.name = name;this.age = age;this.sex = sex;}// 实例化var xiaoming = new People('小明', 12, '男');// 测试三角关系是否存在console.log(xiaoming.__proto__ === People.prototype);</script>
</body>
</html>

  • 原型链查找

    • 每个对象都可以有一个原型_proto_，这个原型还可以有它自己的原型，以此类推，形成一个原型链。
      查找特定属性的时候，先去这个对象里去找，如果没有的话就去它的原型对象里面去，如果还是没有的话再去向原型对象的原型对象里去寻找…
      这个操作被委托在整个原型链上，这个就是我们说的原型链了。

    • JavaScript规定：实例可以打点访问它的原型的属性和方法，这被称为"原型链查找"。

          function People(name, age, sex) {this.name = name;this.age = age;this.sex = sex;}People.prototype.nationality = '中国';var xiaoming = new People('小明', 12, '男');console.log(xiaoming.nationality);
      • People.prototype.nationality在构造函数的prototype上添加nationality属性。
      • xiaoming.nationality实例可以打点访问原型的属性和方法。
        [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-19GzAMjt-1692020300180)(https://raw.githubusercontent.com/yangdong520/drawing-bed-workspace/main/js/obj-9.png)]

    • 原型的遮蔽效应

          function People(name, age, sex) {this.name = name;this.age = age;this.sex = sex;
}
// 往原型上添加nationality属性
People.prototype.nationality = '中国';// 实例化
var xiaoming = new People('小明', 12, '男');
var tom = new People('汤姆', 10, '男');
tom.nationality = '美国';console.log(xiaoming.nationality);      // 中国
console.log(xiaoming);console.log(tom.nationality);           // 美国
//tom本身有nationality时，就不找原型上的nationality属性了，原型链的遮蔽效应
//跟局部变量全局变量差不多

      obj-10

    • hasOwnProperty方法可以检查对象是否真正"自己拥有"某属性或者方法。

          xiaoming.hasOwnProperty('name'); // truexiaoming.hasOwnProperty('age');  // truexiaoming.hasOwnProperty('sex');  // truexiaoming.hasOwnProperty('nationality'); // false

    • in运算符只能检查某个属性或方法是否可以被对象访问，不能检查是否是自己的属性或方法。

          'name' in xiaoming  // true'age' in xiaoming   // true'sex' in xiaoming   // true'nationality' in xiaoming  // true

5. 在prototype上添加方法

  • 把方法直接添加到实例身上的缺点：每个实例和每个实例的方法函数都是内存中不同的函数，造成了内存的浪费。
  • 解决方法：将方法写到prototype上。
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KfgSpKFg-1692020300180)(https://raw.githubusercontent.com/yangdong520/drawing-bed-workspace/main/js/obj-11.png)]

6. 原型链的终点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YC2Sl5h4-1692020300180)(https://raw.githubusercontent.com/yangdong520/drawing-bed-workspace/main/js/obj-12.png)]

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function People(name, age) {this.name = name;this.age = age;}var xiaoming = new People('小明', 12);console.log(xiaoming.__proto__.__proto__ === Object.prototype);     // trueconsole.log(Object.prototype.__proto__);                            // nullconsole.log(Object.prototype.hasOwnProperty('hasOwnProperty'));     // trueconsole.log(Object.prototype.hasOwnProperty('toString'));           // true</script>
</body>
</html>

  • 关于数组的原型链
    array

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>var arr = [344, 45, 34, 23];console.log(arr.__proto__ === Array.prototype);                 // trueconsole.log(arr.__proto__.__proto__ === Object.prototype);      // trueconsole.log(Array.prototype.hasOwnProperty('push'));            // trueconsole.log(Array.prototype.hasOwnProperty('splice'));          // true</script>
</body>
</html>

6. 继承

  • JavaScript中如何实现继承?

    • 实现继承的关键在于：子类必须拥有父类的全部属性和方法，同时子类还应该能定义自己特有的属性和方法。
    • 使用JavaScript特有的原型链特性来实现继承，是普遍的做法

  • 通过原型链实现继承
    array
    array

    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 父类，人类function People(name, age, sex) {this.name = name;this.age = age;this.sex = sex;}People.prototype.sayHello = function () {console.log('你好，我是' + this.name + '我今年' + this.age + '岁了');};People.prototype.sleep = function () {console.log(this.name + '开始睡觉，zzzzz');};// 子类，学生类function Student(name, age, sex, scholl, studentNumber) {this.name = name;this.age = age;this.sex = sex;this.scholl = scholl;this.studentNumber = studentNumber;}// 关键语句，实现继承Student.prototype = new People();Student.prototype.study = function () {console.log(this.name + '正在学习');}Student.prototype.exam = function () {console.log(this.name + '正在考试，加油！');}// 重写、复写（override）父类的sayHelloStudent.prototype.sayHello = function () {console.log('敬礼！我是' + this.name + '我今年' + this.age + '岁了');}// 实例化var hanmeimei = new Student('韩梅梅', 9, '女', '慕课小学', 100556);hanmeimei.study();hanmeimei.sayHello();hanmeimei.sleep();var laozhang = new People('老张', 66, '男');laozhang.sayHello();</script>
</body></html>

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

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

相关文章

HDMI接口的PCB布局布线要求

HDMI接口的PCB布局布线要求

高清多媒体接口&#xff08;High Definition Multimedia Interface&#xff09;&#xff0c;简称&#xff1a;HDMI&#xff0c;是一种全数字化视频和声音发送接口&#xff0c;可以发送未压缩的音频及视频信号。随着技术的不断提升&#xff0c;HDMI的传输速率也不断的提升&#…
阅读更多...
brew+nginx配置静态文件服务器

brew+nginx配置静态文件服务器

背景 一下子闲下来了&#xff0c;了解的我的人都知道我闲不下来。于是&#xff0c;我在思考COS之后&#xff0c;决定自己整一个本地的OSS&#xff0c;实现静态文件的访问。那么&#xff0c;首屈一指的就是我很熟的nginx。也算是个小复习吧&#xff0c;复习一下nginx代理静态文…
阅读更多...
解决生成式AI落地之困，亚马逊云科技提供完整解决方案

解决生成式AI落地之困，亚马逊云科技提供完整解决方案

生成式AI技术无疑是当前最大的时代想象力之一。 资本、创业者、普通人都在涌入生成式AI里去一探究竟&#xff1a;“百模大战”连夜打响&#xff0c;融资规模连创新高&#xff0c;各种消费类产品概念不断涌现……根据Bloomberg Intelligence 的报告&#xff0c;2022年生成式AI 市…
阅读更多...
文件操作/IO

文件操作/IO

文件 文件是一种在硬盘上存储数据的方式&#xff0c;操作系统帮我们把硬盘的一些细节都封装起来了&#xff0c;程序员只需要了解文件相关的接口即可&#xff0c;相当于操作文件就是间接的操作硬盘了 硬盘用来存储数据&#xff0c;和内存相比硬盘的存储空间更大&#xff0c;访问…
阅读更多...
使用FTP文件传输协议的潜在风险

使用FTP文件传输协议的潜在风险

数据&#xff08;事实&#xff0c;数字&#xff0c;价值&#xff09;是当今业务运行的核心要素。但是&#xff0c;如果数据没有得到有效的存储和传输&#xff0c;它们就会成为阻碍业务发展的障碍。如果企业不能及时地把数据送到合适的地方&#xff0c;就会造成严重的经济损失。…
阅读更多...
【Linux】Shell脚本之流程控制语句 if判断、for循环、while循环、case循环判断 + 实战详解[⭐建议收藏！！⭐]

【Linux】Shell脚本之流程控制语句 if判断、for循环、while循环、case循环判断 + 实战详解[⭐建议收藏！！⭐]

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…
阅读更多...
.bit域名调研

.bit域名调研

.bit域名研究 问题&#xff1a; .bit域名和ENS域名的相同点&#xff1f;不同点&#xff1f;有什么关系&#xff1f; .bit的定义 .bit 是基于区块链的&#xff0c;开源的&#xff0c;跨链去中心化账户系统.bit 提供了以 .bit 为后缀的全局唯一的命名体系&#xff0c;可用于加密…
阅读更多...
安全第二次

安全第二次

一&#xff0c;iframe <iframe>标签用于在网页里面嵌入其他网页。 1&#xff0c;sandbox属性 如果嵌入的网页是其他网站的页面&#xff0c;因不了解对方会执行什么操作&#xff0c;因此就存在安全风险。为了限制<iframe>的风险&#xff0c;HTML 提供了sandb…
阅读更多...
分布式应用：Zabbix监控MariaDB

分布式应用：Zabbix监控MariaDB

目录 一、理论 1.Zabbix监控MariaDB 二、实验 1.Zabbix监控MariaDB 一、理论 1.Zabbix监控MariaDB &#xff08;1&#xff09;环境 zabbix服务端&#xff1a;192.168.204.214 zabbix客户端&#xff1a;192.168.204.215 &#xff08;2&#xff09;MareaDB安装 安装 za…
阅读更多...
做海外游戏推广有哪些条件？

做海外游戏推广有哪些条件？

做海外游戏推广需要充分准备和一系列条件的支持。以下是一些关键条件&#xff1a; 市场调研和策略制定&#xff1a;了解目标市场的文化、玩家偏好、竞争格局等是必要的。根据调研结果制定适合的推广策略。 本地化&#xff1a;将游戏内容、界面、语言、货币等进行本地化&#…
阅读更多...
使用ip2region获取客户端地区

使用ip2region获取客户端地区

目录 从gitee拉取ip2region.xdb资源文件 写测试类 注意要写对资源路径 本地测试结果 ​编辑 远端测试结果 从gitee拉取ip2region.xdb资源文件 git clone https://gitee.com/lionsoul/ip2region.git 将xdb放入resources资源文件夹 引入依赖 <dependency><groupId&…
阅读更多...
[HDLBits] Exams/m2014 q4d

[HDLBits] Exams/m2014 q4d

Implement the following circuit: module top_module (input clk,input in, output out);always(posedge clk) beginout<out^in;end endmodule直接写out^in就行
阅读更多...
Vue 使用 vite 创建项目

Vue 使用 vite 创建项目

vite 是新一代前端构建工具&#xff0c;和 webpack 类似。 vite 的启动速度更快。在开发环境中&#xff0c;不需要打包就可以直接运行。 vite 的更新速度更快。当修改内容后&#xff0c;不需要刷新浏览器&#xff0c;页面就会实时更新。 vite 完全是按需编译。它只会编译需要…
阅读更多...
【考研数学】高等数学第三模块——积分学 | Part II 定积分（反常积分及定积分应用）

【考研数学】高等数学第三模块——积分学 | Part II 定积分（反常积分及定积分应用）

文章目录 前言三、广义积分3.1 敛散性概念&#xff08;一&#xff09;积分区间为无限的广义积分&#xff08;二&#xff09;积分区间有限但存在无穷间断点 3.2 敛散性判别法 四、定积分应用写在最后 前言 承接前文&#xff0c;梳理完定积分的定义及性质后&#xff0c;我们进入…
阅读更多...
企业网盘 vs 传统存储设备：为何云存储成为首选？

企业网盘 vs 传统存储设备：为何云存储成为首选？

企业网盘的出现为企业提供了新的存储方式&#xff0c;相较于传统的存储设备&#xff0c;为何越来越多的企业选择了云存储呢&#xff1f; 一、存储成本 在企业数据存储方面&#xff0c;成本是企业重要的考量因素。企业网盘是基于云存储技术的存储工具&#xff0c;因此它比传统的…
阅读更多...
基于DBN的伪测量配电网状态估计，DBN的详细原理

基于DBN的伪测量配电网状态估计，DBN的详细原理

目录 背影 DBN神经网络的原理 DBN神经网络的定义 受限玻尔兹曼机（RBM） DBN的伪测量配电网状态估计 基本结构 主要参数 数据 MATALB代码 结果图 展望 背影 DBN是一种深度学习神经网络，拥有提取特征，非监督学习的能力，是一种非常好的分类算法，本文将DBN算法伪测量配电网…
阅读更多...
Netty：ByteBuf的资源释放方法

Netty：ByteBuf的资源释放方法

说明 io.netty.buffer.ByteBuf实现了io.netty.util.ReferenceCounted接口&#xff0c;需要显式释放。当ByteBuf被实例化后&#xff0c;它的引用计数是1。 调用ByteBuf对象的release方法释放&#xff1a; ByteBuf的release()方法使引用计数减少1。只有当执行以后引用计数减少…
阅读更多...
OpenZFS 2.2 发布 RC3，支持 Linux 6.4

OpenZFS 2.2 发布 RC3，支持 Linux 6.4

导读之前的 OpenZFS 2.2 候选版本已致力于实现与 Linux 6.4 内核的兼容性&#xff0c;而在 2.2-rc3 中&#xff0c;Linux 6.4 支持的元跟踪器已标记为已完成。 OpenZFS 2.2 发布了第 3 个 RC 版本。 之前的 OpenZFS 2.2 候选版本已致力于实现与 Linux 6.4 内核的兼容性&#x…
阅读更多...
Vue3 引用第三方Swiper内容触摸滑动简单应用

Vue3 引用第三方Swiper内容触摸滑动简单应用

去官网查看更多教程→&#xff1a;Swiper官网 → 点击教程在vue中使用Swiper→ 在Vue中使用Swiper cd 到项目 安装Swiper&#xff1a; cnpm install --save swiper 安装指定版本 cnpm install --save swiper8.1.6 9.4.1 10.1.0…
阅读更多...
SpringBoot-Hello World

SpringBoot-Hello World

SpringBootWeb快速入门 创建Springboot工程&#xff0c;并勾选web开发相关依赖定义HelloController类&#xff0c;添加方法hello&#xff0c;并添加相关注释运行测试 创建新的SpringBoot项目 几个注意的点&#xff1a; Name&#xff1a;基本上不用管&#xff0c;会根据下面的Ar…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023