学习笔记整理-面向对象-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'); // true
    xiaoming.hasOwnProperty('age');  // true
    xiaoming.hasOwnProperty('sex');  // true
    xiaoming.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);     // true
        console.log(Object.prototype.__proto__);                            // null

        console.log(Object.prototype.hasOwnProperty('hasOwnProperty'));     // true
        console.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);                 // true
        console.log(arr.__proto__.__proto__ === Object.prototype);      // true
        console.log(Array.prototype.hasOwnProperty('push'));            // true
        console.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）父类的sayHello
        Student.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>

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

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

相关文章

STM32单片机SPI通信实战：示例代码详解与应用案例

STM32单片机SPI通信实战：示例代码详解与应用案例

引言&#xff1a; 单片机SPI&#xff08;串行外设接口&#xff09;通信是一种常用的串行同步通信协议&#xff0c;用于单片机与外设之间的高速数据传输。SPI通信具有简单、高效、可靠等特点&#xff0c;在各种嵌入式系统中被广泛应用。本文将介绍单片机SPI通信的原理、配置和性…
阅读更多...
人工智能在网络安全中的应用： 分析人工智能、机器学习和深度学习等技术在预测、检测和应对网络攻击中的作用

人工智能在网络安全中的应用： 分析人工智能、机器学习和深度学习等技术在预测、检测和应对网络攻击中的作用

第一章&#xff1a;引言 随着信息技术的迅猛发展&#xff0c;网络安全已成为当今社会不容忽视的重要议题。网络攻击手法日益复杂&#xff0c;传统的防御方法已经不再足够。在这一背景下&#xff0c;人工智能&#xff08;AI&#xff09;技术正逐渐崭露头角&#xff0c;为网络安…
阅读更多...
【制作npm包5】npm包制作完整教程，我的第一个npm包

【制作npm包5】npm包制作完整教程，我的第一个npm包

制作npm包目录 本文是系列文章&#xff0c; 作者一个橙子pro&#xff0c;本系列文章大纲如下。转载或者商业修改必须注明文章出处 一、申请npm账号、个人包和组织包区别 二、了解 package.json 相关配置 三、 了解 tsconfig.json 相关配置 四、 api-extractor 学习 五、npm包…
阅读更多...
在Gazebo中添加悬浮模型后，利用键盘控制其移动方法

在Gazebo中添加悬浮模型后，利用键盘控制其移动方法

前段时间写了文章&#xff0c;通过修改sdf、urdf模型的方法&#xff0c;在Gazebo中添加悬浮模型方法 / Gazebo中模型如何不因重力下落&#xff1a;在Gazebo中添加悬浮模型方法 / Gazebo中模型如何不因重力下落&#xff1a;修改sdf、urdf模型_sagima_sdu的博客-CSDN博客 今天讲…
阅读更多...
跨境外贸业务，选择动态IP还是静态IP？

跨境外贸业务，选择动态IP还是静态IP？

在跨境业务中&#xff0c;代理IP是一个关键工具。它们提供了匿名的盾牌&#xff0c;有助于克服网络服务器针对数据提取设置的限制。无论你是需要经营管理跨境电商店铺、社交平台广告投放&#xff0c;还是独立站SEO优化&#xff0c;代理IP都可以让你的业务程度更加丝滑&#xff…
阅读更多...
LaWGPT零基础部署win10+anaconda

LaWGPT零基础部署win10+anaconda

准备代码&#xff0c;创建环境 # 下载代码 git clone https://github.com/pengxiao-song/LaWGPT cd LaWGPT # 创建环境 conda create -n lawgpt python3.10 -y conda activate lawgpt pip install -r requirements.txt # 启动可视化脚本&#xff08;自动下载预训练模型约15GB…
阅读更多...
LVS-DR模式下（RS检测）ldirectord工具实现部分节点掉点后将请求发往正常设备进行处理

LVS-DR模式下（RS检测）ldirectord工具实现部分节点掉点后将请求发往正常设备进行处理

基于前文的LVS-DR集群构建环境 一.下载ldirectord软件 二.将模板文件中的LVS-DR模式相关文件拷贝到/etc/ha.d主配置目录并按实际设备修改 三.配置两台RS匹配规则 四.停止RS1的http服务进行测试 RS1失去工作能力&#xff0c;RS2接替RS1 基于前文的LVS-DR集群构建环境 一.下…
阅读更多...
网络安全--linux下Nginx安装以及docker验证标签漏洞

网络安全--linux下Nginx安装以及docker验证标签漏洞

目录 一、Nginx安装 二、docker验证标签漏洞 一、Nginx安装 1.首先创建Nginx的目录并进入&#xff1a; mkdir /soft && mkdir /soft/nginx/cd /soft/nginx/ 2.下载Nginx的安装包&#xff0c;可以通过FTP工具上传离线环境包&#xff0c;也可通过wget命令在线获取安装包…
阅读更多...
​Redis概述

​Redis概述

目录 Redis - 概述 使用场景 如何安装 Window 下安装 Linux 下安装 docker直接进行安装 下载Redis镜像 Redis启动检查常用命令 Redis - 概述 redis是一款高性能的开源NOSQL系列的非关系型数据库,Redis是用C语言开发的一个开源的高键值对(key value)数据库,官方提供测试…
阅读更多...
AWS WAF实战、优势对比和缺陷解决

AWS WAF实战、优势对比和缺陷解决

文章目录 挑战和目标AWS WAF的优势AWS WAF的不足我是怎么做的?什么是比较好的AWS WAF设计? 笔者为了解决公司Web站点防御性问题&#xff0c;较为深入的研究AWS WAF的相关规则。面对上千万的冲突&#xff0c;笔者不得设计出一种能漂亮处理冲突数据WAF规则。 AWS WAF开发人员在…
阅读更多...
【OpenCV学习笔记】我的OpenCV学习之路

【OpenCV学习笔记】我的OpenCV学习之路

刚开始接触OpenCV是因为需要进行图像的处理&#xff0c;由于之前没有接触过&#xff0c;所以只能自己进行学习&#xff0c;下面将学习的过程做简单记录分享。 OpenCV专栏链接 OpenCV学习笔记 一、引言 OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是…
阅读更多...
【仿写tomcat】二、扫描java文件，获取带有@WebServlet注解的类

【仿写tomcat】二、扫描java文件，获取带有@WebServlet注解的类

tomcat仿写 项目结构扫描文件servlet注解map容器servlet工具类启动类调用 项目结构 扫描文件之前当然要确定一下项目结构了&#xff0c;我这里的方案是tomcat和项目同级 项目的话就仿照我们平时使用的结构就好了&#xff0c;我们规定所有的静态资源文件都在webApp目录下存放…
阅读更多...
Redis进阶篇 - 04发布订阅、布隆过滤器、过期策略、回收机制、管道...核心知识原理

Redis进阶篇 - 04发布订阅、布隆过滤器、过期策略、回收机制、管道...核心知识原理

Redis底层原理篇&#xff0c;​让学习绚丽多彩起来&#xff01;&#xff01;&#xff01;&#xff08;需要原图私信&#xff09;
阅读更多...
shell连接ubuntu

shell连接ubuntu

当使用aws的私钥连接时,老是弹出输入私钥密码,但是根本没有设置过密码,随便输入后,又提示该私钥无密码... 很早就使用过aws的ubuntu,这个问题也很早就遇到过,但是每次遇到都要各种找找找...索性这次记下来算了 此处用FinalShell连接为例 首先现在Putty连接工具: 点击官方下载 …
阅读更多...
【PySide】QtWebEngine网页浏览器打开Flash网页

【PySide】QtWebEngine网页浏览器打开Flash网页

QWebEngineView 加载 flash插件&#xff0c;可成功显示Flash&#xff0c;如图 说明 QtWebEngine与Chromium版本对应关系 Chromium对Flash的支持 QtWebEngine模块 Qt WebEngine取代了Qt WebKit模块&#xff0c;后者基于WebKit项目&#xff0c;但自Qt 5.2以来没有主动与上游We…
阅读更多...
LeetCode算法心得——限制条件下元素之间的最小绝对差（TreeSet）

LeetCode算法心得——限制条件下元素之间的最小绝对差（TreeSet）

大家好&#xff0c;我是晴天学长&#xff0c;今天用到了Java一个非常实用的类TreeSet&#xff0c;能解决一些看起来棘手的问题。 1 &#xff09;限制条件下元素之间的最小绝对差 2) .算法思路 初始化变量&#xff1a;n为列表nums的大小。 min为整型最大值&#xff0c;用于记录…
阅读更多...
「Python｜aiohttp｜并发与协程」将HTTP请求提速成百上千倍！一次性掌握把requests请求改成协程的通用方法

「Python｜aiohttp｜并发与协程」将HTTP请求提速成百上千倍！一次性掌握把requests请求改成协程的通用方法

本文主要介绍如何通过使用aiohttp库将同步的http请求改成异步方式请求&#xff0c;从而降低等待网络IO过程中时间和计算资源的浪费。 主要包括如何将常见的requests请求改用aiohttp异步执行以及如何将异步的批量请求方法封装成普通方法/同步调用方式&#xff0c;给业务模块调用…
阅读更多...
去掉鼠标系列之一: 语雀快捷键使用指南

去掉鼠标系列之一: 语雀快捷键使用指南

其实应该是系列之二了&#xff0c;因为前面写了一个关于Interlij IDEA的快捷键了。 为什么要写这个了&#xff0c;主要是觉得一会儿用鼠标&#xff0c;一会儿键盘&#xff0c;一点儿不酷&#xff0c;我希望可以一直用键盘&#xff0c;抛开鼠标。后面陆续记录一下各个软件的快捷…
阅读更多...
如何在安卓设备上安装并使用 ONLYOFFICE 文档

如何在安卓设备上安装并使用 ONLYOFFICE 文档

您可以使用文档安卓版应用&#xff0c;在移动设备上访问存在您 ONLYOFFICE 帐号中的文件。阅读本文&#xff0c;了解如何操作。 什么是 ONLYOFFICE 文档安卓版 适用于 Android 系统的 ONLYOFFICE 文档是一款全面的办公工具&#xff0c;您可以使用它&#xff0c;查看、创建、编…
阅读更多...
【Redis】Redis 的学习教程（五）之 SpringBoot 集成 Redis

【Redis】Redis 的学习教程（五）之 SpringBoot 集成 Redis

在前几篇文章中&#xff0c;我们详细介绍了 Redis 的一些功能特性以及主流的 java 客户端 api 使用方法。 在当前流行的微服务以及分布式集群环境下&#xff0c;Redis 的使用场景可以说非常的广泛&#xff0c;能解决集群环境下系统中遇到的不少技术问题&#xff0c;在此列举几…
阅读更多...
最新文章

Copyright @ 2022~2023