JavaScript 进阶 - 0基础第三天

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>

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

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

相关文章

ToBeWritten之杂项

ToBeWritten之杂项

也许每个人出生的时候都以为这世界都是为他一个人而存在的&#xff0c;当他发现自己错的时候&#xff0c;他便开始长大 少走了弯路&#xff0c;也就错过了风景&#xff0c;无论如何&#xff0c;感谢经历 转移发布平台通知&#xff1a;将不再在CSDN博客发布新文章&#xff0c;敬…
阅读更多...
ToBeWritten之物联网 BlueTooth/BLE 协议

ToBeWritten之物联网 BlueTooth/BLE 协议

也许每个人出生的时候都以为这世界都是为他一个人而存在的&#xff0c;当他发现自己错的时候&#xff0c;他便开始长大 少走了弯路&#xff0c;也就错过了风景&#xff0c;无论如何&#xff0c;感谢经历 转移发布平台通知&#xff1a;将不再在CSDN博客发布新文章&#xff0c;敬…
阅读更多...
中金支付经历了4个月完成主要出资人前置审批

中金支付经历了4个月完成主要出资人前置审批

2023年4月6日&#xff0c;中国人民银行公示了关于中金支付有限公司的《中国人民银行准予行政许可决定书》&#xff08;银许准予决字〔2023〕第41号&#xff09;&#xff0c;同意中金支付有限公司主要出资人由中金金融认证中心有限公司变更为广州广电运通金融电子股份有限公司&a…
阅读更多...
Charles 安装及配置，详细步骤(不错，保存一下)

Charles 安装及配置，详细步骤(不错，保存一下)

一、安装激活 1.1、下载 https://www.charlesproxy.com/download/ 1.2、激活 打开Charles > Help > Register Charles > 输入 Registered Name &#xff1a; https://zhile.io License Key&#xff1a;48891cf209c6d32bf4 二、代理配置 2.1、代理设置 Proxy > Pr…
阅读更多...
Linux系统编程（三）—— 文件编程（1）目录和文件

Linux系统编程（三）—— 文件编程（1）目录和文件

3.1 目录和文件 贯穿始终的例子&#xff1a;做一个类似 ls 命令的实现。如myls 1、命令 &#xff08;1&#xff09;一个命令的格式&#xff1a;cmd --长格式 -短格式 非选项的传参 比如 ls --all 和 ls -a&#xff0c;这两个结果是一样的&#xff1a; &#xff08;2&#x…
阅读更多...
00后也太卷了吧！进厂起薪18K，原来面试时候都说了这些......

00后也太卷了吧！进厂起薪18K，原来面试时候都说了这些......

都说00后躺平了&#xff0c;但是有一说一&#xff0c;该牛的还是牛。 这不&#xff0c;前段时间公司来了个00后&#xff0c;工作都没两年&#xff0c;跳槽起薪18K。本来还以为是个年少有为的技术大牛呢&#xff0c;结果相处一个月下来发现技术也就那样。 问起他是如何做到和老…
阅读更多...
操作技巧 | Revit中如何新建系统类型并赋予颜色？

操作技巧 | Revit中如何新建系统类型并赋予颜色？

大家好&#xff0c;这里是行走的安利机---建模助手。 新建系统后&#xff0c;把材质赋予系统&#xff0c;以做出不同颜色的管道和风管系统&#xff0c;那么&#xff1a;Revit中如何新建系统类型并赋予颜色呢&#xff1f; 下面小编说下解决方案。 REVIT 具体解决办法如下 正…
阅读更多...
每日做题总结——day01

每日做题总结——day01

目录 选择题 for循环 指针数组 位段 getchar 大小端存储 进制与格式控制符 位运算 数组指针 二维数组的存储 计算二进制中1的个数 斐波那契数列求递归次数 编程题 删除公共字符 排序子序列 倒置字符串 选择题 for循环 解析&#xff1a;该题主要看for…
阅读更多...
【Java实战篇】Day6.在线教育网课平台

【Java实战篇】Day6.在线教育网课平台

文章目录一、需求&#xff1a;绑定媒资1、需求分析2、库表设计与模型类3、接口定义4、Mapper层开发5、Service层开发6、完善controller层二、需求&#xff1a;课程预览1、需求分析2、实现技术3、模板引擎4、Freemarker入门5、部署网站门户6、接口定义7、接口开发8、编写模板9、…
阅读更多...
chrome中debugger调试定位不准确

chrome中debugger调试定位不准确

问题&#xff1a;代码中添加了debugger代码进行调试&#xff0c;但总是定位不到标注了debugger的位置 代码中debugger在33行浏览器调试定位到了78行 准确定位方法&#xff1a;
阅读更多...
CASE WHEN函数语句多条件下使用详解

CASE WHEN函数语句多条件下使用详解

目录 CASE 的两种格式&#xff1a; 简单CASE函数 和 CASE搜索函数 同时配合 SUM 以及 COUNT 方法的使用 ① SUM函数 ② COUNT函数 CASE WHEN函数语句&#xff0c;实现简单CASE函数和CASE搜索函数两种格式。同时配合 SUM以及COUNT方法的使用 CASE 的两种格式&#xff1a; 简…
阅读更多...
请问网络安全员，渗透师，和黑客三者是什么关系？

请问网络安全员，渗透师，和黑客三者是什么关系？

举个例子 黑客其实就是想偷偷进一个房子的小偷 程序员就是建这个房子的建筑工人 网络安全员就是维护这个房子的物业人员 渗透师就是检查房子【有没有能偷偷进入的窗口&#xff0c;能被撬动的锁&#xff0c;能破解的密码门】的人 有人问为什么那么多网安盯着还能让黑客进入…
阅读更多...
深入了解jvm垃圾回收

深入了解jvm垃圾回收

1、为什么要有GC&#xff0c;哪些内存对象需要回收&#xff1f; 对于一个Java开发者来说&#xff0c;了解过Java内存区域的都知道&#xff0c;Java内存区域分了堆、栈、程序计数器等等。 Java的程序计数器&#xff0c;栈内存 &#xff0c;他们随线程生&#xff0c;随线程灭&a…
阅读更多...
Alibaba开源的Java诊断工具Arthas-实战

Alibaba开源的Java诊断工具Arthas-实战

目录参考一、启动二、支持的ognl表达式三、监听参数监听Controller 的参数和返回值监听完整参数和返回值监听kafka消费监听单个参数监听异常按照耗时进行过滤监听参数比较四、变量和方法查询静态成员变量值查询配置类具体属性的值通过类加载器查看Spring容器中对象所有属性执行…
阅读更多...
[ 应急响应基础篇 ] 解决远程登录权限不足的问题（后门账号添加远程桌面权限）

[ 应急响应基础篇 ] 解决远程登录权限不足的问题（后门账号添加远程桌面权限）

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…
阅读更多...
深入浅出Kafka

深入浅出Kafka

这个主题 武哥漫谈IT &#xff0c;作者骆俊武 讲得更好 一、什么是Kafka&#xff1f; 首先我们得去官网看看是怎么介绍Kafka的&#xff1a; https://kafka.apache.org/intro Apache Kafka is an open-source distributed event streaming platform. 翻译成中文就是&#xff1…
阅读更多...
【JavaWeb】8—过滤器

【JavaWeb】8—过滤器

⭐⭐⭐⭐⭐⭐ Github主页&#x1f449;https://github.com/A-BigTree 笔记链接&#x1f449;https://github.com/A-BigTree/Code_Learning ⭐⭐⭐⭐⭐⭐ 如果可以&#xff0c;麻烦各位看官顺手点个star~&#x1f60a; 如果文章对你有所帮助&#xff0c;可以点赞&#x1f44d;…
阅读更多...
【架构师从零进阶】Java基础 练气期 Day1

【架构师从零进阶】Java基础 练气期 Day1

目标与路径 学习周期和目标 基础&#xff1a;需要有多年的面向对象设计经验&#xff0c;至少筑基期的水平&#xff0c;为了打好基础并提升到元婴期重新学习&#xff0c;大约需要1年&#xff1b; 学习目标&#xff1a;Java 高级开发者&#xff08;元婴期&#xff09;&#xf…
阅读更多...
旅游心得Traveling Experience

旅游心得Traveling Experience

前言 加油 原文 旅游心得常用会话 ❶ Share photos of the trip with friends. 与朋友分享旅游的照片。 ❷ We’ll go to the Great Wall, if you prefer. 你如果愿意的话，我们去长城。 ❸ Would you go to the church or the synagogue or the mosque? 你会去教堂，犹太…
阅读更多...
从零开始：如何集成美颜SDK到你的应用中

从零开始：如何集成美颜SDK到你的应用中

现在&#xff0c;随着人们对于美的追求不断提升&#xff0c;美颜应用已经成为了人们生活中不可或缺的一部分。在应用中&#xff0c;美颜功能的实现离不开美颜SDK的支持。那么&#xff0c;如何集成美颜SDK到你的应用中呢&#xff1f;下面&#xff0c;我们就来一步步了解。 第一…
阅读更多...
最新文章

Copyright @ 2022~2023