JavaScript 进阶 - 0基础第三天

最新推荐文章于 2024-08-03 17:05:14 发布
最新推荐文章于 2024-08-03 17:05:14 发布
阅读量598 收藏
点赞数
分类专栏： JS 文章标签： javascript 开发语言 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63760882/article/details/130071950
版权
本文介绍了JavaScript中的面向对象编程，强调了构造函数和原型对象在封装和实现面向对象特性中的作用。通过示例展示了如何使用构造函数封装属性和方法，以及如何利用原型对象解决函数多次创建导致的内存问题。还讨论了原型链、`instanceof`运算符和原型继承的概念，阐述了JavaScript中继承的实现方式。
摘要由CSDN通过智能技术生成

JavaScript 进阶 - 第三天

了解构造函数原型对象的语法特征，掌握 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属性，指向另一个对象，所以我们也称为原型对象

使用场景：

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

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

<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>
夏夜星光.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript进阶-循环事件加监听
qq_44813296的博客
03-08 1807
问题描述 当我们需要循环事件加监听，如需求：点击某个按钮, 提示"点击的是第n个按钮，结果发现点击不同按钮，结果都是相同。错误场景代码如下： <button>测试1</button> <button>测试2</button> <button>测试3</button> <script type="text/javascript"> var btns = document.getElementsByTagName('button
JavaScript进阶教程(第三课)第1/2页
10-30
### JavaScript进阶教程(第三课) #### 事件的定时以及浏览器的识别 随着JavaScript技能的不断深化，我们能够开发出更为复杂的应用程序。在前一课中，我们探讨了如何利用JavaScript来创建Cookies。本课将重点介绍...
JavaScript 进阶 - 第1天
Gilpin30的博客
06-14 656
JavaScript 进阶 - 第1天
JavaScript进阶-WebAPI（DOM节点操作）
ZZP的博客
04-18 379
文章目录二、JavaScript进阶-WebAPIDOM节点操作获取节点增加节点删除节点拓展-时间对象 二、JavaScript进阶-WebAPI DOM节点操作 获取节点 本质: 针对标签本身的增删查 父级: parentNode 子集: children 伪数组 兄弟： 　　nextElementSibling 下一个兄弟 　　previousElementSibling 上一个兄弟 增加节点 方法一： 　　创建新节点 　　　　let result = document.createElem
javas高级进阶------第一天
阿天
08-24 130
JavaScript高级进阶篇，投注于提升水平
JavaScript进阶-面向对象（严格模式-闭包）
ZZP的博客
04-25 169
文章目录三、JavaScript进阶-面向对象严格模式严格模式的概念开启严格模式严格模式的作用闭包闭包概念闭包案例 三、JavaScript进阶-面向对象 严格模式 严格模式的概念 严格模式对正常的 JavaScript 语义做了一些更改： 　　1.消除了 Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为。 　　2.消除代码运行的一些不安全之处，保证代码运行的安全。 　　3.提高编译器效率，增加运行速度。 　　4.禁用了在 ECMAScript 的未来版本中可能会定义的一些语法，为未
JavaScript进阶-WebAPI（DOM事件）
ZZP的博客
04-18 798
文章目录二、JavaScript进阶-WebAPIDOM事件-基础事件概念注册事件的两种方式常用事件类型DOM事件-高级事件流概念事件捕获事件冒泡阻止事件冒泡 二、JavaScript进阶-WebAPI DOM事件-基础 事件概念 什么是事件? 　　事件是在编程时系统内发生的动作或者发生的事情 　　比如用户在网页上单击一个按钮 事件监听 　　就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件 语法: 　　DOM L0 事件源.on事件类型 = function(){}
JavaScript进阶-WebAPI（获取和修改DOM元素）
ZZP的博客
04-18 406
文章目录二、JavaScript进阶-WebAPIWebAPI基础知识获取和修改DOM元素获取DOM元素设置/修改元素内容设置/修改元素属性自定义属性定时器-间隔函数 二、JavaScript进阶-WebAPI WebAPI基础知识 DOM 　　操作html和css BOM 　　操作浏览器 DOM 树 获取和修改DOM元素 获取DOM元素 document.querySelector(‘css选择器’) 　　获取的是满足条件的第一个，一定只有一个 　　可以直接进行操作 document.queryS
【javaScript函数进阶-----深入学习函数】
qq_61516787的博客
03-12 1362
函数的进阶一、函数的定义二、this三、严格模式四、高阶函数五、面试闭包递归 一、函数的定义 1.1函数的定义方式 自定义函数（命名函数）function fn() {} 函数表达式（匿名函数 var fun = function() {} 利用new functionvar f=new Function('参数1','参数2','函数体') 所有函数都是Function的实例对象 1.2函数的调用之立即执行函数 (function() { console.log('打印') })() tips:
小白JavaScript学习笔记----JavaScript 进阶
weixin_51877011的博客
05-05 661
垃圾回收机制(Garbage Collection) 简称 GCJS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收。正因为垃圾回收器的存在，许多人认为JS不用太关心内存管理的问题但如果不了解JS的内存管理机制，我们同样非常容易成内存泄漏（内存无法被回收）的情况不再用到的内存，没有及时释放，就叫做内存泄漏面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。举个栗子：蛋炒饭。
JavaScript进阶 - 第1章 系好安全带,准备启航
05-20 172
第1章 系好安全带,准备启航 1-1让你认识JS 你知道吗，Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构)，知道了CSS样式(也称为表示)，会使用HTML+CSS创建一个漂亮的页面，但这还不够，它只是静态页面而已。我们还需使用JavaScript增加行为，为网页添加动态效果。准备好，让JavaScript带你进入新境界吧! JavaScript能做什么？...
JavaScript进阶第一天.zip
09-10
在“JavaScript进阶第一天”的学习资源中，我们可以深入探讨以下几个关键知识点： 1. **变量与数据类型**：JavaScript支持七种数据类型，包括基本数据类型（Number、String、Boolean、Null、Undefined、Symbol、...
JavaScript进阶教程(第三课第二部分)第1/2页
10-30
在JavaScript进阶教程的第三课第二部分中，我们主要探讨了如何使用定时器进行循环调用，以及如何管理和取消这些定时器。JavaScript的定时器功能是通过`setTimeout()`和`clearTimeout()`函数来实现的。 首先，我们来...
JavaScript进阶教程(第二课)第1/3页
10-30
### JavaScript进阶教程（第二课）：Cookies与字符串处理 #### 一、引言 在JavaScript进阶教程的第二课中，我们将深入了解如何使用Cookies来记录用户信息，并探索字符串处理的相关技术。Cookies是一种非常有用的...
JavaScript进阶教程(第一课)第1/3页
10-30
JavaScript进阶教程(第一课)
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
最新发布
m0_74283290的博客
08-03 668
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 308
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 246
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 919
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
JavaScript进阶指南：第二版
在第二版中，作者可能更新了与最新JavaScript版本（如ECMAScript 6或更高版本）相关的特性，包括但不限于箭头函数、模板字符串、类和模块等。以下是书中可能涵盖的一些关键知识点： 1. **基础语法**：介绍变量声明...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值