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

一、构造函数

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

 new 函数();

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

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

  • 四步走详解

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

    • 第1步：函数体内会自动创建出一个空白对象。
      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xQz1dAoW-1692020300178)(https://raw.githubusercontent.com/yangdong520/drawing-bed-workspace/main/js/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.hqwc.cn/news/66699.html

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

相关文章

2000-2022年全国各地级市绿色金融指数数据

2000-2022年全国各地级市绿色金融指数数据

2000-2022年全国各地级市绿色金融指数数据 1、时间&#xff1a;2000-2022年 2、来源&#xff1a;来源&#xff1a;统计局、科技部、中国人民银行等权威机构网站及各种权威统计年鉴&#xff0c;包括全国及各省市统计年鉴、环境状况公报及一些专业统计年鉴&#xff0c;如 《中国…
阅读更多...
React 入门学习

React 入门学习

React 入门 一、基本认识1.1、前言1.2、什么是1.3、编译<br>1.4、特点1.5、高效 二、React环境和基本使用2.1、环境搭建2.2、脚手架项目基本使用2.2.1、src2.2.2、public2.2.3、package.json 三、JSX的理解和使用四、模块与模块化, 组件与组件化的理解4.1、模块与组件4.2…
阅读更多...
第一次PR经历

第一次PR经历

第一次PR测试地址&#xff1a;https://github.com/firstcontributions/first-contributions说明文档&#xff1a; https://github.com/firstcontributions/first-contributions/blob/main/translations/README.zh-cn.md
阅读更多...
uniapp+uview封装小程序请求

uniapp+uview封装小程序请求

提要&#xff1a; uniapp项目引入uview库 此步骤不再阐述 1.创建环境文件 env.js&#xff1a; let BASE_URL;if (process.env.NODE_ENV development) {// 开发环境BASE_URL 请求地址; } else {// 生产环境BASE_URL 请求地址; }export default BASE_URL; 2.创建请求文件 该…
阅读更多...
理解持续测试，才算理解DevOps

理解持续测试，才算理解DevOps

软件产品的成功与否&#xff0c;在很大程度上取决于对市场需求的及时把控&#xff0c;采用DevOps可以加快产品交付速度&#xff0c;改善用户体验&#xff0c;从而有助于保持领先于竞争对手的优势。 作为敏捷开发方法论的一种扩展&#xff0c;DevOps强调开发、测试和运维不同团队…
阅读更多...
2014-2022年阿里淘宝村省市县数据

2014-2022年阿里淘宝村省市县数据

2009-2022年阿里淘宝村-省市县数据&#xff08;原始数据汇总&#xff09; 从萌芽到扩散&#xff0c;再到大规模、集群式增长&#xff0c;生机勃勃的“淘宝村”和“淘宝镇”已成为中国农村电商发展的典范。2022年&#xff0c;在全面推动乡村振兴的进程中&#xff0c;又有一批村…
阅读更多...
xxljob搭建（内网穿透）

xxljob搭建（内网穿透）

调度中心搭建 先从码云或者github上将项目拷贝到本地&#xff0c;选择最新的release分支拷贝下来的xxl-job-admin模块就是调度中心&#xff0c;我们需要做的有两点&#xff0c;第一点将doc/db/tables_xxl_job.sql执行&#xff0c;第二点修改xxl-job-admin的application.proper…
阅读更多...
IDC报告深度解读：2023年CRM发展趋势分析

IDC报告深度解读：2023年CRM发展趋势分析

近期&#xff0c;国际数据公司&#xff08;IDC&#xff09;发布了2022年下半年《中国客户关系管理(CRM)SaaS市场跟踪研究报告》&#xff0c;根据报告显示&#xff0c;2022年下半年中国CRM SaaS市场规模达到 11.6 亿美金&#xff0c;同比增长25.4%&#xff0c;CRM占中国整体SaaS…
阅读更多...
关于面试的那点事，我想说……

关于面试的那点事，我想说……

最近有许多公司的陆陆续续开始秋招了&#xff0c;但有不少粉丝像我说吐槽秋招难。实话实说现在确实有点难&#xff0c;要在以前Android 开发岗位的工作遍地都是&#xff0c;而且面试问的也比较简单&#xff0c;到手的Offer任意选。可惜如今市场变咯&#xff0c;岗位需求量在减少…
阅读更多...
【Linux的开胃小菜】常用的RPM软件包与YUM仓库包管理器使用

【Linux的开胃小菜】常用的RPM软件包与YUM仓库包管理器使用

一、系统初始化进程 systemd与System V init的区别以及作用&#xff1a; System V init运行级别systemd目标名称systemd目标作用0poweroff.target关机1rescue.target单用户模式2multi-user.target多用户的文本界面3multi-user.target多用户的文本界面4multi-user.target多用户…
阅读更多...
Python爬虫——scrapy_基本使用

Python爬虫——scrapy_基本使用

安装scrapy pip install scrapy创建scrapy项目&#xff0c;需要在终端里创建 注意&#xff1a;项目的名字开头不能是数字&#xff0c;也不能包含中文 scrapy startproject 项目名称 示例&#xff1a; scrapy startproject scra_baidu_36创建好后的文件 3. 创建爬虫文件&…
阅读更多...
计算机视觉中的特征检测和描述

计算机视觉中的特征检测和描述

一、说明 这篇文章是关于计算机视觉中特征检测和描述概念的简要理解。在其中&#xff0c;我们探讨了它们的定义、常用技术、简单的 python 实现和一些限制。 二、什么是特征检测和描述&#xff1f; 特征检测和描述是计算机视觉中的基本概念&#xff0c;在图像识别、对象跟踪和图…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023