JavaScript 进阶

JavaScript 进阶

在掌握了 JavaScript 的基础知识之后,继续深入学习其高级特性和应用技巧将有助于编写更高效、更优雅的代码。本文将详细介绍 JavaScript 的一些进阶概念和技术。

目录

  1. 闭包
  2. 原型与继承
  3. 高级函数
    1. 高阶函数
    2. 柯里化
    3. 函数组合
  4. 异步编程
    1. Promise
    2. async/await
    3. 生成器
  5. 模块化
    1. ES6 模块
    2. CommonJS
  6. 设计模式
    1. 单例模式
    2. 观察者模式
    3. 工厂模式
  7. 性能优化
    1. 减少重绘与重排
    2. 懒加载
    3. 节流与防抖
  8. TypeScript 简介
  9. 测试与调试

闭包

闭包是 JavaScript 中一个强大的特性,允许函数访问其外部作用域的变量。闭包是在函数定义时而不是在函数调用时创建的。

function outerFunction(outerVariable) {return function innerFunction(innerVariable) {console.log("Outer variable: " + outerVariable);console.log("Inner variable: " + innerVariable);}
}const newFunction = outerFunction("outside");
newFunction("inside");

在这个例子中,innerFunction 访问了 outerFunction 的变量 outerVariable,这就是闭包的体现。

原型与继承

JavaScript 是基于原型的面向对象语言,每个对象都有一个原型对象。对象可以从原型对象继承属性和方法。

原型链

每个 JavaScript 对象都有一个 __proto__ 属性,指向其原型对象。这个原型对象也有自己的原型,形成一个原型链。

function Person(name) {this.name = name;
}Person.prototype.greet = function() {console.log("Hello, " + this.name);
}const alice = new Person("Alice");
alice.greet(); // Hello, Alice

继承

可以通过 Object.createclass 关键字实现继承。

class Animal {constructor(name) {this.name = name;}speak() {console.log(this.name + " makes a noise.");}
}class Dog extends Animal {speak() {console.log(this.name + " barks.");}
}const dog = new Dog("Rex");
dog.speak(); // Rex barks.

高级函数

高阶函数

高阶函数是指接受一个或多个函数作为参数,或者返回一个函数作为结果的函数。

function add(a, b) {return a + b;
}function operate(a, b, operation) {return operation(a, b);
}console.log(operate(5, 3, add)); // 8

柯里化

柯里化是将一个多参数函数转换成一系列使用一个参数的函数的技术。

function curryAdd(a) {return function(b) {return a + b;}
}const add5 = curryAdd(5);
console.log(add5(3)); // 8

函数组合

函数组合是将多个函数组合成一个函数,其中每个函数的输出作为下一个函数的输入。

function compose(...functions) {return function(arg) {return functions.reduceRight((acc, fn) => fn(acc), arg);}
}const add1 = x => x + 1;
const double = x => x * 2;const add1AndDouble = compose(double, add1);
console.log(add1AndDouble(3)); // 8

异步编程

Promise

Promise 是一种用于处理异步操作的对象。它表示一个异步操作的最终完成或失败及其结果值。

let promise = new Promise(function(resolve, reject) {setTimeout(function() {resolve("Promise resolved");}, 1000);
});promise.then(function(data) {console.log(data);
}).catch(function(error) {console.error(error);
});

async/await

asyncawait 是基于 Promise 的语法糖,使异步代码看起来像同步代码。

async function fetchData() {let data = await new Promise(function(resolve) {setTimeout(function() {resolve("Data fetched with async/await");}, 1000);});console.log(data);
}fetchData();

生成器

生成器是一种可以在执行过程中暂停和恢复的函数。生成器函数使用 function* 语法。

function* generator() {yield 1;yield 2;yield 3;
}const gen = generator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

模块化

ES6 模块

ES6 引入了模块化机制,允许将代码拆分成多个文件。

// 导出模块(export.js)
export function greet() {console.log("Hello, world!");
}// 导入模块(import.js)
import { greet } from './export.js';
greet(); // Hello, world!

CommonJS

CommonJS 是 Node.js 中使用的模块系统。

// 导出模块(module.js)
module.exports = {greet: function() {console.log("Hello, world!");}
};// 导入模块(main.js)
const { greet } = require('./module');
greet(); // Hello, world!

设计模式

单例模式

单例模式确保一个类只有一个实例,并提供全局访问。

class Singleton {constructor() {if (!Singleton.instance) {Singleton.instance = this;}return Singleton.instance;}
}const instance1 = new Singleton();
const instance2 = new Singleton();
console.log(instance1 === instance2); // true

观察者模式

观察者模式定义对象间的一对多关系,当一个对象的状态发生变化时,所有依赖于它的对象都会收到通知并自动更新。

class Subject {constructor() {this.observers = [];}addObserver(observer) {this.observers.push(observer);}notifyObservers(message) {this.observers.forEach(observer => observer.update(message));}
}class Observer {update(message) {console.log("Received message: " + message);}
}const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();subject.addObserver(observer1);
subject.addObserver(observer2);subject.notifyObservers("Hello, Observers!");

工厂模式

工厂模式用于创建对象的接口,让子类决定实例化哪个类。

class Animal {constructor(name) {this.name = name;}speak() {console.log(this.name + " makes a noise.");}
}class Dog extends Animal {speak() {console.log(this.name + " barks.");}
}class Cat extends Animal {speak() {console.log(this.name + " meows.");}
}class AnimalFactory {createAnimal(type, name) {switch(type) {case 'dog':return new Dog(name);case 'cat':return new Cat(name);default:return new Animal(name);}}
}const factory = new AnimalFactory();
const dog = factory.createAnimal('dog', 'Rex');
dog.speak(); // Rex barks.

性能优化

减少重绘与重排

减少 DOM 的重绘和重排可以显著提高性能。避免频繁地操作 DOM 和使用文档片段(Document Fragment)是常见的方法。

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {const div = document.createElement('div');fragment.appendChild(div);
}
document.body.appendChild(fragment);

懒加载

懒加载是指在需要的时候才加载资源,以提高初始加载性能。

document.addEventListener("scroll", function() {const lazyImages = document.querySelectorAll("img.lazy");lazyImages.forEach(img => {if (img.getBoundingClientRect().top < window.innerHeight

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

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

相关文章

MySQL InnoDB的读写参数优化

MySQL InnoDB的读写参数优化是提升数据库性能的重要手段。以下是对MySQL InnoDB读写参数优化的详细阐述&#xff1a; 一、读参数优化 缓冲池大小&#xff08;innodb_buffer_pool_size&#xff09; 作用&#xff1a;该参数决定了InnoDB存储引擎可以使用的内存大小&#xff0c;…

PHP设计模式-简单工厂模式

核心&#xff1a; 一、定义一个接口类里面写规定好的方法。 interface Message{public function send(array $params);public function getMessage(array $params);public function getCode(array $params);} 二、定义产品类 、产品类继承接口类 class AlliYunSms implements …

Dart sprintf包使用指南:格式化输出的瑞士军刀

Dart sprintf包使用指南&#xff1a;格式化输出的瑞士军刀 简介 sprintf 是Dart语言的一个扩展包&#xff0c;提供了类似于C语言中 sprintf 函数的功能。它允许你格式化字符串&#xff0c;支持占位符和各种格式化选项&#xff0c;非常适合于创建具有特定格式的日志、用户界面…

java实战项目--拼图小游戏(附带全套源代码)

个人主页VON 所属专栏java实战项目游戏参考黑马程序员 一、效果展示 二、功能介绍 游戏中所有的图片以及代码均已打包&#xff0c;玩家直接安装游戏即可&#xff0c;不用idea也可以畅玩。 游戏功能比较单一&#xff0c;只有简单的拼图功能。 a&#xff1a;展示原图重新游戏&a…

《汇编语言 基于x86处理器》- 读书笔记 - 第3章-汇编语言基础

《汇编语言 基于x86处理器》- 读书笔记 - 第3章-汇编语言基础 3.1 基本语言元素3.1.1 第一个汇编语言程序常见汇编语言调用规范 3.1.2 整数常量&#xff08;基数、字面量&#xff09;3.1.3 整型常量表达式3.1.4 实数常量十进制实数十六进制实数&#xff08;编码实数&#xff09…

Netty技术全解析:SimpleChannelInboundHandler详解

Netty是一个高性能、异步事件驱动的NIO框架&#xff0c;它提供了对TCP、UDP和文件传输的支持&#xff0c;并且能够简化网络应用程序的开发过程。在Netty中&#xff0c;ChannelInboundHandler接口用于处理入站事件&#xff0c;即外部数据或操作进入Netty应用程序时的事件。而Sim…

USB 2.0 协议专栏之 USB 2.0 概述(一)

前言&#xff1a;本篇博客为手把手教学的 USB 2.0 协议栈类精品博客&#xff0c;该专栏博客侧重针对 USB 2.0 协议进行讲解。Universal Serial Bus 作为如今最常见的通信接口&#xff0c;被广泛应用于&#xff1a;Keyboard、Mouse、Communication Device Class 和 Mass Storage…

Linux操作系统 -socket网络通信

同一台主机之间的进程 1.古老的通信方式 无名管道 有名管道 信号 2、IPC对象通信 system v 消息队列 共享内存 信号量集 由于不同主机间进程通信 3.socket网络通信 国际网络体系结构&#xff1a; 七层OSI模型(理论…

达梦数据库的dmap服务介绍

达梦数据库的dmap服务介绍 达梦数据库的dmap服务是一个关键的守护进程&#xff0c;主要负责以下功能和作用&#xff1a; 连接管理&#xff1a;dmap服务负责监听客户端的连接请求&#xff0c;并管理这些连接。它支持多种通信协议&#xff0c;如TCP/IP&#xff0c;确保客户端能够…

Atcoder 364-C - Minimum Glutton

Problem Statement There are N dishes, and the ii-th dish has a sweetness of Ai​ and a saltiness of Bi​. Takahashi plans to arrange these N dishes in any order he likes and eat them in that order. He will eat the dishes in the arranged order, but he wi…

“论企业集成架构设计及应用”写作框架,软考高级论文,系统架构设计师论文

原创范文 论企业集成架构设计及应用企业集成架构(Enterprise Integration Arhitecture&#xff0c;EIA) 是企业集成平台的核心&#xff0c;也是解决企业信息孤岛问题的关键。企业集成架构设计包括了企业信息、业务过程、应用系统集成架构的设计。实现企业集成的技术多种多样&a…

什么是 Windows 服务

什么是 Windows 服务 Windows 服务是 Windows 操作系统的核心。它们控制着操作系统的运行&#xff0c;定义了图形用户界面&#xff08;GUI&#xff09;与系统硬件之间的通信以及其他许多功能。没有这些服务&#xff0c;Windows 操作系统将无法正常运行。 对普通用户而言&…

【人工智能】人工智能概述(二)人工智能的关键技术

文章目录 一. 机器学习与深度学习1. 机器学习2. 深度学习 二. 计算机视觉1. 基本概念和分类2. 未来计算机视觉面临的主要挑战 三. 自然语言处理1. 基本概念与分类2. 自然语言处理面临的四大挑战 四. 知识图谱1. 基本概念2. 应用场景 五. SLAM技术1. 基本概念2. 主要分类 六. 人…

CentOS和docker下安装acvitity字体

CentOS 下 activity安装字体&#xff1a;/usr/share/fonts/ 安装服务器字体: cd /usr/share/fonts/ 然后把字体文件拷贝到这个文件夹下&#xff0c;执行如下命令&#xff1a; mkfontscale mkfontdir fc-cache 查询字体是否安装成功&#xff1a; fc-list :langzh 如果系统…

DSP教学实验箱_数字图像处理操作_案例分享:5-13 灰度图像二值化

一、实验目的 学习灰度图像二值化的原理&#xff0c;掌握图像的读取方法&#xff0c;并实现在LCD上显示二值化前后的图像。 二、实验原理 图像二值化 图像的二值化处理就是将图像上的点的灰度置为 0 或 255&#xff0c;也就是将整个图像呈现出明显的黑白效果。即将 256 个亮…

决策树基础:深入理解其核心工作原理

决策树基础&#xff1a;深入理解其核心工作原理 目录 引言决策树的基本概念 什么是决策树决策树的组成部分 决策树的工作原理 特征选择信息增益基尼指数 决策树的生成 ID3 算法C4.5 算法CART 算法 决策树的剪枝 预剪枝后剪枝 决策树的优缺点 优点缺点 决策树的实现 Python 代…

AJAX(1)——axios库的使用

什么是AJAX? AJAX是异步的JavaScript和XML。简单来说&#xff0c;就是使用XMLHttpRequest对象与服务器通信。它可以使用JSON,XML,HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它异步的特性&#xff0c;也就是说它可以在不重新刷新页面的情况下与服务器通信&#…

昇思25天学习打卡营第25天|LLM应用-基于MindNLP+MusicGen生成自己的个性化音乐

打卡 目录 打卡 应用任务简介 生成音乐 预训练权重模型下载 无提示生成 文本提示生成 音频提示生成 生成配置 应用任务简介 MusicGen 来自 Meta AI 的 Jade Copet 等人提出的基于单个语言模型&#xff08;LM&#xff09;的音乐生成模型&#xff0c;能够根据文本描述或…

CompletableFuture异步编程多任务执行和简单场景使用

CompletableFuture提供了许多回调函数&#xff0c;来处理异步编程 获取任务结果方法 // 如果完成则返回结果&#xff0c;否则就抛出具体的异常 public T get() throws InterruptedException, ExecutionException // 最大时间等待返回结果&#xff0c;否则就抛出具体异常 publ…

NFS服务器环境搭建

1、什么是NFS ● 定义&#xff1a; NFS是一种在计算机系统之间共享文件和目录的协议&#xff0c;最初由Sun Microsystems开发&#xff0c;现在已经成为广泛使用的网络文件系统之一。 ● 核心功能&#xff1a; 通过网络&#xff08;特别是TCP/IP网络&#xff09;实现文件共享…