day29 JS高级 4

已于 2022-09-25 19:45:17 修改
阅读量56 收藏
点赞数
分类专栏： 前端基础笔记 文章标签： 前端 javascript
于 2022-08-13 17:33:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70619994/article/details/126321581
版权

目录

一、this

1、默认值

（1）普通函数

（2）箭头函数

2、定义值

（1）call

（2）apply

（3）bind

二、class

1、封装

（1）实例成员

（3）构造函数

2、继承

（1）extends

（2）super

3、拷贝

（1）浅拷贝

（2）深拷贝

一、this

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

1、默认值

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

（1）普通函数

        普通函数的调用方式决定了 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。

（2）箭头函数

        箭头函数中的 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>

2、定义值

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

（1）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 方法的其余参数会依次自动传入函数做为函数的参数

（2）apply

        使用 apply方法调用函数，同时指定函数中 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个参数为数组，数组的单元值依次自动传入函数做为函数的参数

（3）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 中是没有类的，面向对象大多都是基于构造函数和原型实现的，但是 ECMAScript 6 规范开始增加了【类】相关的语法，使得 JavaScript 中的面向对象实现方式更加标准。

1、封装

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

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

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

（1）实例成员

<script>
  // 创建类
  class Person {
    // 实例属性
    name = '小明';

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

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

总结：

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

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

（2）静态成员

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

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

总结：

  • static 关键字用于声明静态属性和方法

  • 静态属性和方法直接通过类名进行访问

（3）构造函数

        创建类时在类的内部有一个特定的方法 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、继承

（1）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 称为子类。

（2）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 函数的作用是可以将子类实例化时获得的参数传入父类的构造函数之中。

3、拷贝

拷贝不是直接赋值

（1）浅拷贝

含义：只拷贝最外面层的拷贝方式
	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 );

（2）深拷贝

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

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 );

杰瘦瘦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端开发之JS-如何创建一个类
Sxiaofang的博客
04-29 963
字面量创建 let person = { name: 'xxx', age: 12, say = function () { console.log('ssss'); } } 直接用对象的方式表示一个类，缺点是每声明一个对象就要创建一次类，代码冗余。 工厂模式 function createObj(name, age) { let obj = new Object(); obj.name = name; obj.age = age; obj.say = fun
学习使用js创建class样式的方法代码整理
最新发布
徊忆羽菲
05-06 333
以上三种方法都可以在JavaScript中创建class样式，你可以根据实际需求选择合适的方法。
this指向
日积月累的博客
04-22 250
前端js中this指向及改变this指向的方法 js中this指向是一个难点，花了很长时间来整理和学习相关的知识点。 一、 this this是JS中的关键字， 它始终指向了一个对象， this是一个指针; 参考博文： JavaScript函数中的this四种绑定形式 this指向及改变this指向的方法 二、 this显示绑定和隐式绑定 this显示绑定 含义： 当一个函数没有明确的调用对...
JavaScript 创建类/对象的几种方式
vivin821017的专栏
02-15 389
一、由一对大括号括起来    var emptyObj = {};    var myObj =    {        'id': 1,        //属性名用引号括起来，属性间由逗号隔开        'name': 'myName'    };    //var m = new myObj(); //不支持 　　不知你注意到对象都是用 var 声明的没有，像上面的代码，就只是简单的声明一个对象，它只有一份拷贝，你不能像实例化类对象一样对它采用new操作，像上面代码的注释部分。这样就极大的限制了对象
JS创建类/对象的几种方式
qq_42189742的博客
08-17 495
在JS中，创建对象（Create Object）并不完全是我们时常说的创建类对象，JS中的对象强调的是一种复合类型，JS中创建对象及对对象的访问是极其灵活的。 JS对象是一种复合类型，它允许你通过变量名存储和访问，换一种思路，对象是一个无序的属性集合，集合中的每一项都由名称和值组成（听起来是不是很 像我们常听说的HASH表、字典、健/值对？），而其中的值类型可能是内置类型(如number,string)，也可能是对象。 一、由一对大括号括起来 var emptyObj = {}; var m
JS高级 day2.zip
12-21
我们还将学习如何使用流行的前端框架和工具，如React、Vue.js和Webpack等，来构建功能强大、响应迅速的现代化网页应用。 这个视频系列旨在帮助你掌握前端开发所需的技能，并能够在实际项目中应用所学的知识。每个...
day10_JavaScript高级1
08-08
1.2.2视频详情1.2.3总结与补充1.2.4课堂提问与练习 Dom的功能 1.2.5习题答案 控制html文档的内容 获取页面标签(元素)对象：Elemen
day03-js高级作业.zip
10-01
day03-js高级作业.zip
day03-js高级.zip
10-01
day03-js高级.zip
day10_JavaScript高级_docx1
08-04
1. 概念：Browser Object Model 浏览器对象模型 * 将浏览器的 1.在 2.定义一个方 3.定义一个定时 1.显 2.倒计时 3.在 1.
console.log 用法
热门推荐
热爱生活~热爱工作~热爱每一天~
11-29 3万+
【转】console.log 用法 标签： 转自http://www.cnblogs.com/ctriphire/p/4116207.html 大家都有用过各种类型的浏览器，每种浏览器都有自己的特色，本人拙见，在我用过的浏览器当中，我是最喜欢Chrome的，因为它对于调试脚本及前端 设计调试都有它比其它浏览器有过之而无不及的地方。可能大家对console.log会有一定的了解，心里难免会想调...
console.log("开始"); console.log(this.setUserperm);
qq_37046350的博客
06-28 495
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
详解JS类概念的实现
weixin_33751566的博客
03-27 304
众所周知，JS并没有类(class)的概念,虽然说ES6开始有了类的概念，但是，这并不是说JS有了像Ruby、Java这些基于类的面向对象语言一样，有了全新的继承模型。ES6中的类，仅仅只是基于现有的原型继承的一种语法糖，下面我们好好分析一下，具体是如何实现的 面向对象思想 在讲正题之前，我们先来讨论一下各种面试题都可能出现的一个问题，什...
js动态创建样式: style和link-实现动态class
呼吸的小鱼博客
11-26 1789
js动态创建样式: style 和 link-实现动态创建class-加载-显示-动态存储表单样式class实现存储显示 function blue(color){  if(document.all){ // document.createStyleSheet(url) window.style=".fontColor{ color: "+color+" }";  document.create...
js实现数据结构（一）实现一个栈类（ES5和ES6两种方式）
敲敲的博客
03-20 958
文章目录1.ES5方法实现“栈”类2.ES6方法实现“栈”类 栈是一种遵从**后进先出（LIFO）**原则的有序集合。新添加的或待删除的元素都保存在栈的 同一端，称作栈顶，另一端就叫栈底。在栈里，新元素都靠近栈顶，旧元素都接近栈底。 1.ES5方法实现“栈”类 我们将创建一个类来表示栈。先声明这个类的构造函数： function Stack() { //各种属性和方法的声明...
js实现定义一个类
justdoit1024
09-25 416
[code="java"] /** * 定义一个类User,js中使用构造函数实现 */ User = function(sname,spass){ //定义属性 this.name = sname; this.pass = spass; } // js通过prototype动态为类添加方法 User.prototype.sayHello = function(...
JavaScript学习总结(十二)——JavaScript编写类
a754315344的博客
06-18 290
JavaScript学习总结(十二)——JavaScript编写类 　　在工作中经常用到JavaScript，今天总结一下JavaScript编写类的几种写法以及这几种写法的优缺点，关于JavaScript编写类的方式，在网上看到很多，而且每个人的写法都不太一样，经常看到的就是以下几种方式。 1、构造函数方式 　　用构造函数模拟"类"，在其内部用this关键字指代实例对象。 基本语法： function 类名(){ this.属性名;//公共属性 var 属性名;//私有属性 ...
day.js 和 mount
08-19
在提供的引用内容中，没有提到day.js和mount的具体含义和用法。但是从引用中可以看出，day.js是一个日历插件，可以用于滑动月份日历的展示。而mount可能是指将day.js插件添加到页面中的过程，具体的使用方法和示例...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值