4.JavaScript Class 封装和继承

最新推荐文章于 2024-05-17 13:52:13 发布
最新推荐文章于 2024-05-17 13:52:13 发布
阅读量807 收藏 2
点赞数 1
分类专栏： H5前端学习Progress 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yunfeihope/article/details/130450821
版权

4.JavaScript Class 封装和继承

了解函数中 this 在不同场景下的默认值，动态指定函数 this 的值，提升代码封装的灵活度。

  • 能够区分不同场景下函数中 this 的默认值
  • 知道箭头函数的普通函数的区别，掌握箭头函数的使用
  • 能够动指定函数中 this 的值
  • 了解基于类的面向对象的实现语法

一、this

了解函数中 this 在不同场景下的默认值，知道动态指定函数 this 值的方法。

1.1 默认值

this 是 JavaScript 最具“魅惑”的知识点，不同的应用场合 this 的取值可能会有意想不到的结果，在此我们对以往学习过的关于【 this 默认的取值】情况进行归纳和总结。

普通函数

普通函数的调用方式决定了 this 的值，即【谁调用 this 的值指向谁】，如下代码所示：

<script>
  // 普通函数
  function sayHi() {
    console.log(this);
  }
  // 函数表达式
  let sayHello = function () {
    console.log(this);
  }
	
  // 函数的调用方式决定了 this 的值
  sayHi(); // window
  window.sayHi();
	
 	// 普通对象
  let user = {
    name: '小明',
    walk: function () {
      console.log(this);
    }
  };
  // 动态为 user 添加方法
  user.sayHi = sayHi;
  uesr.sayHello = sayHello;
	
  // 函数调用方式，决定了 this 的值
  user.sayHi();
  user.sayHello();
</script>

注： 普通函数没有明确调用者时 this 值为 window，严格模式下没有调用者时 this 的值为 undefined。

箭头函数

箭头函数中的 this 与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在 this ！箭头函数中访问的 this 不过是箭头函数所在作用域的 this 变量。

<script>
  console.log(this); // 此处为 window
  // 箭头函数
  let sayHi = function() {
    console.log(this); // 该箭头函数中的 this 为函数声明环境中 this 一致
  }

  // 普通对象
  let user = {
    name: '小明',
    // 该箭头函数中的 this 为函数声明环境中 this 一致
    walk: () => {
      console.log(this);
    },
    
    sleep: function () {
      let str = 'hello';
      console.log(this);
      let fn = () => {
        console.log(str);
        console.log(this); // 该箭头函数中的 this 与 sleep 中的 this 一致
      }
      // 调用箭头函数
      fn();
    }
  }

  // 动态添加方法
  user.sayHi = sayHi;
  
  // 函数调用
  user.sayHi();
  user.sleep();
  user.walk();
</script>

在开发中【使用箭头函数前需要考虑函数中 this 的值】，事件回调函数使用箭头函数时，this 为全局的 window，因此DOM事件回调函数不推荐使用箭头函数，如下代码所示：

<script>
  // DOM 节点
  let btn = document.querySelector('.btn');

  // 箭头函数 此时 this 指向了 window
  btn.addEventListener('click', () => {
    console.log(this);
  })

  // 普通函数 此时 this 指向了 DOM 对象
  btn.addEventListener('click', function () {
    console.log(this);
  })
</script>

同样由于箭头函数 this 的原因，基于原型的面向对象也不推荐采用箭头函数，如下代码所示：

<script>
  function Person() {

  }

  // 原型对像上添加了箭头函数
  Person.prototype.walk = () => {
    console.log('人都要走路...');
    console.log(this); // widow
  }

  let p1 = new Person();
  p1.walk();
</script>
1.2 定义值

以上归纳了普通函数和箭头函数中关于 this 默认值的情形，不仅如此 JavaScript 中还允许指定函数中 this 的指向，有 3 个方法可以动态指定普通函数中 this 的指向：

call

使用 call 方法调用函数，同时指定函数中 this 的值，使用方法如下代码所示：

<script>
  // 普通函数
  function sayHi() {
    console.log(this);
  }

  let user = {
    name: '小明',
    age: 18
  }

  let student = {
    name: '小红',
    age: 16，
  }

  // 调用函数并指定 this 的值
  sayHi.call(user); // this 值为 user
  sayHi.call(student); // this 值为 student

  // 求和函数
  function counter(x, y) {
    return x + y;
  }

  // 调用 counter 函数，并传入参数
  let result = counter.call(null, 5, 10);
  console.log(result);
</script>

总结：

  1. call 方法能够在调用函数的同时指定 this 的值
  2. 使用 call 方法调用函数时，第1个参数为 this 指定的值
  3. call 方法的其余参数会依次自动传入函数做为函数的参数
apply

使用 call 方法调用函数，同时指定函数中 this 的值，使用方法如下代码所示：

<script>
  // 普通函数
  function sayHi() {
    console.log(this);
  }

  let user = {
    name: '小明',
    age: 18
  }

  let student = {
    name: '小红',
    age: 16
  }

  // 调用函数并指定 this 的值
  sayHi.apply(user); // this 值为 user
  sayHi.apply(student); // this 值为 student

  // 求和函数
  function counter(x, y) {
    return x + y;
  }

  // 调用 counter 函数，并传入参数
  let result = counter.apply(null, [5, 10]);
  console.log(result);
</script>

总结：

  1. apply 方法能够在调用函数的同时指定 this 的值
  2. 使用 apply 方法调用函数时，第1个参数为 this 指定的值
  3. apply 方法第2个参数为数组，数组的单元值依次自动传入函数做为函数的参数
bind

bind 方法并不会调用函数，而是创建一个指定了 this 值的新函数，使用方法如下代码所示：

<script>
  // 普通函数
  function sayHi() {
    console.log(this);
  }

  let user = {
    name: '小明',
    age: 18
  }

  // 调用 bind 指定 this 的值
  let sayHello = sayHi.bind(user);

  // 调用使用 bind 创建的新函数
  sayHello();
</script>

注：bind 方法创建新的函数，与原函数的唯一的变化是改变了 this 的值。

改变this三个方法总结：

call：fun.call(this，arg1, arg2,......)
apply：fun.apply(this, [arg1, arg2,......])
bind：fun.bind(this, arg1, arg2,......)

相同点：
	都可以用来改变this指向，第一个参数都是this指向的对象
区别：
	call和apply：都会使函数执行，但是参数不同
	bind：不会使函数执行，参数同call

二、class

了解 JavaScript 中基于 class 语法的面向对象编程，为后续课程中的应用做好铺垫。

传统面向对象的编程序语言都是【类】的概念，对象都是由类创建出来，然而早期 JavaScript 中是没有类的，面向对象大多都是基于构造函数和原型实现的，但是 ECMAScript 6 规范开始增加了【类】相关的语法，使得 JavaScript 中的面向对象实现方式更加标准。

2.1 封装

class（类）是 ECMAScript 6 中新增的关键字，专门用于创建类的，类可被用于实现逻辑的封装。

<script>
  // 创建类
  class Person {
	// 此处编写封装逻辑
  }

  // 实例化
  let p1 = new Person();
  console.log(p1);
</script>
实例成员
<script>
  // 创建类
  class Person {
    // 实例属性
    name = '小明';

    // 实例方法
    sleep () {
      console.log('sleeping...')
    }
  }

  // 实例化
  let p1 = new Person();
  p1.sayHi();
</script>

总结：

  • 关键字 class 封装了所有的实例属性和方法

  • 类中封装的并不是变量和函数，因此不能使用关键字 let、const 或 var

静态成员
<script>
  // 创建类
  class Person {
    // 静态属性
    static version = '1.0.0';

    // 静态方法
    static getVersion = function () {
      console.log(this.version);
    }
  }
	
  // 静态方法直接访问
  console.log(Person.version);
  Person.getVersion();
</script>

总结：

  • static 关键字用于声明静态属性和方法
  • 静态属性和方法直接通过类名进行访问
构造函数

创建类时在类的内部有一个特定的方法 constructor ，该方法会在类被实例化时自动被调用，常被用于处理一些初始化的操作。

<script>
  class Person {
    // 实例化时 立即执行
    // 构造函数、构造方法、构造器
    constructor (name, age) {
      this.name = name;
      this.age = age;
    }
	// 实例方法
    walk () {
      console.log(this.name + '正在走路...');
    }
  }
	
  // 实例化
  let p1 = new Person('小明', 18);
  p1.walk();
</script>

总结：

  • constructor 是类中固定的方法名
  • constructor 方法在实例化时立即执行
  • constructor 方法接收实例化时传入的参数
  • constructor 并非是类中必须要存在的方法
2.2 继承
extends

extends 是 ECMAScript 6 中实现继承的简洁语法，代码如下所示：

<script>
  class Person {
    // 父类的属性
    legs = 2;
    arms = 2;
    eyes = 2;
		// 父类的方法
    walk () {
      console.log('人类都会走路...');
    }
		// 父类的方法
    sleep () {
      console.log('人都得要睡觉...');
    }
  }

  // Chinese 继承了 Person 的所有特征
  class Chinese extends Person {}

  // 实例化
  let c1 = new Chinese();
  c1.walk();
</script>

如上代码所示 extends 是专门用于实现继承的语法关键字，Person 称为父类、Chinese 称为子类。

super

在继承的过程中子类中 constructor 中必须调 super 函数，否则会有语法错误，如下代码所示：

<script>
  class Person {
    // 构造函数
    constructor (name, age) {
      this.name = name;
      this.age = age;
    }
    
    // 父类的属性
    legs = 2;
  	arms = 2;
  
    walk () {
      console.log('人类都会走路...');
    }
  }

  // 子类 English 继承了父类 Person
  class English extends Person {
    // 子类的构造函数
    constructor (name, age) {
      super(name, age);
    }

    // 子类的属性
    skin = 'white';
  	language = '英文';
    }

  // 实例化
  let e1 = new English('jack', 18);
  console.log(e1.name);
</script>

子类构造函数中的 super 函数的作用是可以将子类实例化时获得的参数传入父类的构造函数之中。

2.3 写在最后

ECMAScript 6 中基于类的面向对象相较于构造函数和原型对象的面向对象本质上是一样的，基于类的语法更为简洁，未来的 JavaScript 中也都会是基于类的语法实现，当前阶段先熟悉基于类的语法，后面课程中会加强基于类语法的实践。

拷贝：

拷贝不是直接赋值

浅拷贝：

含义：只拷贝最外面层的拷贝方式
	let obj = {
			uname : '张三丰',
			age : 22,
			sex : '男',
			color : ['red', 'blue', 'yellow', 'pink'],
			message : {
				index : 1,
				score : 99
			}
		}

		let newObj = {};

		Object.assign(newObj, obj);

		console.log( obj, newObj );

深拷贝：

含义：所有层都拷贝的方式

let obj = {
			uname : '张三丰',
			age : 22,
			sex : '男',
			color : ['red', 'blue', 'yellow', 'pink'],
			message : {
				index : 1,
				score : 99
			}
		}

		let newObj = {};

		function kaobei (newObj, obj) {

			for ( let key in obj ) {

				if ( obj[key] instanceof Array ) {// obj[key] 是数组
					 // obj[key]是数组，遍历
					 newObj[key] = [];
					 kaobei(newObj[key], obj[key]);
				} else if ( obj[key] instanceof Object ) { // obj[key]是对象
					// obj[key]是对象，遍历
					newObj[key] = {};
					kaobei(newObj[key], obj[key]);
				} else {
					newObj[key] = obj[key];
				}

			}

		}

		kaobei(newObj, obj);

		obj.message.score = 123;

		console.log( obj, newObj );
学不进去(⊙o⊙)
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript编程 类的继承及封装：Class
03-13
在不支持class类型的浏览器中，或者为了兼容非严格模式下已在使用的功能，自己动手制作一个定义类、继承类的功能（支持IE9以上及其他各类主流浏览器），可继承传统方式定义的类型，也可继承系统预定义类型。
JavaScript继承与多继承实例分析
01-19
本文实例讲述了JavaScript继承与多继承。分享给大家供大家参考，具体如下： 虽然最新的EC6里边已经有了class的相关功能，但是从普及度上和阅读旧代码需求的方面来看，这点知识也得了解一下。 本文结构： ① 原理及分析 ② 简单封装后的运用 1. 继承 ① 原理及分析 先上一张图： 用这段代码的思想来实现继承，即： var inherit=function(objBase){ var F=function(){}; //第一步：定义一个函数F F.prototype=objBase; //第二步：将传进来的基类对象(objBase)赋给函数F的原型(F.prototy
【趣味JavaScript】利用className原生自定义封装实现快速操作html元素中的class属性,功能包含添加、删除、替换、验证是否存在, 极简方式轻量级!【附代码】
极客小俊
06-28 247
class属性增、删、改、查、极简方式,轻量级操作!
JS封装和继承-入门级
02-19
Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）。
xCube:一个基于类的 javascript 库
06-04
xCube Framework 【已废弃】目前该项目为我的试验田 和一个完成一半的MVVM框架 但是目前在思考MVVM的意义和方向 以下为2012年的成果=。= xCube是一个面向对象的基于类的javascript库。 旨在以类继承的方式来应对日益复杂的前端js开发。提高代码复用，增强可维护性。 ##框架简介 目前框架处于初级阶段只有内核部分 提供了语法层面的功能。即Class和Package。前者即为类，这个大名鼎鼎的概念就不再赘述。 而后者则是模块化（封装代码）功能，xCube并未采用主流的AMD或者CMD规范。而是采用全局命名空间的方式组织和管理类和代码。 同时实现了一些语法糖。使得模块引入后类的使用更方便 ##xCube的优点 较好的实现了Class语法。贴近Java/C#语法。 实现super功能，能够重用父类构造函数完美支持多层继承关系的super调用 继承基于一个自定义的基
JS构造函数与class类中的封装、继承和多态
wytccc的博客
11-06 906
当访问对象的某个属性时，会先在这个对象的本身属性上查找，如果找不到，则会去__proto__指向的构造函数的prototype原型对象上查找，如果找不到，则再去构造函数的prototype原型对象的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，称为原型链，最终会指向null。构造对象上面的__proto__都指向当前构造函数的prototype，它们指向的地址是一样的，所以声明在prototype上的函数能被所有构造对象访问到！从父级继承过来的属性和方法或。
JS面向对象编程之封装
IT水很深，路还很长
06-18 514
我们所熟知的面向对象语言如 C++、Java 都有类的的概念，类是实例的类型模板，比如Student表示学生这种类型，而不表示任何具体的某个学生，而实例就是根据这个类型创建的一个具体的对象，比如zhangsan、lisi，由类生成对象体现了抽象模板到具体化的过程，这叫做基于类的面向对象方式，而 JavaScript 没有类的概念，是基于原型的面向对象方式（虽然 Es6 增加了class，实质是对原型方式的封装）。总结起来就是以下两点： 在基于类的面向对象方式中，对象（object）依靠类（class）来.
Class封装
weixin_44570988的博客
04-28 1440
在类class里面说到的就是有构造器，通过构造器传参，在类里面，即使你不定义构造器，类里面也会默认一个构造器。 类里面有构造器、成员变量、方法。 构造器 ： 可以建一个构造器，或者建多个构造器的是时候，必须个数、形参列表不同。不写构造器，类里面也会默认一个构造器 例子 ： public ClassDemo() { System.out.println("无参构造器"); } public...
详解js中class的多种函数封装方法
10-23
主要介绍了详解js中class的多种函数封装方法，介绍了不同函数的封装方法，感兴趣的朋友可以参考一下
javascript的一些知识(八)--原生组件及封装
weixin_43160562的博客
11-28 731
js查漏补缺
JavaScript基础和实例代码
03-20
JavaScript电子书，包括了JavaScript的大部分知识，可以帮助读者快速入门。内容如下： 第1章 JavaScript语言概述 1.1 JavaScript是什么 1.1.1 JavaScript简史 1.1.2 JavaScript有何特点 1.2 JavaScript能做什么 1.2.1 表单数据合法性验证 1.2.2 页面特效 1.2.3 交互式菜单 1.2.4 动态页面 1.2.5 数值计算 1.3 JavaScript编程起步 1.3.1 “Hello World！”程序 1.3.2 选择JavaScript脚本编辑器 1.4 如何引入JavaScript脚本代码 1.4.1 通过与标记对引入 1.4.2 通过标记的src属性引入 1.4.3 通过JavaScript伪URL引入 1.4.4 通过HTML文档事件处理程序引入 1.5 嵌入JavaScript脚本代码的位置 1.5.1 在与标记对之间放置 1.5.2 在与标记对之间放置 1.5.3 在两个标记对之间混合放置 1.6 选择合适的浏览器 1.7 处理不支持JavaScript脚本的情况 1.7.1 使用标记对直接屏蔽法 1.7.2 使用和标记对给出提示信息 1.8 JavaScript的实现基础 1.8.1 ECMAScript 1.8.2 DOM 1.8.3 BOM 1.9 客户端与服务器端脚本 1.10 JavaScript与JScript、 VBScript 1.11 JavaScript与Java、Java applet 1.12 JavaScript的未来如何 1.13 本章小结 第2章 JavaScript语言入门 2.1 编程准备 2.1.1 编程术语 2.1.2 脚本执行顺序 2.1.3 大小写敏感 2.1.4 空白字符 2.1.5 分号 2.1.6 块 2.2 数值类型 2.2.1 整型和浮点数值 2.2.2 八进制和十六进制 2.3 变量 2.3.1 变量标识符 2.3.2 变量申明 2.3.3 变量作用域 2.4 弱类型 2.5 基本数据类型 2.5.1 Number型 2.5.2 String型 2.5.3 Boolean型 2.5.4 Undefined型 2.5.5 Null型 2.5.6 Function型 2.6 组合类型 2.6.1 Array型 2.6.2 Object型 2.7 运算符 2.7.1 赋值运算符 2.7.2 基本数学运算符 2.7.3 位运算符 2.7.4 位移运算符 2.7.5 自加和自减 2.7.6 比较运算符 2.7.7 逻辑运算符 2.7.8 逗号运算符 2.7.9 空运算符 2.7.10 ?...:运算符 2.7.11 对象运算符 2.7.12 typeof运算符 2.7.13 运算符优先级 2.8 核心语句 2.8.1 基本处理流程 2.8.2 if条件假设语句 2.8.3 switch流程控制语句 2.8.4 for循环语句 2.8.5 while和do-while循环语句 2.8.6 使用break和continue进行循坏控制 2.8.7 with对象操作语句 2.8.8 使用for…in进行对象循坏 2.8.9 含标签的语句 2.9 函数 2.9.1 函数的基本组成 2.9.2 全局函数与局部函数 2.9.3 作为对象的函数 2.9.4 函数递归调用 2.9.5 语言注释语句 2.9.6 函数应用注意事项 2.10 本章小结 第3章 JavaScript事件处理 3.1 什么是事件 3.2 HTML文档事件 3.2.1 事件捆绑 3.2.2 浏览器事件 3.2.3 HTML元素事件 3.2.4 IE扩展的事件 3.3 JavaScript如何处理事件 3.3.1 匿名函数 3.3.2 显式声明 3.3.3 手工触发 3.4 事件处理器的返回值 3.5 事件处理器设置的灵活性 3.6 现代事件模型与Event对象 3.7 IE4中的Event对象 3.7.1 对象属性 3.7.2 事件上溯 3.7.3 阻止事件上溯 3.7.4 事件改向 3.8 NN4中的Event对象 3.8.1 对象属性 3.8.2 事件捕获 3.8.3 关闭事件捕获 3.8.4 事件传递 3.9 DOM的解决之道
ClassicJS:添加对ES6类的完全私有和受保护的支持，而不会阻止代理
05-12
经典JS 这是一个旨在为ES6类提供完全特权成员支持的库。 这意味着您将充分使用当使用C＃，Java和C ++等语言时可能已经习惯的访问说明。 您将获得所有这些，而不会失去对任何现有语言功能的支持。 特征 实例上的私有和受保护成员，即使使用代理包装也是如此。 经典构造函数上的私有静态成员和受保护的静态成员。 静态构造函数。 原型可修改的字段初始化。 抽象和最终课程。 支持HTML自定义元素。 可定位的super访问器。 实例上的构造方法参考。 如何使用 您可以使用2种不同的方式来使用ClassicJS： 作为基类： import Classic from "classicjs" ; // or // const Classic = require("classic.js"); const { STATIC , PRIVATE , PROTECTED , PUBLIC ,
新手常用的几个JS封装类
05-10
新手常用的几个JS封装类： 包括拖拽、class添加删除、变换、继承等
js class封装 简约Select下拉选择器
ZL3064436257的博客
07-20 395
原生js class封装 简约Select下拉选择器。
JavaScript工具封装指南
小创果技术交流博客
02-16 363
JavaScript 可以使用面向对象的思想来封装工具。
js放大镜功能 class类方法封装
qq_54455551的博客
04-24 286
放大镜功能，原生js书写，move遮罩层盒子宽高按比例获取，设置小盒子宽高，以及大盒子宽高，计算比例
js-封装自己的class类
xiaowei的博客
11-23 2196
封装自己的class类，对于高版本浏览器，支持document.getElementsByClassName，对于IE678,不支持的情况要进行处理。首先判断是否支持，不支持再进行如下处理。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style
js轮播图封装为class类
yang68668的博客
11-17 548
html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
最新发布
u010234868的专栏
05-17 195
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
vue使用class封装方法
04-04
在Vue中，可以使用class来封装方法，类的方法可以通过this关键字来访问Vue实例的数据和方法。以下是一个示例： ```javascript class MyComponent extends Vue { constructor() { super(); this.count = 0; } increment() { this.count++; } decrement() { this.count--; } } ``` 在Vue中使用该组件时，可以像下面这样调用方法： ```html <my-component></my-component> ``` ```javascript new Vue({ el: 'my-component', components: { MyComponent } }); ``` ```html <template> <div> <p>Count: {{count}}</p> <button @click="increment">Increment</button> <button @click="decrement">Decrement</button> </div> </template> ``` 在上面的示例中，我们使用class定义了一个MyComponent类，该类继承自Vue，并且具有两个方法：increment和decrement。在Vue中使用该组件时，我们可以像调用普通组件一样调用它，并且可以使用组件中的方法来操作数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值