8-js高级-3

news2024/11/24 19:57:43

JavaScript 进阶 - 3

了解构造函数原型对象的语法特征，掌握 JavaScript 中面向对象编程的实现方式，基于面向对象编程思想实现 DOM 操作的封装。

  • 编程思想
  • 构造函数
  • 原型
  • 综合案例

编程思想

学习 JavaScript 中基于原型的面向对象编程序的语法实现，理解面向对象编程的特征。

面向过程

面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次

调用就可以了。

举个栗子：蛋炒饭
在这里插入图片描述

面向对象

面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。

在这里插入图片描述

在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。

面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。

面向对象的特性：

  • 封装性

  • 继承性

  • 多态性

编程思想对比

面向过程

优点：性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。

缺点：不灵活、复用性较差

面向对象

优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统 更加灵活、更加易于维护

缺点：性能比面向过程低

生活离不开蛋炒饭，也离不开盖浇饭，选择不同而已，只不过前端不同于其他语言，面向过程更多

构造函数

封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装

把公共的属性和方法抽取封装到构造函数里面来实现数据的共享，这样创建的实例对象可以使用这些属性和方法了

<body>
  <script>
    // 1. 构造函数实现封装，封装人的姓名、年龄和 sayHi方法

    function Person(name, age) {
      this.name = name
      this.age = age
      this.sayHi = function () {
        console.log('hi~')
      }
    }

    // 实例化
    const zs = new Person('张三', 18)
    const ls = new Person('李四', 19)
    console.log(zs)
    console.log(ls)
    console.log(zs === ls)  // false 

    // 2. 构造函数实现封装有个小问题
    console.log(zs.sayHi === ls.sayHi)  // false 两个函数不一样

  </script>
</body>

总结：

  1. 构造函数体现了面向对象的封装特性
  2. 构造函数实例创建的对象彼此独立、互不影响

封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装。

前面我们学过的构造函数方法很好用，但是 存在浪费内存的问题

原型

原型对象-prototype

是什么？JavaScript 规定，每一个构造函数都有一个prototype属性，指向另一个对象，所以我们也称为原型对象

什么是继承:

父对象中的成员，子对象无需重复创建，就可直接使用！

何时:

同一类型的所有子对象，都需要相同的方法定义或属性值时，都会用继承的方式来实现。

如何:

  1. (自动，不需要你手写！) 其实当我们定义一个构造函数时，js程序都会自动赠送我们一个原型对象(prototype)，也称为该类型下所有孩子的父对象。

  2. 什么是原型对象(prototype)：替所有子对象保存共有方法和属性值的父对象

  3. (自动，不需要你手写！) 当new一个新对象时，new的第二步是自动让新子对象继承构造函数的原型对象。自动设置子对象的、__proto__属性指向构造函数的原型对象

    新子对象._proto_ = 构造函数.prototype

  4. 结果，将来用子对象试图访问一个子对象没有的共有方法或属性时，js程序先在子对象自身内部查找。如果子对象内部没有，js程序会自动延 __proto__向父对象(原型对象)中查找是否包含要用的方法或属性。只要在父对象（原型对象）中找到想要的方法，依然可以用"子对象.共有方法名()"调用。看起来就像子对象在用自己的方法一样！

  5. 问题: 构造函数的原型对象开始时是空的！如何向原型对象中添加共有属性和方法？——唯一的办法只有“强行赋值”！

    构造函数.prototype.共有方法名=function(){ … }

总结:

今后，只要所有子对象都要共有的方法或属性值，都要集中保存在构造函数的原型对象中！

问题:

问:为什么指同一个原型对象，从构造函数访问时，要用prototype属性，而从子对象访问时却要用_proto_ 。构造函数的prototype属性和子对象的 proto 指的到底是不是同一个对象呢？
答: prototype和_proto_，指的是同一个对象。只不过，通过不同辈分的其它对象访问同一个原型对象时，称呼不同！

问题:

问:原型对象中的this指谁？

(1). 错误: 因为构造函数.prototype.共有方法=function(){ … }
所以共有方法中的this指.前的原型对象！
因为: 这句话只是向原型对象中添加函数，并不是调用共有方法。

(2). 正确: 判断this不要看定义在哪儿，应该看何时被谁调用！
因为共有方法迟早会被"子对象.共有方法()"调用。所以，共有方法中的this不确定。但是肯定指将来正在调用这个共有方法的.前的某个子对象。

自有属性和共有属性:

	(1). 什么是: 
        a. 自有属性: 保存在当前对象内部，仅归当前对象自己所有的属性
        b. 共有属性: 保存在原型对象(父对象)中，归多个子对象共有的属性
	(2). 获取属性值: 无论自有属性，还是共有属性，都可用"子对象.属性名"，用法是相同的！
	(3). 修改属性值: 
        a. 自有属性: 应该用子对象直接修改。子对象.自有属性名=属性值
        b. 共有属性: 
            1). 错误: 用子对象.共有属性方式=新值
                因为: 共有属性归所有子对象共用，如果允许某一个子对象擅自篡改，则牵一发而动全身！——危险！
                所以: js禁止子对象修改原型对象中的共有属性
                但是: 如果强行用子对象.共有属性=新值，js程序会自动给这个子对象添加一个自有的同名属性保存新属性值。而不会影响原型对象中的共有属性
                结果: 从此，这个子对象，在这个共有属性的使用上，与其他子对象，分道扬镳！
            2). 正确: 共有属性，只能用原型对象修改: 构造函数.prototype.共有属性=新值

使用场景：

可以解决：构造函数封装时函数（方法）会多次创建，占用内存的问题

原型对象可以挂载函数，对象实例化不会多次创建原型对象里面的函数，节约内存

<body>
  <script>
    // 1. 构造函数实现封装，封装人的姓名、年龄和 sayHi方法

    function Person(name, age) {
      this.name = name
      this.age = age
      // this.sayHi = function () {
      //   console.log('hi~')
      // }
    }
    Person.prototype.sayHi = function () {
      console.log('hi~')
    }
    console.log(Person.prototype)  // 原型对象
    // 实例化
    const zs = new Person('张三', 18)
    const ls = new Person('李四', 19)
    zs.sayHi()
    ls.sayHi()
    // console.log(zs)
    // console.log(ls)

    // 构造函数实现封装有个小问题
    console.log(zs.sayHi === ls.sayHi)  //  true


  </script>
</body>

构造函数和原型对象中的this 都指向实例化的对象

  1. 箭头函数不能做构造函数，因为箭头函数里面没有this
  2. 原型对象里面的函数如果需要用到this，也不要用箭头函数
<body>
  <script>
    // 1. 构造函数this指向 实例对象
    function Person(name, age) {
      this.name = name
    }

    // 2. 原型对象this指向 实例对象
    Person.prototype.sayHi = function () {
      console.log('hi~')
      console.log(this)  // 指向实例对象 zs
    }

    const zs = new Person('张三')
    zs.sayHi()

  </script>
</body>

constructor 属性

在哪里？ 每个原型对象里面都有个constructor 属性（constructor 构造函数）

作用：该属性指向该原型对象的构造函数， 简单理解，就是指向我的爸爸，我是有爸爸的孩子

使用场景：

如果有多个对象的方法，我们可以给原型对象采取对象形式赋值.

但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了

此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。

<body>
  <script>
    // constructor属性
    function Person(name) {
      this.name = name
    }

    // 1. constructor属性在原型对象里面
    // console.log(Person.prototype)

    // 2.  constructor属性 指向原型对象的构造函数
    console.log(Person.prototype.constructor === Person)  // true

    // 3. 有什么使用场景呢？
    // Person.prototype.sing = function () {
    //   console.log('我会唱歌')
    // }
    // Person.prototype.dance = function () {
    //   console.log('我会跳舞')
    // }

    // console.log(Person.prototype)

    Person.prototype = {
      // 手动指定一个constructor 指回构造函数
      constructor: Person,
      sing() {
        console.log('我会唱歌')
      },
      dance() {
        console.log('我会跳舞')
      }
    }
    console.log(Person.prototype)

  </script>
</body>

原型

对象都会有一个属性 _proto_ 指向构造函数的prototype 原型对象

之所以我们对象可以使用构造函数 prototype 原型对象的方法，就是因为对象有_proto_ 原型的存在

<body>
  <script>
    // 构造函数
    function Person(name) {
      this.name = name
    }

    // 1. 实例对象里面有 __proto__ 属性
    const zs = new Person('张三')
    console.log(zs)

    // 2.  __proto__ 指向原型对象 
    console.log(zs.__proto__ === Person.prototype)  // true

    // 3. 注意事项
    // 3.1 prototype 原型对象    __proto__ 原型
    // 3.2 __proto__ 非标准属性，在现代浏览器里面显示的是 [[Prototype]] 但是他们是等价的
    // 3.3 __proto__ 尽量不要修改它，否则会影响性能

  </script>
</body>

注意：

  1. proto 原先是JS非标准属性，但是 es6 规范中开始标准化， [[prototype]]和__proto__意义相同
  2. 尽量不要修改这个属性，对性能影响非常严重的
  3. 约定： prototype原型对象而 __proto__原型

原型链

__proto__属性链状结构称为原型链

作用：原型链为对象成员查找机制提供一个方向，或者说一条路线

在这里插入图片描述

<body>
  <script>
    // __proto__属性链状结构称为原型链

    // Person构造函数
    function Person(name) {
      this.name = name
    }

    // 1. 实例对象
    const zs = new Person('张三')
    zs.sayHi = function () {
      console.log('实例对象的方法')
    }
    // zs.sayHi()
    // 2. Person 原型对象
    Person.prototype.sayHi = function () {
      console.log('Person原型对象的方法')
    }
    // zs.sayHi()
    // 3. Ojbect 原型对象
    Object.prototype.sayHi = function () {
      console.log('Object原型对象的方法')
    }
    // zs.sayHi()

    // 4. null
    zs.sayHi()
    // console.log(zs.sayHi)  // undefined
  </script>
</body>

①当访问一个对象成员(属性/方法)时，首先查找这个对象自身有没有该成员(属性/方法)

②如果没有就查找它的原型对象（也就是 __proto__指向的 prototype 原型对象）

③如果还没有就查找原型对象的原型对象（Object的原型对象）

④依此类推一直找到 Object 为止（null）

⑤原型链就在于为对象成员查找机制提供一个方向，或者说一条路线

instanceof 运算符

用来检测构造函数.prototype 是否存在于实例对象的原型链上

<body>
  <script>
    // instanceof 运算符 
    // 语法:  实例对象  instanceof  构造函数
    // 作用： 检测构造函数的原型对象是否在实例对象的原型链上
    // Person构造函数
    function Person(name) {
      this.name = name
    }

    function Person1(name) {
      this.name = name
    }
    const zs = new Person('张三')
    console.log(zs instanceof Person)  // true
    console.log(zs instanceof Person1)  // false

    // 数组 
    const arr = [1, 2, 3]
    console.log(arr instanceof Array)  //  true
    console.log(arr instanceof Object)  //  true 

    console.log(arr) // __proto__
    console.log(arr.__proto__ === Array.prototype) // true
    console.log(Array.prototype.__proto__ === Object.prototype) // true
  </script>
</body>

在这里插入图片描述

原型继承

继承是面向对象编程的另一个特征。龙生龙、凤生凤、老鼠的儿子会打洞描述的正是继承的含义

有些公共的属性和方法可以写到父级身上，子级通过继承也可以使用这些属性和方法

JavaScript 中大多是借助原型对象实现继承的特性

<body>
  <script>
    // 1. 抽取封装 公共的属性和方法  Person构造函数
    // 父级
    function Person() {
      this.eyes = 2
    }
    Person.prototype.eat = function () {
      console.log('我会吃饭')
    }
    console.log(new Person())
    console.log(new Person() === new Person())  // false

    // 男人构造函数
    function Man() {

    }
    // 女人构造函数
    function Woman() {

    }
    // 2. 继承-借助于原型对象
    Man.prototype = new Person()
    Man.prototype.constructor = Man
    console.log(Man.prototype)
    const zs = new Man()
    // console.log(zs)

    Woman.prototype = new Person()
    Woman.prototype.constructor = Woman

    const xl = new Woman()
    // console.log(xl)

    Woman.prototype.baby = function () {
      console.log('我会生孩子')
    }
    console.log(xl)
    console.log(zs)  // 张三没有baby方法了

  </script>
</body>

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

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

相关文章

大胜归来！妙记多这份「高考填志愿」指南请收好！

大胜归来！妙记多这份「高考填志愿」指南请收好！

2023年高考已经落下帷幕&#xff0c;上周和本周多个省份就要公布高考分数了&#xff0c;志愿填报还会远吗&#xff1f; 不知道自己的分数能报什么院校&#xff1f; 不知道目标院校的王牌专业有哪些&#xff1f; 不知道目标专业的就业方向&#xff1f; 不知道有哪些志愿填报小…
阅读更多...
C# 简述.NET中堆和栈的区别

C# 简述.NET中堆和栈的区别

目录 一&#xff0c;引言 二&#xff0c;.NET的堆栈 三&#xff0c;.NET中的托管堆 四&#xff0c;.NET中的非托管堆 五、堆栈、托管堆和非托管堆的比较 六&#xff0c;总结 一&#xff0c;引言 .NET提供了垃圾回收机制&#xff0c;使程序员从内存管理中被解放出来。但这…
阅读更多...
Unity 语法详解之查找游戏物体的方法（含查找隐藏物体）

Unity 语法详解之查找游戏物体的方法（含查找隐藏物体）

为了更好的看懂&#xff0c;有一个非常基础的知识&#xff0c;如果不知道可以移步去了解一下哦 unity | gameobject和transform的区别和关联通俗解释_gameobject transform_菌菌巧乐兹的博客-CSDN博客 一、前情提要 大写的GameObject是个类&#xff0c;里面写满了物体有关的…
阅读更多...
python利用docxtpl将excel数据写入word表格

python利用docxtpl将excel数据写入word表格

解决问题一&#xff1a;将excel数据读取&#xff0c;并将其保存在word中的表格 解决问题二&#xff1a;使用xlrd读入excel数据&#xff0c;如果是整数的话&#xff0c;打开word后发现保存变成了浮点数&#xff0c;后边多了“.0”。 问题一、 可以参考docxtpl快速上手使用,数…
阅读更多...
电商API知识点整理（二）关键字搜索接口item_search获取商品列表

电商API知识点整理（二）关键字搜索接口item_search获取商品列表

关键字搜索接口名称&#xff1a;item_search 接口背景&#xff1a; 随着互联网的普及和电子商务市场的快速发展&#xff0c;越来越多的消费者开始通过关键字搜索来寻找自己感兴趣的商品。为了满足用户的需求&#xff0c;电商平台开发了各种搜索接口&#xff0c;其中之一就是i…
阅读更多...
22个最佳WordPress网站预约插件(2023)

22个最佳WordPress网站预约插件(2023)

您是否正在寻找可以节省您和您的客户时间的自动预订或预约插件&#xff1f;您是否厌倦了将业务输给竞争对手&#xff1f;您是否正在寻找一种简化在线预约和预订的方法&#xff1f; 您的网站应该让客人可以轻松查看和预订可用的预约。这是WordPress预约插件可以帮助您实现在线业…
阅读更多...
基于Python的DES算法的企业用户数据安全加密系统设计与实现

基于Python的DES算法的企业用户数据安全加密系统设计与实现

博主介绍&#xff1a;擅长Java、微信小程序、Python、Android等&#xff0c;专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3fb; 不然下次找不到哟 Java项目精品实战案例…
阅读更多...
【SLAM14讲】04 三维空间刚体运动

【SLAM14讲】04 三维空间刚体运动

一、坐标系之间的欧式变换 xW , yW , zW定义的世界坐标系&#xff0c;xC , yC , zC 定义的相机坐标系。 相机视野中某个向量 p&#xff0c;它的坐标为pc&#xff0c;而从世界坐标系下看&#xff0c;它的坐标 pw。 二、相机运动 相机运动是一个刚体运动&#xff0c;它保证了同…
阅读更多...
golang arena

golang arena

go 1.20新特性 goland设置 Enviroment 定义环境变量 Go tool arguments 就是go build 的参数 Program arguments 启动参数 GOEXPERIMENTarenas -tags goexperiment.arenas //go:build goexperiment.arenaspackage mainimport ("arena""fmt""net/…
阅读更多...
可以实现语音录入的好用的记事本app是哪个?

可以实现语音录入的好用的记事本app是哪个?

在现代快节奏的工作生活中&#xff0c;记事本成为了人们不可或缺的工具之一。然而&#xff0c;传统的手写记事本已经无法满足人们快速、高效的需求&#xff0c;语音记事的好处不言而喻。 它不仅能够提高工作效率&#xff0c;减少输入时间&#xff0c;还能够帮助用户更好地记录…
阅读更多...
使用Visual Studio 2019 编译Masscan

使用Visual Studio 2019 编译Masscan

目录 使用Visual Studio 2019 编译Masscan 1.从github下载源码 2.安装Visual Stiudio 2019 3.准备编译Masscan 4.编译Masscan 总结 使用Visual Studio 2019 编译Masscan 1.从github下载源码 可以直接在GitHub上搜索&#xff0c;下载后的源码目录结构。 2.安装Visual Stiu…
阅读更多...
ds1:java-stream流

ds1:java-stream流

文章目录 1.修改集合中的值map2.过滤集合中符合条件的值filter找集合中的最大/小的值&#xff0c;及操作后元素的个数max()/min()/count()归约&#xff1a;对集合中所有元素进行自定义计算获取最终值reduce()collect分组(partitioningBy/groupingBy)修改集合中元素之间的连接符…
阅读更多...
ctr-k8s镜像管理命令，将k8s正在使用的镜像推送仓库

ctr-k8s镜像管理命令，将k8s正在使用的镜像推送仓库

​ k8s镜像管理命令 查出k8s中pod在使用的镜像 kubectl get -o wide deploy -n yxyw-uat |awk ‘{print $7}’ 查出镜像地址&#xff0c;勾选正则开头配上镜像推送命令 gem-acr-p-a01-registry-vpc.cn-shenzhen.cr.aliyuncs.com/osale/gyx-admin:yxyw-pre-2023-06-05-11-18…
阅读更多...
便携式多功能校准器TD1858参考标准

便携式多功能校准器TD1858参考标准

体积小巧&#xff1a;相较于同档次技术指标的多功能校准器&#xff0c;体积缩小至50%&#xff0c;重量轻便&#xff1a;整机质量不到10 kg&#xff0c;人员可轻松实现搬运&#xff0c;方案价值&#xff1a;非常方便携带至工作现场对数字多用表和其他电测仪表进行校准。 直流电压…
阅读更多...
搭建cesium源码调试环境

搭建cesium源码调试环境

1. cesium源码下载 直接从github上下载即可 https://github.com/CesiumGS/cesium.git 本文下载的是最新版本1.106 2. cesium源码目录简介 1) packages目录 源码目录&#xff0c;包含engine&#xff0c;widgets 2&#xff09;Apps目录 包含一些示例代码 3&#xff09;Spec…
阅读更多...
Node中express路由基本使用

Node中express路由基本使用

1.路由的基本使用 //引入express const expressrequire("express") //创建路由 const appexpress() //规定路由的请求方法 app.get(/,(req,res)>{res.end("hello express") }) //启动路由&#xff0c;并且端口为9000 app.listen(9000,()>{console.l…
阅读更多...
ruoyi-vue版本（三十）事务介绍和使用

ruoyi-vue版本（三十）事务介绍和使用

目录 1 事务管理2 常见坑点13 常见坑点24 Transactional注解的常用属性表&#xff1a; 1 事务管理 新建的Spring Boot项目中&#xff0c;一般都会引用spring-boot-starter或者spring-boot-starter-web&#xff0c;而这两个起步依赖中都已经包含了对于spring-boot-starter-jdbc…
阅读更多...
和鲸社区数据分析每周挑战【第九十六期：汽车公司客户细分预测】

和鲸社区数据分析每周挑战【第九十六期：汽车公司客户细分预测】

和鲸社区数据分析每周挑战【第九十六期&#xff1a;汽车公司客户细分预测】 文章目录 和鲸社区数据分析每周挑战【第九十六期&#xff1a;汽车公司客户细分预测】一、前言1、背景描述2、什么是用户分群&#xff1f;3、数据说明4、数据集预览 二、数据读取和数据初步观察三、潜在…
阅读更多...
【动态规划算法】第六题：63.不同路径II

【动态规划算法】第六题：63.不同路径II

&#x1f496;作者&#xff1a;小树苗渴望变成参天大树 &#x1f389;作者宣言&#xff1a;认真写好每一篇博客 &#x1f38a;作者gitee:gitee &#x1f49e;作者专栏&#xff1a;C语言,数据结构初阶,Linux,C 动态规划算法 如 果 你 喜 欢 作 者 的 文 章 &#xff0c;就 给 作…
阅读更多...
2、DuiLib的入门程序以及资源压缩打包

2、DuiLib的入门程序以及资源压缩打包

标题 1、DuiLib入门程序11.1、DuiLib程序版本11.2、DuiLib程序版本21.3、DuiLib程序版本3&#xff0c;增加编写界面xml1.4、DuiLib程序版本4&#xff0c;继续修改xml布局1.5、DuiLib程序版本5&#xff0c;继续修改xml布局5.6、DuiLib程序版本5&#xff0c;继续修改xml布局 2、D…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023