JS高级（三）

最新推荐文章于 2024-11-05 15:26:40 发布
最新推荐文章于 2024-11-05 15:26:40 发布
阅读量59 收藏
点赞数
分类专栏： js 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_67124455/article/details/128985240
版权

JavaScript 进阶 - 第3天

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

  • 了解面向对象编程的一般特征
  • 掌握基于构造函数原型对象的逻辑封装
  • 掌握基于原型对象实现的继承
  • 理解什么原型链及其作用
  • 能够处理程序异常提升程序执行的健壮性

一、面向对象

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

面向对象编程是一种程序设计思想，它具有 3 个显著的特征：封装、继承、多态。

1.1 封装

封装的本质是将具有关联的代码组合在一起，其优势是能够保证代码复用且易于维护，函数是最典型也是最基础的代码封装形式，面向对象思想中的封装仍以函数为基础，但提供了更高级的封装形式。

命名空间

先来回顾一下以往代码封装的形式：

<script>
  // 普通对象（命名空间）形式的封装
  let beats = {
    name: '狼',
    setName: function (name) {
      this.name = this.name;
    },
    getName() {
      console.log(this.name);
    }
  }

  beats.setName('熊');
  beats.getName();
</script>

以往以普通对象（命名空间）形式封装的代码只是单纯把一系列的变量或函数组合到一起，所有的数据变量都被用来共享（使用 this 访问）。

构造函数

对比以下通过面向对象的构造函数实现的封装：

<script>
  function Person() {
    this.name = '佚名';
    // 设置名字
    this.setName = function (name) {
      this.name = name;
    }
    // 读取名字
    this.getName = () => {
      console.log(this.name);
    }
  }

  // 实例对像，获得了构造函数中封装的所有逻辑
  let p1 = new Person();
  p1.setName('小明');
  console.log(p1.--name);// 小明

  // 实例对象
  let p2 = new Person();
  console.log(p2.name); // 佚名
</script>

构造函数相当于一个"模子"，能够像字面量那样创建出对象来，所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的。

总结：

  1. 构造函数体现了面向对象的封装特性
  2. 构造函数实例创建的对象彼此独立、互不影响
  3. 命名空间式的封装无法保证数据的独立性

注：可以举一些例子，如女娲造人等例子，加深对构造函数的理解。

原型对象

实际上每一个构造函数都有一个名为 prototype 的属性，译成中文是原型的意思，prototype 的是对象类据类型，称为构造函数的原型对象，每个原型对象都具有 constructor 属性代表了该原型对象对应的构造函数。

<script>
  function Person() {
    
  }

  // 每个函数都有 prototype 属性
  console.log(Person.prototype);
</script>

如下图所示

了解了 JavaScript 中构造函数与原型对象的关系后，再来看原型对象具体的作用，如下代码所示：

<script>
  function Person() {
    // 此处未定义任何方法
  }

  // 为构造函数的原型对象添加方法
  Person.prototype.sayHi = function () {
    console.log('Hi~');
  }
	
  // 实例化
  let p1 = new Person();
  p1.sayHi(); // 输出结果为 Hi~
</script>

其结构如图所示：
构造函数 Person 中未定义任何方法，这时实例对象调用了原型对象中的方法 sayHi，接下来改动一下代码：

<script>
  function Person() {
    // 此处定义同名方法 sayHi
    this.sayHi = function () {
      console.log('嗨!');
    }
  }

  // 为构造函数的原型对象添加方法
  Person.prototype.sayHi = function () {
    console.log('Hi~');
  }

  let p1 = new Person();
  p1.sayHi(); // 输出结果为 嗨!
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mN8apWLQ-1676104053729)(assets/prototype_3.png)]

构造函数 Person 中定义与原型对象中相同名称的方法，这时实例对象调用则是构造函中的方法 sayHi。

通过以上两个简单示例不难发现 JavaScript 中对象的工作机制：当访问对象的属性或方法时，先在当前实例对象是查找，然后再去原型对象查找，并且原型对象被所有实例共享。

<script>
  function Person() {
    // 此处定义同名方法 sayHi
    this.sayHi = function () {
      console.log('嗨!' + this.name);
    }
  }

  // 为构造函数的原型对象添加方法
  Person.prototype.sayHi = function () {
    console.log('Hi~' + this.name);
  }
  // 在构造函数的原型对象上添加属性
  Person.prototype.name = '小明';

  let p1 = new Person();
  p1.sayHi(); // 输出结果为 嗨!
  
  let p2 = new Person();
  p2.sayHi();
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pUnvH21k-1676104053729)(assets/prototype_4.png)]

什么是原型对象？？

答：是构造函数的一个属性，它的数据类型是对象

原型对象有啥用？？

答：原型对象对应的构造函数的实例方法或属性不存在时会去查找原型对象

总结：结合构造函数原型的特征，实际开发重往往会将封装的功能函数添加到原型对象中。

1.2 继承

继承是面向对象编程的另一个特征，通过继承进一步提升代码封装的程度，JavaScript 中大多是借助原型对象实现继承的特性。

龙生龙、凤生凤、老鼠的儿子会打洞描述的正是继承的含义，分别封装中国人和日本人的行为特征来理解编程中继承的含义，代码如下：

<script>
  // 封装中国人的行为特征
  function Chinese() {
    // 中国人的特征
    this.arms = 2;
    this.legs = 2;
    this.eyes = 2;

    this.skin = 'yellow';
    this.language = '中文';

    // 中国人的行为
    this.walk = function () {}
    this.sing = function () {}
    this.sleep = function () {}
  }

  // 封装日本人的行为特征
  function Japanese() {
    // 日本人的特征
    this.arms = 2;
    this.legs = 2;
    this.eyes = 2;

    this.skin = 'yellow';
    this.language = '日文';

    // 日本人的行为
    this.walk = function () {}
    this.sing = function () {}
    this.sleep = function () {}
  }
</script>

其实我们都知道无论是中国人、日本人还是其它民族，人们的大部分特征是一致的，然而体现在代码中时人的相同的行为特征被重复编写了多次，代码显得十分冗余，我们可以将重复的代码抽离出来：

原型继承

基于构造函数原型对象实现面向对象的继承特性。

<script>
  // 所有人
  function Person() {
    // 人的特征
    this.arms = 2;
    this.legs = 2;
    this.eyes = 2;
    
    // 人的行为
    this.walk = function () {}
    this.sing = function () {}
    this.sleep = function () {}
  }
  
  // 中国人
  function Chinese() {
    this.skin = 'yellow';
    this.language = '中文';
  }
  // 日本人
  function Japanese() {
    this.skin = 'yellow';
    this.language = '日文';
  }
</script>

上述代码可以理解成将 Chinese 和 Japanese 共有的属性和方法提取出来了，也就是说 Chinese 和 Japanese 需要【共享】一些属性和方法，而原型对象的属性和方法恰好是可以被用来共享的，因此我们看如下代码：

<script>
  // 中国人
  function Chinese() {
    this.skin = 'yellow';
    this.language = '中文';
  }
  // 日本人
  function Japanese() {
    this.skin = 'yellow';
    this.language = '日文';
  }
  
  // 人们【共有】的行为特征
  let people = {
    // 人的特征
    arms: 2,
    legs: 2,
    eyes:2,
    // 人的行为
    walk: function () {},
    sleep: function () {},
    sing: function () {}
  }
  
  // 为 prototype 重新赋值
  Chinese.prototype = people;
  Chinese.prototype.constructor = Chinese;
</script>

如下图所示：
创建对象 people 将公共的的属性和方法独立出来，然后赋值给构造函数的 prototype 这样无论有多少个民族都可以共享公共的属性和方法了：

<script>
  // 人们【共有】的行为特征
  let people = {
    // 人的特征
    arms: 2,
    legs: 2,
    eyes:2,
    // 人的行为
    walk: function () {},
    sleep: function () {},
    sing: function () {}
  }
  
  // 中国人
  function Chinese() {
    this.skin = 'yellow';
    this.language = '中文';
  }
  // 日本人
  function Japanese() {
    this.skin = 'yellow';
    this.language = '日文';
  }
  
  function Englist() {
    this.skin = 'white';
    this.language= '英文';
  }
  
  // 中国人
  Chinese.prototype = people;
  Chinese.prototype.constructor = Chinese;
  
  let c1 = new Chinese();
 	
  // 日本人
  Japanese.prototype = people;
  Janpanese.prototype.constructor = Japanese;
  // 英国人
  English.prototype = people;
  English.prototype.constructor = English;
  
  // ...
</script>

继承是一种可以“不劳而获”的手段！！！上述代码中 Chinese、Japanese、English 都轻松的获得了 people 的公共的方法和属性，我们说 Chinese、Japanese、English 继承了 people。

上述代码中是以命名空间的形式实现的继承，事实上 JavaScript 中继承更常见的是借助构造函数来实现：

<script>
  // 所有人
  function Person() {
    // 人的特征
    this.arms = 2;
    this.legs = 2;
    this.eyes = 2;

    // 人的行为
    this.walk = function () {}
    this.sing = function () {}
    this.sleep = function () {}
  }

  // 封装中国人的行为特征
  function Chinese() {
    // 中国人的特征
    this.skin = 'yellow';
    this.language = '中文';
  }

  // 封装日本人的行为特征
  function Japanese() {
    // 日本人的特征
    this.skin = 'yellow';
    this.language = '日文';
  }

  // human 是构造函数 Person 的实例
  let human = new Person();

  // 中国人
  Chinese.prototype = new Person();
  Chinese.prototype.constructor = Chinese;
  // 日本人
  Japanese.prototype = human;
  Japanese.prototype.constructor = Japanese;
</script>

如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8OwIVq3M-1676104053730)(assets/prototype_6.png)]

原型链

基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状的结构，我们将原型对象的链状结构关系称为原型链，如下图所示：

作用：用于查找成员提供机制

<script>
  // Person 构造函数
  function Person() {
    this.arms = 2;
    this.walk = function () {}
  }
	
  // Person 原型对象
  Person.prototype.legs = 2;
  Person.prototype.eyes = 2;
  Person.prototype.sing = function () {}
  Person.prototype.sleep = function () {}
	
  // Chinese 构造函数
  function Chinese() {
    this.skin = 'yellow';
    this.language = '中文';
  }
	
  // Chinese 原型对象
  Chinese.prototype = new Person();
  Chinese.prototype.constructor = Chinese;
	
  // 实例化
  let c1 = new Chinese();
  console.log(c1);
</script>

在 JavaScript 对象中包括了一个非标准备的属性 __proto__ 它指向了构造函数的原型对象，通过它可以清楚的查看原型对象的链状结构。

1.3 写在最后

面向对象（OOP）是编程时的一种指导思想，需要通过不断的实践才能体会面向对象编程的优势，在 JavaScript 中面向对象编程的实现是以构造函数和原型对象为核心的，因此掌握构造函数和原型对象的语法是灵活运用面向对象的基础。

面向对象多态的特性在 JavaScript 中应用场景相对较少，本次课中暂不讲解。

二、异常处理

了解 JavaScript 中程序异常处理的方法，提升代码运行的健壮性。

2.1 throw

异常处理是指预估代码执行过程中可能发生的错误，然后最大程度的避免错误的发生导致整个程序无法继续运行。

<script>
  function counter(x, y) {

    if(!x || !y) {
      // throw '参数不能为空!';
      throw new Error('参数不能为空!');
    }

    return x + y;
  }

  counter();
</script>

总结：

  1. throw 抛出异常信息，程序也会终止执行
  2. throw 后面跟的是错误提示信息
  3. Error 对象配合 throw 使用，能够设置更详细的错误信息
2.2 try … catch
<script>
  function foo() {

    try {
      // 查找 DOM 节点
      var p = docunent.querySelector('p');

    } catch(error) {
      // try 代码段中执行有错误时，会执行 catch 代码段

      // 查看错误信息
      console.log(error.message);

      // 终止代码继续执行
      return;
    }

    // 改变文本样式
    p.style.color = 'red';
  }

  foo();
</script>

总结：

  1. try...catch 用于捕获错误信息
  2. 将预估可能发生错误的代码写在 try 代码段中
  3. 如果 try 代码段中出现错误后，会执行 catch 代码段，并截获到错误信息
自学cs的小菜鸡
关注
专栏目录
Javascript 高级程序设计第三版理解
hopefullman的博客
03-05 694
1.js 是动态语言，因为变量类型只会在执行时候才被确定类型。不同于C在声明就确定了变量的类型。 2.undefined 和 null区别： 利用Boolean（）计算后都返回false一个值； 都没有方法； null是关键字undefined不是关键字； null是对象，undefined是基本类型，还是windows属性，在值的时候消耗行性能； null初始化的，undefined...
JS 高级+面试题
m0_61044901的博客
06-06 1048
JS 高级+面试题
JS高级篇
2301_79614134的博客
08-17 1410
动态参数（arguments）、剩余参数（...arr）、展开运算符、数组解构、遍历（forEach）、筛选数组（filter）、内置构造函数、对象拷贝（assign）、创建数组（Array）、累计器（reduce）、改变this指向、call()、apply()、bind()
js高级
小膏的博客
09-01 1171
js高级，就是JavaScript的Es6的高级语法。首先我们提到两大编程思想： 1.面向过程编程和面向对象编程 面向过程编程就是分析问题解决需要的步骤，然后一步步实现的去实现，使用的时候一次次调用。 面向对象编程；就是先分析问题所需要的功能，把事物才分成一个个对象，然后对象之间分工合作。 面向过程编程和面向对象编程的有缺点 1.面向过程编程：代码执行效率高，但不容...
JS高级之JavaScript简介
喵酱的笔记本
04-23 541
JS高级系列是对JavaScript高级程序设计的总结。 一、基本概念 1.最早的JavaScript版本： Netscape公司的Netscape Navigator中的JavaScript 微软的Internet Explorer（IE）的JScript 2.JavaScript内容：（区别于ECMAScript） 核心：ECMAScript（只是语言的描述，包含语法、类型、语句、关...
js高级第三天
qq_45356160的博客
11-26 85
js高级第三天
javascript高级程序设计 第三版
REDJOLER的博客
07-25 902
网盘地址 提取码：vh81 笔记 第二章 2.1script标签 <script>元素属性：async、charset、defer、language、src、type async和defer只对外部脚本有效，language已废弃，type默认为“text/javascript” defer属性可以让脚本在文档完全呈现之后再执行，且按照指定的顺序执行 设置了async的脚本文件不一定按照书写顺序执行，所以文件间应该互不依赖；异步脚本会在页面的load事件前执行，但可能会在DOMContentL
JavaScript高级（详细总结）
程序员阿龙的博客
08-19 2314
JavaScript高级（详细总结）
5个高级JS技巧
小马甲
12-14 1151
JavaScript中，有一些被异常低估的技巧，恰恰我认为这些技巧对于前端朋友们拉高自己代码层次是非常有帮助的，它们分别是FlatMap、数组方法链的顺序、充分使用reduce、充分使用generator、充分使用原生JS类。本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。
JavaScript高级知识点总结
weixin_44763882的博客
08-30 2798
文章目录JavaScript总结：第一天：JS原型介绍1、JS组成的部分2、类型检测3、面向对象介绍4、面向过程和面向对象区别5、创建对象的三种方式6、this做了几件事7、显示对象结构8、构造函数和实例对象的关系9、构造函数带来的问题10、原型添加方法11、什么是原型12、构造函数和实例对象和原型对象之间的关系13、什么样子的数据需要写在原型中？16、实例对象使用的属性和方法层层搜索17、为内置对象添加方法18、把局部变量变成全局变量第二天：面向对象特点,贪吃蛇项目1、面向对象特点2、什么是原型？3、函数
js高级程序设计第三版(高清中文含源码压缩)JavaScript 超级畅销书的最新版
04-13
js高级程序设计第三版(高清中文含源码压缩)JavaScript 超级畅销书的最新版。 本书是 JavaScript 超级畅销书的最新版。ECMAScript 5 和 HTML5 在标准之争中双双胜出，使大量 专有实现和客户端扩展正式进入规范，同时...
Javascript 高级程序设计（第3版）超清中文PDF
10-20
《JavaScript高级程序设计》（第3版）是一本深入探讨该语言精髓的权威书籍，它为读者提供了全面且深入的JavaScript知识，包括语言核心、DOM操作、BOM处理、事件处理以及面向对象编程等多个方面。 在书中，作者详细...
JavaScript高级程序设计第三版中文
06-21
《JavaScript高级程序设计》是学习这一语言的经典教材，现在已经更新到第三版，并提供了完整的中文翻译，对于国内开发者来说，无疑是一份宝贵的资源。这本书深入浅出地讲解了JavaScript的核心概念和高级特性，帮助...
JavaScript 生成二维码
qq_30049249的博客
11-02 231
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
最新发布
ceshiren_com的博客
11-05 483
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 140
vxe-grid新增空行，并且定位到空行位置。
Vue2+3
m0_73557953的博客
11-04 114
创建Vue实例 Vue指令
JavaScript高级编程指南
在这本《JavaScript高级教程》中，首先会引导读者了解JavaScript的基础知识，包括其历史、在Web应用程序中的角色以及与VBScript的区别。接着，讲解如何在HTML文档中嵌入JavaScript以及编写基本的脚本，这是所有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值