JavaScript学习—JavaScript高级

原型链和继承

在 JavaScript 中,每个对象都有一个原型(prototype),这个原型指向另一个对象。这个链式的原型关系被称为原型链。当访问一个对象的属性时,如果该对象没有该属性,它会沿着原型链向上查找,直到找到该属性或到达原型链的末端。

// 创建一个构造函数 Person
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 添加一个方法到 Person.prototype
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am${this.age} years old.`);
};

// 创建一个 Person 实例
const person1 = new Person("Alice", 30);

// 调用 greet 方法
person1.greet(); // Hello, my name is Alice and I am 30 years old.

继承可以通过原型链实现,也可以通过原型式继承(如 Object.create())、组合继承(使用原型链和构造函数)等方式实现。

作用域链和闭包

作用域链是 JavaScript 引擎在执行代码时创建的一个链式结构,用于在函数内部访问变量。这个链从当前函数的作用域开始,然后是外部函数的作用域,最后是全局作用域。

闭包是一个函数及其作用域内的变量组成的组合,即使外部函数执行完毕,闭包中的变量也不会被销毁。

function outerFunction() {
  var outerVariable = "I am outer";

  function innerFunction() {
    console.log(outerVariable); // 访问外部函数的变量
  }

  return innerFunction;
}

const inner = outerFunction();
inner(); // I am outer

异步编程

回调函数是一种在异步操作完成后执行的函数。

function fetchData(callback) {
  setTimeout(() => {
    callback("Data fetched successfully!");
  }, 2000);
}

fetchData((data) => {
  console.log(data);
});

Promise 是一种对象,用于异步操作的结果。

const fetchData = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched successfully!");
    }, 2000);
  });

fetchData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

async/await 是 ES2017 引入的语法糖,用于处理 Promise。

async function fetchData() {
  try {
    const data = await new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("Data fetched successfully!");
      }, 2000);
    });
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

ES6+ 新特性

  • let 和 constlet 声明的变量具有块级作用域,const 声明的变量是常量,一旦声明不能更改。
if (true) {
  let message = "Hello";
  console.log(message); // Hello
}

const pi = 3.14159;
pi = 3; // 错误,不能更改 pi 的值
  • 模板字符串:使用反引号````表示,可以在字符串中嵌入变量。
const name = "Alice";
const age = 30;
const greeting = `Hello, my name is ${name} and I am${age} years old.`;
console.log(greeting); // Hello, my name is Alice and I am 30 years old.
  • 箭头函数()=>{},用于简化函数声明。
const greet = (name) => `Hello, ${name}!`;
console.log(greet("John")); // Hello, John!
  • 解构赋值:允许从数组或对象中提取值并赋给变量。

    const person = { name: "Alice", age: 30 };
    const { name, age } = person;
    console.log(name); // Alice
    console.log(age); // 30
    
  • 模块化:通过 import 和 export 语句来导入和导出模块。
  • // module1.js
    export const add = (a, b) => a + b;
    
    // module2.js
    import { add } from './module1';
    const result = add(5, 3);
    console.log(result); // 8
    
  • 其他新特性:如 PromiseSetMapProxyReflectSymbol 等。
  • Promise

    Promise 是一个对象,用于异步操作的结果。它有三种状态:pending(进行中)、fulfilled(已完成)和 rejected(已失败)。

    const fetchData = () =>
      new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("Data fetched successfully!");
        }, 2000);
      });
    
    fetchData()
      .then((data) => {
        console.log(data);
      })
      .catch((error) => {
        console.error(error);
      });
    

    Set 和 Map

  • Set:类似于数组,但成员的值都是唯一的,没有重复的值。
  • const numbers = new Set([1, 2, 3, 4, 5]);
    console.log(numbers); // Set(5) {1, 2, 3, 4, 5}
    
  • Map:类似于对象,但它的键可以是任何值,且键是唯一的。
  • const map = new Map([
      ["name", "Alice"],
      ["age", 30],
    ]);
    console.log(map); // Map(2) {name: "Alice", age: 30}
    

    Proxy

    Proxy 是一种对象,它可以拦截对象上的操作,如属性访问、属性设置、函数调用等。

    const person = { name: "Alice", age: 30 };
    const proxy = new Proxy(person, {
      get: (target, key) => {
        if (key === "age") {
          return target[key] * 2; // 返回年龄的两倍
        }
        return target[key];
      },
    });
    
    console.log(proxy.name); // Alice
    console.log(proxy.age); // 60
    

    Reflect

    Reflect 是 JavaScript 语言的一个内置对象,它提供了一些与 JavaScript 对象操作相关的方法。

    const person = { name: "Alice", age: 30 };
    const keys = Reflect.ownKeys(person);
    console.log(keys); // ["name", "age"]
    

    Symbol

    Symbol 是 ES6 引入的一种新的原始数据类型,表示独一无二的值。

    const symbol = Symbol("unique");
    console.log(typeof symbol); // "symbol"
    console.log(symbol === symbol); // false
    

    这些新特性使得 JavaScript 更加强大和灵活,有助于编写更简洁、更易于维护的代码。随着 JavaScript 语言的不断进化,开发者需要不断学习和适应新的特性和变化。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

如何解决3D模型变黑或贴图不显示的问题---模大狮模型网

在进行3D建模和视觉渲染时,经常会遇到模型表面变黑或贴图不显示的问题,这可能严重影响最终视觉效果的质量。这些问题通常与材质设置、光照配置或文件路径错误有关。本文将探讨几种常见原因及其解决方法,帮助3D艺术家和开发者更有效地处理这些…

☺☺☺☺☺☺☺栈的应用习题:有效的括号☺☺☺☺☺☺☺

目录 一解题思路: 二对解答代码分析: 三解答代码展示: 即浅学栈的创建后,可以简单利用其性质(先进后出,后进先出)来完成对一些题目的解答 如: 一解题思路: 这里我们可…

[法规规划|数据概念]金融行业数据资产和安全管理系列文件解析

“ 金融行业在自身数据治理和资产化建设方面一直走在前列。” 一直以来,金融行业由于其自身需要,都是国内开展信息化建设最早,信息化程度最高的行业。 同时,金融行业的数据治理、数据资产化以及过程中的管理要求和安全要求与其他…

Hive Partitioned Tables 分区表

Hive Partitioned Tables 分区表 1.分区表概念 Hive分区表(Partitioned Tables)是一种用于管理大量数据的机制,它可以将数据分散到不同的目录或分区中,以提高查询性能、优化数据存储和管理。 这种表结构可以根据某个列的值进行分…

【Ansible】ansible-playbook剧本

playbook 是ansible的脚本 playbook的组成 1)Tasks:任务;通过tasks 调用ansible 的模板将多个操作组织在一个playbook中运行 2)Variables:变量 3)Templates:模板 4)Handles&#xf…

基于C++从0到1手写Linux高性能网络编程框架(超清)

基于C从0到1手写Linux高性能网络编程框架(超清) TIME_WAIT状态存在原因有两点: 其一是可靠的中止tcp连接; 其二是保证让延迟的tcp报文有足够的时间被识别; 客户端在关闭连接阶段需要处理收到重复的结束报文,然后回复最后的ACK…

网络网络层之(4)IPv4协议

网络网络层之(1)IPv4协议 Author: Once Day Date: 2024年4月4日 一位热衷于Linux学习和开发的菜鸟,试图谱写一场冒险之旅,也许终点只是一场白日梦… 漫漫长路,有人对你微笑过嘛… 全系列文档可参考专栏:通信网络技术_Once-Day的…

IDEA远程连接docker服务,windows版docker desktop

1.windows上安装docker desktop docker desktop下载地址:Docker Desktop: The #1 Containerization Tool for Developers | Docker 有的windows系统不支持安装docker desktop 安装完之后我们可以直接打开,可以选择不登录使用 我们用IDEA连接到docker …

什么是 AI Agent ?

(注:本文为小报童精选文章。已订阅小报童或加入知识星球「玉树芝兰」用户请勿重复付费) 讲解的同时,也给你推荐一些实用的学习资源。 AI agent (智能体 / 代理)这个词儿最近非常流行,似乎「大语…

使用Three.js开发一个3D案例Demo

使用Three.js开发一个3D案例 最近在找工作,发现好多招聘要求都需要会Three.js,以前接触比较多的是2D开发,也就是平面开发,用到的做多的技术就是d3.js,现在3D开发已经成为了大势所趋,所以就学习下Three.js。…

sql优化思路

sql的优化经验 这里解释一下SQL语句的优化的原理 1.指明字段名称,可以尽量使用覆盖索引,避免回表查询,因此可以提高效率 2.字面意思,无需过多赘述。索引就是为了提高查询效率的。 3.图中两条sql直接可以使用union all 或者 uni…

上市公司财务困境模型​MertonDD、OScore、RLPM、ZScore四种模型​(1992-2022年)

01、数据介绍 上市公司财务困境模型是用于预测和评估上市公司是否可能陷入财务困境的一种模型。这个模型通常基于一系列的财务比率和其他相关变量,通过统计分析方法来构建。​ 数据名称:上市公司财务困境模型MertonDD、OScore、RLPM、ZScore五种模型 …

PHPStudy Apache或者MySQL启动以后自动停止

问题 phpstudy小皮面板中的Apache或MySQL启动以后自动停止 正在启动——已启动——已停止 总结:最主要的原因:端口冲突 端口冲突了,已经有其他程序占用了80、3306端口。 也就是说你的电脑上已经有了一个Apache、MySQL并且正在运行。 解决方案…

springboot lua检查redis库存

需求 最近需求需要实现检查多个马戏场次下的座位等席对应库存渠道的库存余量,考虑到性能,决定采用Lua脚本实现库存检查。 数据结构 库存层级结构 redis库存hash类型结构 实现 lua脚本 --- 字符串分割为数组 local function split(str, char)local…

微信小程序16: 组件通信

父子组件之间的通信 父子组件通信一共有三种方式 属性绑定 用于父组件向子组件的指定属性设置数据,仅能设置JSON兼容的数据 事件绑定 用于子组件向父组件传递数据,可以传递任意数据 获取组件实例 父组件还可以通过this.selectComponent()获取子组件的实…

蓝桥杯单片机之模块代码《AT24C02》

过往历程 历程1:秒表 历程2:按键显示时钟 历程3:列矩阵按键显示时钟 历程4:行矩阵按键显示时钟 历程5:新DS1302 历程6:小数点精确后两位ds18b20 历程7:35定时器测量频率 文章目录 过往历…

吴恩达2022机器学习专项课程C2(高级学习算法)W1(神经网络):2.4 神经网络层

目录 神经网络第一层(隐藏层)计算过程1.输入向量2.神经元的计算2.标识不同神经元3.层输出(激活)向量4.神经网络分层5.标识不同层 神经网络第二层(输出层)计算过程1.输入向量2.层输出(激活&#…

cmake进阶:目录属性之 INCLUDE_DIRECTORIES说明二

一. 简介 前面几篇文章学习了 cmake的一些目录属性,主要有两个重要的目录属性INCLUDE_DIRECTORIES 属性、LINK_DIRECTORIES 属性。文章如下: cmake进阶:目录属性之 INCLUDE_DIRECTORIES-CSDN博客 本文学习 父目录的 INCLUDE_DIRECTORIES …

基于svm的手写数字识别程序介绍(matlab)

1、程序界面介绍 该程序GUI界面包括手写板、手写数字可视化(原图)、对图像进行灰度处理(灰度图)、图像二值化处理(二值化)、图像特征可视化(HOG特征(方向梯度直方图)&…

解决Node.js mysql客户端不支持认证协议引发的“ER_NOT_SUPPORTED_AUTH_MODE”问题

这是一个版本问题 我用koa2和mysql2链接就没有问题 不知道这个老项目运行为啥有这个问题 解决方案 打开mysql运行这个两个命令: ALTER USER rootlocalhost IDENTIFIED WITH mysql_native_password BY 123321; FLUSH PRIVILEGES; 须知(给小白看的!) …
最新文章