学习前端第三十四天(call,apply,函数绑定;箭头函数;对象属性配置)

一、call、apply

function fn(x, y) {

            console.log("hello", x, y, this)

        };

1.call方法

作用:调用后执行函数,可以给“this”传参数

        fn.call({ a: 1 }, 1, 2,);

2.apply方法

第一个给“this”传参数,第二个参数需要是数组形式,然后与形式参数一一对应赋值

        fn.apply({ a: 2 }, [9, 3, 4, 5]);

3.区别

call可以传多个参数,apply只能传两个参数,一个对象一个数组

4.借用

利用传对象的特性用call方法对可迭代对象使用数组方法

        const str = "hello";let str2 = [].join.call(str, "-");console.log(str2); // h-e-l-l-o

二、函数绑定bind

1.复制函数,绑定参数

        'use strict'function fn(x, y) {console.log("hello", this, x, y)}const fn2 = fn.bind({ a: 1 })const fn3 = fn.bind({ a: 1 }, 1)const fn4 = fn.bind({ a: 1 }, 1, 2)fn(1, 2);  // 未进行绑定fn1(3, 4); // 绑定好了this参数,传入的值会被赋值给x,yfn2(5);    // 绑定好了this参数和x的值,传入的值会被赋值给yfn3();     // 绑定好了this参数,x的值,y的值

2.复制join方法并绑定方法的this

        const join = [].join.bind("abc");console.log(join("-"));  // a-b-cconsole.log(join(","));  // a,b,cconsole.log(join(";"));   // a;b;c

绑定join处理的字符串,自定义用何种方式连接字符串

三、箭头函数

面试题:

        // 箭头函数没有局部变量“this”,this会向上层找

        // 箭头函数没有“arguments”(收集实际参数)

        // 不能使用new调用

四、对象配置属性

1.属性标志和属性描述符

Object.getOwnPropertyDescriptor 方法允许查询有关属性的 完整 信息。

 Object.getOwnPropertyDescriptors(obj) 方法,一次获取所有属性描述符

  • writable — 如果为 true,则值可以被修改,否则它是只可读的。
  • enumerable — 如果为 true,则会被在循环中列出,否则不会被列出。
  • configurable — 如果为 true,则此属性可以被删除,这些特性也可以被修改,否则不可以。
        const user = {username: "jack",age: 20,};// 对对象的一个属性细节修改,给不存在的属性进行修改会新增改属性Object.defineProperty(user, "username", {value: "ll",writable: false,configurable: false,enumerable: false,})Object.defineProperty(user, "uname", {value: "llwe",writable: false,configurable: false,enumerable: false,})// 可写性;可遍历性;可删除性   console.log(Object.getOwnPropertyDescriptor(user, "username")); // 一次获取所有属性描述符

 Object.defineProperties(obj, descriptors),允许一次定义多个属性。

        // 对当前对象进行批量修改,添加Object.defineProperties(user, {size: {value: 20,writable: false,configurable: true,enumerable: false,},hobby: {value: ["css", "html"]},});

Object.freeze(obj),禁止添加/删除/更改属性。为所有现有的属性设置 configurable: false, writable: false

2.属性的 getter 和 setter

有两种类型的对象属性。

第一种是 数据属性

第二种类型的属性。 访问器属性。用于获取和设置值的函数,但从外部代码来看就像常规属性。

  • get —— 一个没有参数的函数,在读取属性时工作,
  • set —— 带有一个参数的函数,当属性被设置时调用,
let user = {name: "John",surname: "Smith",get fullName() {return `${this.name} ${this.surname}`;},set fullName(value) {[this.name, this.surname] = value.split(" ");}
};// set fullName 将以给定值执行
user.fullName = "Alice Cooper";alert(user.name); // Alice
alert(user.surname); // Cooper

实际应用:

        const user = {gender: 2,get cnGender() {const obj = { 1: "男", 2: "女" };return obj[this.gender]},set cnGender(value) {const obj = { 男: 1, 女: 2 }this.gender = obj[value];}}console.log(user.cnGender);user.cnGender = "男";console.log(user.cnGender);

当读取cnGender时,会根据gender的值输出cnGender;

修改cnGender时,会通过函数对应关系修改gender值,然后输出cnGender时,会根据gender修改的值输出cnGender。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ElementUi中el-table组件使用row-class-name修改指定行颜色

可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class,表明该行处于某种状态。 注意:如果在el-table中使用了stripe这个属性,这个属性是带斑马纹的表格样式,它和row-class-name共存时是没有效果。 注…

【微信开发】微信支付前期准备工作(申请及配置)

1、申请并配置公众号或微信小程序 1.1 账户申请 通过微信公众平台,根据指引申请微信小程序或公众号,申请时需要微信认证,申请流程不在赘述 1.2 信息配置 申请通过后,需进入小程序和公众号内进行信息配置 1.2.1 小程序信息配置…

Mac YOLO V9推理测试(基于ultralytics)

环境: Mac M1 (MacOS Sonoma 14.3.1) Python 3.11PyTorch 2.1.2 一、准备工作 使用YOLO一般都会接触ultralytics这个框架,今天来试试用该框架进行YOLO V9模型的推理。 YOLOv9目前提供了四种模型下载:yolov9-c.pt、yolov9-e.pt、gelan-c.p…

lint 代码规范,手动修复,以及vscode的第三方插件eslint自动修复

ESlint代码规范 不是语法规范,是一种书写风格,加多少空格,缩进多少,加不加分号,类似于书信的写作格式 ESLint:是一个代码检查工具,用来检查你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)…

【管理篇】如何横向沟通?

目录标题 什么是横向沟通?常见沟通问题 如何处理横向沟通中的问题? 什么是横向沟通? 所谓横向沟通,就是和没有直接汇报关系的合作方之间的沟通,指的是与平级间进行的与完成工作有关的交流;横向沟通核心的挑…

mqtt定时脚本

需求描述 给mqtt的topic发送信息 对应的topic接收请求后,执行发送短信指令 信息内容 SMS,10086,102 lua的mqtt里面,截取判断即可 –>可以实现 定时任务, 每月开机一次 发短信? 或者使用开机通知? 定时消费…

Npm Install Docusaurus Demo【npm 安装 docusaurus 实践 】

文章目录 1. 简介2. 前提2.1 安装 git2.2 安装 node 3. 安装4. 项目结构5. 访问5.1 localhost 访问5.2 ip 访问 1. 简介 Docusaurus 是一个facebook的开源项目,旨在帮助开发者构建易于维护和部署的文档网站。它提供了一个简单的方法来创建专业的文档网站&#xff0…

共享旅游卡免费旅游真实反馈,有图有真相?

新伙伴体验,云南昆大丽6天5晚品质双人游,真实反馈!珠海伙伴蔡总,加入千益畅行共享旅游卡团队,自己亲自体验“云南昆大丽6天5晚品质双人游”真实反馈,分享全程内容截图,无半点虚假! …

2024-05-08 postgres-调试及分析-记录

摘要: 2024-05-08 postgres-调试及分析-记录 DDL: 创建库表及插入数据: create database d1;\c d1;create table t1( a int, b int ); create table t2( a int, b int );insert into t1(a,b) values(3,4); insert into t1(a,b) values(5,6);insert into t2(a,b) va…

MongoDB聚合运算符:$trim

MongoDB聚合运算符&#xff1a;$trim 文章目录 MongoDB聚合运算符&#xff1a;$trim语法使用空白字符 举例 $trim用来删除字符串开头和结尾的空白字符&#xff08;包括空值&#xff09;或指定字符。 语法 { $trim: { input: <string>, chars: <string> } }input&…

react经验15:拖拽排序组件dnd-kit的使用经验

应用场景 列表中的成员可鼠标拖拽改变顺序 实施步骤 前置引入 import type { DragEndEvent } from dnd-kit/core import { DndContext } from dnd-kit/core import {arrayMove,/*垂直列表使用verticalListSortingStrategy,横向列表使用horizontalListSortingStrategy*/vert…

springboot引入security,测试接口报Unauthorized

1、报错截图 2、当前项目pom文件引入security <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-security</artifactId><version>2.2.2.RELEASE</version> </dependency> 3、解决…

数据结构之图——探索图论的奥秘

前言 在这篇文章中&#xff0c;我们一起来看看我们生活中都会用到&#xff0c;但却不那么熟悉的数据结构——图&#xff08;英语&#xff1a;graph&#xff09;。我们看下百科定义&#xff1a; 在计算机科学中&#xff0c;图&#xff08;英语&#xff1a;graph&#xff09;是一…

计算机毕业设计 | vue+springboot汽车销售管理系统(附源码)

1&#xff0c;项目介绍 本项目基于spring boot以及Vue开发&#xff0c;前端实现基于PanJiaChen所提供的开源后台项目vue-element-admin改造。 针对汽车销售提供客户信息、车辆信息、订单信息、销售人员管理、财务报表等功能&#xff0c;提供经理和销售两种角色进行管理。 2&…

某MBTI性格测试系统后台Getshell

在淘宝购买了性格测试系统源代码进行环境部署,后进行渗透测试 淘宝源码链接:https://item.taobao.com/item.htm?ftt&id790798788255 (自己学习(代码审计、算法、环境搭建)知识技能提升) 环境准备 集成环境选的是小皮 phpstudy 创建网站,将源代码放入网站根目录配置好数据…

Doris【部署 01】Linux部署MPP数据库Doris稳定版(下载+安装+连接+测试)

本次安装测试的为稳定版2.0.8官方文档 https://doris.apache.org/zh-CN/docs/2.0/get-starting/quick-start 这个简短的指南将告诉你如何下载 Doris 最新稳定版本&#xff0c;在单节点上安装并运行它&#xff0c;包括创建数据库、数据表、导入数据及查询等。 Linux部署稳定版Do…

ElasticSearch的python api以及dev tool方式的基本操作

一、环境要求 根据es服务器版本&#xff0c;下载es的python api包&#xff0c;我们这里的环境为&#xff1a; python3.8, 下载的elastic search版本为7.6.0&#xff0c;安装方式&#xff1a; pip install elasticsearch7.6.0二、es操作及python代码 1、获取es实例&#xff0…

LeetCode 每日一题 2024/5/6-2024/5/12

记录了初步解题思路 以及本地实现代码&#xff1b;并不一定为最优 也希望大家能一起探讨 一起进步 目录 5/6 741. 摘樱桃5/7 1463. 摘樱桃 II5/8 2079. 给植物浇水5/9 2105. 给植物浇水 II5/10 2960. 统计已测试设备5/11 2391. 收集垃圾的最少总时间5/12 5/6 741. 摘樱桃 从起点…

当下是风口的热门兼职副业,月入3万问题不大,附保姆教程!

近年来&#xff0c;短视频行业呈现出迅猛的发展势头&#xff0c;已经成为当下最受欢迎的一种形式。甚至连曾经的电商巨头京东也开始积极布局这一领域&#xff0c;投入巨资20亿元进行深入耕耘。 周周近财&#xff1a;让网络小白少花冤枉钱&#xff0c;赚取第一桶金 不知道您是…

第 8 章 机器人底盘Arduino端入口(自学二刷笔记)

重要参考&#xff1a; 课程链接:https://www.bilibili.com/video/BV1Ci4y1L7ZZ 讲义链接:Introduction Autolabor-ROS机器人入门课程《ROS理论与实践》零基础教程 8.4.2 底盘实现_01Arduino端入口 ros_arduino_bridge/ros_arduino_firmware/src/libraries/ROSArduinoBridge…