web学习笔记(三十二)

2024-03-16 17:28
文章标签 学习 笔记 web 三十二

本文主要是介绍web学习笔记(三十二),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

1.函数的call、apply、bind方法 

1.1call、apply、bind的相同点

1.2call、apply、bind的不同点

1.3call、apply、bind的使用场景

2. 对象的深拷贝

2.1对象的浅拷贝

2.1对象的深拷贝


1.函数的call、apply、bind方法 

1.1call、apply、bind的相同点

  1. 在没有传参数时,三者的this指向都是window。
  2. 有参数时,第一个参数必须传,而且必须是对象类型,此时this指向已经改变为传过来的对象
      function show(a, b) {console.log(a, b);console.log(this);}show();//this是windowshow.call();//this是windowshow.apply();//this是windowvar fn = show.bind(); //有返回值,返回和原函数长得一样的新函数。可以show.bind()()调用 ,也可以fn()fn()//this是window

1.2call、apply、bind的不同点

  1. 调用方法:函数名.call();和 函数名.apply();调用方法一样,都是在后方加一个括号即可。而bind需要跟两个括号eg:函数名.bind()()
  2. 传参数的的形式不同:   函数名.call(对象,实参1,实参2);     函数名.apply(对象,[实参1,实参2]); 函数名.bind(对象,实参1,实参2)();  apply的第二个参数是以数组的形式来传递的。

1.3call、apply、bind的使用场景

  • call:借助构造函数实现继承
        <script>function Fatner(x, y) {this.x = x;this.y = y;}Fatner.prototype.say = function () {console.log('aaa');}function Son(x, y, z) {Fatner.call(this, x, y);console.log(this); //如果不回指则this指向Fatherthis.z = z;}Son.prototype.bbb = function () {console.log('bbb');}Son.prototypre = Object.create(Fatner.prototype); //将父的方法复制过来。Son.prototype.constructon = Son //进行回指操作,表示Son的构造器为Son。Son(1, 2, 3);</script>
  • apply: 求数组的最大值或最小值  
     var max = Math.max.apply(Math, [10, 20, 30, 40, 23]);console.log(max);
  •  bind:  在不调用函数的情况下,改变this的指向。
        <button>确定</button><script>var btn = document.querySelector('button');btn.addEventListener('click', function () {this.disabled = true;setTimeout(function () {this.disabled = false;}.bind(this), 1000)})</script>

2. 对象的深拷贝

        深浅拷贝最大的区别就是对一个对象进行修改,另一个会不会也被修改,如果两个对象同时进行了修改那就是进行了浅拷贝的操作,如果另一个没有发生改变,那就是进行了深拷贝的操作。数组和对象都有深浅拷贝的概念。

2.1对象的浅拷贝

可以利用 Object.assign()进行对象的浅拷贝操作。

    <script>obj = {name: 'zhangzhang',age: '20',arr: [12, 34, 765, [11, 55], {a: 'aaa',b: 'bbb'}]}var obj1 = Object.assign(obj);obj.name = 'lili';obj1.arr[3][0] = 88;console.log(obj1, obj);</script>

2.1对象的深拷贝

对象的深拷贝有三种方式

     (1)使用JSON.stringify() 和JSON.parse()将对象先转成JSON格式,再转回来就完成了深拷贝的操作。

var obj1= JSON.parse(JSON.stringify(obj) )

     (2)Lodash  官网,直接引用一个js文件过来,然后用里面的var obj1= _.cloneDeep(obj);

    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script> <script>obj = {name: 'zhangzhang',age: '20',arr: [12, 34, 765, [11, 55], {a: 'aaa',b: 'bbb'}]}var obj2 = _.cloneDeep(obj);obj.name = 'lili';obj2.arr[3][0] = 88;console.log(obj2, obj);</script>

      (3用递归来完成(原生方法)

    <script>obj = {name: 'zhangzhang',age: '20',arr: [12, 34, 765, [11, 55], {a: 'aaa',b: 'bbb'}]}function copy(obj) {if (typeof obj != 'object') {return obj;}var newobj = obj instanceof Array ? [] : {};for (var k in obj) {newobj[k] = copy(obj[k])}return newobj;}var obj3 = copy(obj);obj.name = 'lili';obj3.arr[3][0] = 88;console.log(obj3, obj);</script>

这篇关于web学习笔记(三十二)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/816192

相关文章

JSON Web Token在登陆中的使用过程

《JSONWebToken在登陆中的使用过程》:本文主要介绍JSONWebToken在登陆中的使用过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录JWT 介绍微服务架构中的 JWT 使用结合微服务网关的 JWT 验证1. 用户登录,生成 JWT2. 自定义过滤

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一:修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加

Java进阶学习之如何开启远程调式

《Java进阶学习之如何开启远程调式》Java开发中的远程调试是一项至关重要的技能,特别是在处理生产环境的问题或者协作开发时,:本文主要介绍Java进阶学习之如何开启远程调式的相关资料,需要的朋友... 目录概述Java远程调试的开启与底层原理开启Java远程调试底层原理JVM参数总结&nbsMbKKXJx

web网络安全之跨站脚本攻击(XSS)详解

《web网络安全之跨站脚本攻击(XSS)详解》:本文主要介绍web网络安全之跨站脚本攻击(XSS)的相关资料,跨站脚本攻击XSS是一种常见的Web安全漏洞,攻击者通过注入恶意脚本诱使用户执行,可能... 目录前言XSS 的类型1. 存储型 XSS(Stored XSS)示例:危害:2. 反射型 XSS(Re

Java深度学习库DJL实现Python的NumPy方式

《Java深度学习库DJL实现Python的NumPy方式》本文介绍了DJL库的背景和基本功能,包括NDArray的创建、数学运算、数据获取和设置等,同时,还展示了如何使用NDArray进行数据预处理... 目录1 NDArray 的背景介绍1.1 架构2 JavaDJL使用2.1 安装DJL2.2 基本操

解决JavaWeb-file.isDirectory()遇到的坑问题

《解决JavaWeb-file.isDirectory()遇到的坑问题》JavaWeb开发中,使用`file.isDirectory()`判断路径是否为文件夹时,需要特别注意:该方法只能判断已存在的文... 目录Jahttp://www.chinasem.cnvaWeb-file.isDirectory()遇

JavaWeb-WebSocket浏览器服务器双向通信方式

《JavaWeb-WebSocket浏览器服务器双向通信方式》文章介绍了WebSocket协议的工作原理和应用场景,包括与HTTP的对比,接着,详细介绍了如何在Java中使用WebSocket,包括配... 目录一、概述二、入门2.1 POM依赖2.2 编写配置类2.3 编写WebSocket服务2.4 浏

Spring常见错误之Web嵌套对象校验失效解决办法

《Spring常见错误之Web嵌套对象校验失效解决办法》:本文主要介绍Spring常见错误之Web嵌套对象校验失效解决的相关资料,通过在Phone对象上添加@Valid注解,问题得以解决,需要的朋... 目录问题复现案例解析问题修正总结  问题复现当开发一个学籍管理系统时,我们会提供了一个 API 接口去

使用IntelliJ IDEA创建简单的Java Web项目完整步骤

《使用IntelliJIDEA创建简单的JavaWeb项目完整步骤》:本文主要介绍如何使用IntelliJIDEA创建一个简单的JavaWeb项目,实现登录、注册和查看用户列表功能,使用Se... 目录前置准备项目功能实现步骤1. 创建项目2. 配置 Tomcat3. 项目文件结构4. 创建数据库和表5.

手把手教你idea中创建一个javaweb(webapp)项目详细图文教程

《手把手教你idea中创建一个javaweb(webapp)项目详细图文教程》:本文主要介绍如何使用IntelliJIDEA创建一个Maven项目,并配置Tomcat服务器进行运行,过程包括创建... 1.启动idea2.创建项目模板点击项目-新建项目-选择maven,显示如下页面输入项目名称,选择