当前位置：首页 > article >正文

42.[前端开发-JavaScript高级]Day07-手写apply-call-bind-块级作用域

article 2026/1/18 10:32:09

手写apply-call-bind

<!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"><title>Document</title>
</head>
<body><script>// new Function()// foo.__proto__ === Function.prototypefunction foo(name, age) {console.log(this, name, age)}// foo函数可以通过apply/call// foo.apply("aaa", ["why", 18])// foo.call("bbb", "kobe", 30)// 1.给函数对象添加方法: hyapplyFunction.prototype.hyapply = function(thisArg, otherArgs) {// this -> 调用的函数对象// thisArg -> 传入的第一个参数, 要绑定的this// console.log(this) // -> 当前调用的函数对象// this.apply(thisArg)thisArg.fn = this// 1.获取thisArg, 并且确保是一个对象类型thisArg = (thisArg === null || thisArg === undefined)? window: Object(thisArg)// thisArg.fn = thisObject.defineProperty(thisArg, "fn", {enumerable: false,configurable: true,value: this})thisArg.fn(...otherArgs)delete thisArg.fn}// foo.hyapply({ name: "why" }, ["james", 25])// foo.hyapply(123, ["why", 18])// foo.hyapply(null, ["kobe", 30])// 2.给函数对象添加方法: hycallFunction.prototype.hycall = function(thisArg, ...otherArgs) {// 1.获取thisArg, 并且确保是一个对象类型thisArg = (thisArg === null || thisArg === undefined)? window: Object(thisArg)// thisArg.fn = thisObject.defineProperty(thisArg, "fn", {enumerable: false,configurable: true,value: this})thisArg.fn(...otherArgs)delete thisArg.fn}foo.hycall({ name: "why", fn: "abc" }, "james", 25)foo.hycall(123, "why", 18)foo.hycall(null, "kobe", 30)</script></body>
</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"><title>Document</title>
</head>
<body><script>// new Function()// foo.__proto__ === Function.prototypefunction foo(name, age) {console.log(this, name, age)}// foo函数可以通过apply/call// foo.apply("aaa", ["why", 18])// foo.call("bbb", "kobe", 30)// 1.封装思想// 1.1.封装到独立的函数中function execFn(thisArg, otherArgs, fn) {// 1.获取thisArg, 并且确保是一个对象类型thisArg = (thisArg === null || thisArg === undefined)? window: Object(thisArg)// thisArg.fn = thisObject.defineProperty(thisArg, "fn", {enumerable: false,configurable: true,value: fn})// 执行代码thisArg.fn(...otherArgs)delete thisArg.fn}// 1.2. 封装原型中Function.prototype.hyexec = function(thisArg, otherArgs) {// 1.获取thisArg, 并且确保是一个对象类型thisArg = (thisArg === null || thisArg === undefined)? window: Object(thisArg)// thisArg.fn = thisObject.defineProperty(thisArg, "fn", {enumerable: false,configurable: true,value: this})thisArg.fn(...otherArgs)delete thisArg.fn}// 1.给函数对象添加方法: hyapplyFunction.prototype.hyapply = function(thisArg, otherArgs) {this.hyexec(thisArg, otherArgs)}// 2.给函数对象添加方法: hycallFunction.prototype.hycall = function(thisArg, ...otherArgs) {this.hyexec(thisArg, otherArgs)}foo.hyapply({ name: "why" }, ["james", 25])foo.hyapply(123, ["why", 18])foo.hyapply(null, ["kobe", 30])foo.hycall({ name: "why" }, "james", 25)foo.hycall(123, "why", 18)foo.hycall(null, "kobe", 30)</script></body>
</html>

ES6~ES13新特性（一）

1 ECMA新描述概念

新的ECMA代码执行描述

词法环境（Lexical Environments）

LexicalEnvironment和VariableEnvironment

环境记录（Environment Record）

新ECMA描述内存图

2 let、const的使用

let/const基本使用

<!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"><title>Document</title>
</head>
<body><script>// ES6之前var message1 = "Hello World"message1 = "Hello Coderwhy"message1 = "aaaaa"console.log(message1)// ES6开始// 1.letlet message2 = "你好, 世界"message2 = "你好, why"message2 = 123console.log(message2)// 2.const// const message3 = "nihao, shijie"// message3 = "nihao, why"// 赋值引用类型const info = {name: "why",age: 18}// info = {}info.name = "kobe"console.log(info)</script></body>
</html>

let/const作用域提升

<!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"><title>Document</title>
</head>
<body><script>// 1.var声明的变量会进行作用域的提升// console.log(message)// var message = "Hello World"// 2.let/const声明的变量: 没有作用域提升// console.log(address)console.log(address)let address = "广州市"const info = {}</script></body>
</html>

暂时性死区 (TDZ)

<!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"><title>Document</title>
</head>
<body><script>// 1.暂时性死区// function foo() {//   console.log(bar, baz)//   console.log("Hello World")//   console.log("你好 世界")//   let bar = "bar"//   let baz = "baz"// }// foo()// 2.暂时性死区和定义的位置没有关系, 和代码执行的顺序有关系// function foo() {//   console.log(message)// }// let message = "Hello World"// foo()// console.log(message)// 3.暂时性死区形成之后, 在该区域内这个标识符不能访问let message = "Hello World"function foo() {console.log(message)const message = "哈哈哈哈"}foo()</script></body>
</html>

let/const有没有作用域提升呢？

Window对象添加属性

<!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"><title>Document</title>
</head>
<body><script>// 1.var定义的变量是会默认添加到window上的// var message = "Hello World"// var address = "广州市"// console.log(window.message)// console.log(window.address)// 2.let/const定义的变量不会添加到window上的// let message = "Hello World"// let address = "广州市"// console.log(window.message)// console.log(window.address)// 3.let/var分别声明变量var message = "Hello World"let adress = "广州市"function foo() {debugger}foo()</script></body>
</html>

3 块级作用域的使用

var的块级作用域

let/const的块级作用域

<!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"><title>Document</title>
</head>
<body><script>// 1.在ES5以及之前, 只有全局和函数会形成自己的作用域// 代码块// function foo() {//   console.log("Hello World")// }// {//   var message = "Hello World"// }// console.log(message)// 2.从ES6开始, 使用let/const/function/class声明的变量是有块级作用域// console.log(message)// foo(){var message = "Hello World"let age = 18const height = 1.88class Person {}function foo() {console.log("foo function")}}// console.log(age)// console.log(height)// const p = new Person()foo()</script></body>
</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"><title>Document</title>
</head>
<body><button>按钮0</button><button>按钮1</button><button>按钮2</button><button>按钮3</button><script>// 1.形成的词法环境// var message = "Hello World"// var age = 18// function foo() {}// let address = "广州市"// {//   var height = 1.88//   let title = "教师"//   let info = "了解真相~"// }// 2.监听按钮的点击const btnEls = document.querySelectorAll("button")// [btn1, btn2, btn3, btn4]// for (var i = 0; i < btnEls.length; i++) {//   var btnEl = btnEls[i];//   // btnEl.index = i//   (function(m) {//     btnEl.onclick = function() {//       debugger//       console.log(`点击了${m}按钮`)//     }//   })(i)// }for (let i = 0; i < btnEls.length; i++) {const btnEl = btnEls[i];btnEl.onclick = function() {console.log(`点击了${i}按钮`)}}// console.log(i)</script></body>
</html>

3 let、const和var区别

var、let、const的选择

5 模板字符串的详解

字符串模板基本使用

标签模板字符串使用

<!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"><title>Document</title>
</head>
<body><script>const name = "why"const age = 18// 1.基本用法// 1.1.ES6之前// const info = "my name is" + name + ", age is " + age// 1.2.ES6之后const info = `my name is ${name}, age is ${age}`console.log(info)// 2.标签模板字符串的用法function foo(...args) {console.log("参数:", args)}// foo("why", 18, 1.88)foo`my name is ${name}, age is ${age}, height is ${1.88}`</script></body>
</html>

React的styled-components库

6 ES6函数的增强用法

函数的默认参数

函数默认值的补充

函数的剩余参数

函数箭头函数的补充

展开语法

数值的表示

Symbol的基本使用

Symbol作为属性名

相同值的Symbol

42.[前端开发-JavaScript高级]Day07-手写apply-call-bind-块级作用域

手写apply-call-bind <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevi…...

编程日记 2026/1/10 8:10:25

ObjectInputStream 终极解析与记忆指南

ObjectInputStream 终极解析与记忆指南一、核心本质 ObjectInputStream 是 Java 提供的对象反序列化流，继承自 InputStream，用于读取由ObjectOutputStream序列化的Java对象。核心特性速查表特性说明继承链InputStream → ObjectInputStream核心功能实现Java对象反序列化…...

编程日记 2025/12/1 11:48:59

数据结构有哪些类型（对于数据结构的简述）

在学习计算机时，数据结构是不可忽视的一点，从考研时的408课程，再到工作中编写软件，网站，要想在计算机领域站住脚跟，数据结构是必备的在这里，我对于数据结构进行了汇总，并简要描述&…...

编程日记 2025/11/30 22:15:27

Vscode 插件开发

文章目录 1、使用vscode官方插件生成框架，下载脚手架2、使用脚手架初始化项目，这里我选择的是js3、生成的文件结构如下，重要的就是以下两个文件4、代码5、打包使用6、发布官网地址7、publisher ID undefined provided in the extension manif…...

编程日记 2026/1/11 17:07:46

C# string和其他引用类型的区别

在C#中，字符串（String）和其他引用类型（Reference Types）之间有几个关键的区别，这些区别主要体现在它们的内存管理、赋值行为以及使用方式上。 1. 内存管理字符串（String）&#xff1…...

编程日记 2025/12/2 8:09:59

添加一个外部时钟芯片这里多了一个选项复制drv_rtc.c，重命名为drv_rtc_ds1307.c 添加到工程中 /*** @file drv_rtc_ds1307.c* @brief * @author jiache (wanghuan3037@fiberhome.com)* @version 1.0* @date 2025-01-08* * @copyright Copyright (c) 2025 58* */ #...

编程日记 2026/1/10 8:10:55

常见的低代码策略整理

低代码策略通过简化开发流程、降低技术门槛、提升效率，帮助用户快速构建灵活可靠的应用。这些策略的核心优势体现在以下方面： 快速交付与降本增效减少编码需求：通过可视化配置（如变量替换、表达式函数）替代传统编码…...

编程日记 2026/1/10 8:10:41

从彩色打印单行标准九九表学习〖代码情书〗的书写范式（Python/DeepSeek）

写给python终端的情书，学习代码设计/书写秘笈。笔记模板由python脚本于2025-04-17 12:49:08创建，本篇笔记适合有python编程基础的coder翻阅。【学习的细节是欢悦的历程】博客的核心价值：在于输出思考与经验，而不仅仅是知识的简…...

编程日记 2026/1/10 8:10:50

QML与C++：基于ListView调用外部模型进行增删改查（附自定义组件）

目录引言相关阅读项目结构文件组织核心技术实现1. 数据模型设计联系人项目类 (datamodel.h)数据模型类 (datamodel.h)数据模型实现 (datamodel.cpp) 2. 主程序入口点 (main.cpp)3. 主界面设计 (Main.qml)4. 联系人对话框 (ContactDialog.qml)5. 自定义组件CustomTextField.qm…...

编程日记 2026/1/11 11:35:40

postman莫名奇妙报错，可能是注释引起的。postman 过滤请求体中的注释。

postman莫名奇妙报错，可能是注释引起的。postman 过滤请求体中的注释。 1、问题描述2、问题分析3、解决方法 1、问题描述 postman http请求测试时，如果在请求体中添加了注释，那么这个注释会被带到服务端执行，导致服务端接口返回报…...

编程日记 2026/1/10 8:10:29

扩增子分析|基于R语言microeco包进行微生物群落网络分析（network网络、Zi-Pi关键物种和subnet子网络图）

一、引言 microeco包是福建农林大学姚敏杰教授团队开发的扩增子测序集成分析。该包综合了扩增子测序下游分析的多种功能包括群落组成、多样性、网络分析、零模型等等。通过简单的几行代码可实现复杂的分析。因此，microeco包发表以来被学界广泛关注，截止2…...

编程日记 2026/1/10 8:10:57

中间件--ClickHouse-4--向量化执行（什么是向量？为什么向量化执行的更快？）

1、向量（Vector）的概念 （1）、向量的定义向量：在计算机科学中，向量是一组同类型数据的有序集合，例如一个包含多个数值的数组。在数据库中，向量通常指批量数据（如一列数…...

编程日记 2026/1/10 8:11:01

TDengine 存储引擎剖析：数据文件与索引设计（一）

TDengine 存储引擎简介在物联网、工业互联网等快速发展的今天，时间序列数据呈爆发式增长。这些数据具有产生频率高、依赖采集时间、测点多信息量大等特点，对数据存储和处理提出了极高要求。TDengine 作为一款高性能、分布式、支持 SQL 的时序数据库&am…...

编程日记 2025/12/1 17:40:54

【kubernetes】pod.spec.containers.ports的介绍

目录 1. 说明2. 基本结构3. 字段说明4. 使用场景5. 示例6. 注意事项 1. 说明 1.在 Kubernetes 中，pod.spec.containers.ports 是 Pod 定义中用于配置容器端口映射的字段，其作用是声明容器需要监听的端口以及如何将这些端口暴露给 Pod 的外部访问。 2. …...

编程日记 2025/12/14 20:47:11

【SpringBoot+Vue自学笔记】001

跟着这位老师学习的：https://www.bilibili.com/video/BV1nV4y1s7ZN?vd_sourceaf46ae3e8740f44ad87ced5536fc1a45 前后端开发技术的全栈课程： Java EE企业级框架：SpringBootMyBatisPlus Web前端核心框架：VueElement UI 公共云…...

编程日记 2026/1/10 8:11:05

第十节：性能优化-如何排查组件不必要的重复渲染？

工具：React DevTools Profiler 方法：memo、shouldComponentUpdate深度对比 React 组件性能优化：排查与解决重复渲染问题指南一、定位性能问题：React DevTools 高级用法使用 React Developer Tools Profiler 精准定位问题组件&…...

编程日记 2026/1/12 15:19:35

MATLAB项目实战（一）

题目： 某公司有6个建筑工地要开工，每个工地的位置（用平面坐标系a，b表示，距离单位：km）及水泥日用量d(t)由下表给出．目前有两个临时料场位于A(5,1)，B(2,7)，日储…...

编程日记 2026/1/15 3:47:16

spring boot 文件下载

1.添加文件下载工具依赖 Commons IO is a library of utilities to assist with developing IO functionality. <dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.6</version> </depe…...

编程日记 2026/1/12 14:16:11

HTTP 2.0 协议特性详解

1. 使用二进制协议，简化传输的复杂性，提高了效率 2. 支持一个 TCP 链接发起多请求，移除 pipeline HTTP/2 移除了 HTTP/1.1中的管道化（pipeline）机制，转而采用多路复用（Multiplexing&#xff0…...

编程日记 2025/12/5 0:27:58

微服务链路追踪：SleuthZipkin

文章目录 Sleuth & Zipkin一、Sleuth\&Zipkin介绍二、搭建环境三、Sleuth入门操作四、Zipkin搭建及操作五、RabbitMQ方式发送信息六、Elasticsearch持久化 SpringBootAdmin一、Actuator介绍二、Actuator快速入门三、SpringBootAdmin介绍四、SpringBootAdmin快速入门4.1…...

编程日记 2026/1/12 15:54:14

HTML语义化与无障碍设计

HTML 语义化与无障碍设计：构建包容且高效的网页体验引言在我的前端开发学习旅程中，起初将 HTML 仅视为页面布局的工具，大量使用无语义的 <div> 和 <span>。直到在一篇技术博客当中了解到，作者在一次团队项目中&am…...

编程日记 2026/1/5 8:26:42

java面试篇 4.9（mybatis+微服务+线程安全+线程池）

目录 mybatis： 1、mybatis的执行流程 2、mybatis是否支持延迟加载？ 当我们需要去开启全局的懒加载时： 3、mybatis的一级和二级缓存微服务 1、springcloud五大组件有哪些 2、服务注册和发现是什么意思？springcloud如何实现…...

编程日记 2026/1/10 8:11:26

基于电子等排体的3D分子生成模型 ShEPhERD - 评测

一、背景介绍 ShEPhERD 是一个由 MIT 开发的一个 3D 相互作用感知的 ligand-based的分子生成模型，以 arXiv 预印本的形式发表于 2024 年，被ICLR2025 会议接收。文章链接：https://openreview.net/pdf?idKSLkFYHlYg ShEPhERD 是一种基于去噪扩…...

编程日记 2026/1/12 15:29:56

极狐GitLab 功能标志详解

极狐GitLab 是 GitLab 在中国的发行版，关于中文参考文档和资料有： 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网功能标志 (BASIC ALL) 使用功能标志，您可以将应用程序的新功能小批量部署到生产环境中。您可以为部分用户打开和…...

编程日记 2025/12/1 7:27:08

GR00T N1：面向通用类人机器人的开放基础模型

摘要通用型机器人需要具备多功能的身体和智能的大脑。近年来，类人机器人的发展在构建人类世界中的通用自主性硬件平台方面展现出巨大潜力。一个经过大量多样化数据源训练的机器人基础模型，对于使机器人能够推理新情况、稳健处理现实世界的多变性以及快…...

编程日记 2026/1/13 7:33:29

QT简单实例

QT简单实例 QT简单实例一：通过拖动创建1.创建工程2.拖动控件实现响应3.文件目录3.1 TestQDialog.pro3.2 main.cpp3.3 dialog.h3.4 dialog.cpp 二：通过动态创建1.创建工程2.文件目录2.1 TestQDialogSelf.pro2.2 main.cpp2.3 dialog.h2.4 dialog.cpp QT简单…...

编程日记 2026/1/12 23:17:48

Linux：初学者的简单指令

文章目录 pwd（Print working directory）whoamilsmkdir ~~cd ~~touch ~~rm ~~ 充当后端服务,我们用xshell工具来进行操作其中Linux文件是/目录/目录/目录或文件/来表示的（其中目录可以看作是windows操作系统的文件夹，只是Linux中…...

编程日记 2026/1/9 20:20:54

zynq7020 ubuntu_base 跟文件系统

整体流程制作 ubuntu_base 镜像运行 petalinux 构建的 ramdisk 系统用 ramdisk 系统把 ubuntu_base 镜像烧录到 emmc从 emmc 跟文件系统启动内核制作 ubuntu_base 镜像制作 ubuntu_base 镜像 sudo apt-get install qemu-user-static # 安装 q…...

编程日记 2025/12/4 2:34:24

大数据如何让供应链更丝滑？一场数据驱动的效率革命

大数据如何让供应链更丝滑？一场数据驱动的效率革命在这个一切讲求“快准狠”的时代，供应链的管理直接决定了企业的竞争力。你能想到吗？一个订单的配送延迟，可能让客户流失；一个采购决策的失误，可能导致库…...

编程日记 2025/12/1 15:34:21

端侧大模型综述On-Device Language Models: A Comprehensive Review

此为机器翻译，仅做个人学习使用设备端语言模型：全面回顾 DOI：10.48550/arXiv.2409.00088 1 摘要大型语言模型 （LLM） 的出现彻底改变了自然语言处理应用程序，由于减少延迟、数据本地化和个性化用户体验…...

编程日记 2026/1/10 8:31:15