长城头条

JS对象

2023-03-03 10:17 由 Allis 发表于 #前端开发

JavaScript

DOMContentLoaded

document.addEventListener("DOMContentLoaded", function() {
  . . .
});

这是一个事件监听器，它监听浏览器的 "DOMContentLoaded" 事件，即 HTML 文档体加载、解释完毕事件。事件触发时将调用 " . . ." 处的代码，从而避免了错误发生.

async和 defer

浏览器遇到 async 脚本时不会阻塞页面渲染，而是直接下载然后运行。这样脚本的运行次序就无法控制，只是脚本不会阻止剩余页面的显示。当页面的脚本之间彼此独立，且不依赖于本页面的其它任何脚本时，async 是最理想的选择。

添加 defer 属性的脚本将按照在页面中出现的顺序加载。

  • 如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 async。
  • 如果脚本需要等待页面解析，且依赖于其它脚本，调用这些脚本时应使用 defer，将关联的脚本按所需顺序置于 HTML 中。

常用弹出框

alert() 弹出个提示框 （确定）

confirm() 弹出个确认框 （确定，取消）

prompt() 弹出个输入框 让你输入东西

js节点和事件

删除当前节点dom

panel 是消息框，panel.parentNode 就是指 panel 的上一级，就是整个 DOM，然后再来用这个父亲来干掉这个儿子，儿子不能自己干掉自己，所以要这么做。

closeBtn.onclick = function() {
  panel.parentNode.removeChild(panel);
}

有时候在事件处理函数内部，您可能会看到一个固定指定名称的参数，例如event，evt或简单的e。这被称为事件对象，它被自动传递给事件处理函数，以提供额外的功能和信息。

function bgChange(e) {
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  e.target.style.backgroundColor = rndCol;
  console.log(e);
}

事件对象 e 的 target 属性始终是事件刚刚发生的元素的引用。

可以使用任何您喜欢的名称作为事件对象 - 您只需要选择一个名称，然后可以在事件处理函数中引用它。开发人员最常使用 e / evt / event，因为它们很简单易记。坚持标准总是很好。

e.preventDefault()

如果事件是可取消的，则 preventDefault() 方法会取消该事件，这意味着属于该事件的默认操作将不会发生。

form.onsubmit = function(e) {
  if (fname.value === '' || lname.value === '') {
    e.preventDefault();
    para.textContent = 'You need to fill in both names!';
  }
}

举例，在以下情况下有用：

  • 单击“提交”按钮，阻止其提交表单
  • 单击链接，防止链接跟随 URL

事件冒泡和捕捉

  • 浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它
  • 然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达<html>元素。

用 stopPropagation() 修复问题

当在事件对象上调用该函数时，它只会让当前事件处理程序运行，但事件不会在冒泡链上进一步扩大，因此将不会有更多事件处理器被运行 (不会向上冒泡)。

video.onclick = function(e) {
  e.stopPropagation();
  video.play();
};

"this"的含义

greeting: function() {
  alert('Hi! I\'m ' + this.name.first + '.');
}

关键字"this"指向了当前代码运行时的对象 ( 原文：the current object the code is being written inside )

可以用var that=this来拷贝当前对象指向。

对象原型

面向对象编程（Object Oriented Programming，缩写为 OOP）

在传统的 OOP 中，首先定义“类”，此后创建对象实例时，类中定义的所有属性和方法都被复制到实例中。在 JavaScript 中并不如此复制——而是在对象实例和它的构造器之间建立一个链接（它是__proto__属性，是从构造函数的prototype属性派生的），之后通过上溯原型链，在构造器中找到这些属性和方法。

理解对象的原型（可以通过 Object.getPrototypeOf(obj)或者已被弃用的__proto__与构造函数的 prototype 属性之间的区别是很重要的。前者是每个实例上都有的属性，后者是构造函数的属性。也就是说，Object.getPrototypeOf(new Foobar()) 和 Foobar.prototype 指向着同一个对象。

必须重申，原型链中的方法和属性没有被复制到其他对象——它们被访问需要通过前面所说的“原型链”的方式。

尽管原型链看起来很像是继承的层级结构，并且在某些方面，原型链的行为与继承的行为也很类似，但是在其他方面，二者之间仍然存在区别。在继承方式下，当一个子类完成继承时，由该子类所创建的对象既具有其子类中单独定义的属性，又具有其父类中定义的属性（以及父类的父类，依此类推）。而在原型链中，每一个层级都代表了一个不同的对象，不同的对象之间通过 __proto__ 属性链接起来。原型链的行为并不太像是继承，而更像是委派（delegation）。委派同样是对象中的一种编程模式。当我们要求对象执行某项任务时，在委派模式下，对象可以自己执行该项任务，或者要求另一个对象（委派的对象）以其自己的方式执行这项任务。在许多方面，相对于继承来说，委派可以更为灵活地在许多对象之间建立联系（例如，委派模式可以在程序运行时改变、甚至完全替换委派对象）。

new的过程:

• 创建一个空对象，将它的引用赋给 this，继承函数的原型。

• 通过 this 将属性和方法添加至这个对象

• 最后返回 this 指向的新对象，也就是实例（如果没有手动返回其他的对象）

// ES5构造函数
let Parent = function (name, age) {
    //1.创建一个新对象，赋予this，这一步是隐性的，
    // let this = {};
    //2.给this指向的对象赋予构造属性
    this.name = name;
    this.age = age;
    //3.如果没有手动返回对象，则默认返回this指向的这个对象，也是隐性的
    // return this;
};
const child = new Parent();

继承

当一个方法拥有相同的函数名，但是在不同的类中可以具有不同的实现时，我们称这一特性为多态（polymorphism）。当一个方法在子类中替换了父类中的实现时，我们称之为子类重写/重载（override）了父类中的实现。

class Professor extends Person {
	// 只继承父类属性
  teaches;

  constructor(name, teaches) {
  // 调用父类方法
    super(name);
    this.teaches = teaches;
  }

  introduceSelf() {
    console.log(`My name is ${this.name}, and I will be your ${this.teaches} professor.`);
  }

  grade(paper) {
    const grade = Math.floor(Math.random() * (5 - 1) + 1);
    console.log(grade);
  }

}

因为我们想在创建新的 Professor 时设置 teaches，我们需要声明一个需要 name 和 teaches 参数的构造函数。构造函数中需要做的第一件事是使用 super() 调用父类的构造函数，并传递 name 参数。父类的构造函数会设置 name 属性。然后 Professor 的构造函数接着设置 teaches 属性。

class关键字声明类

class Person {

  name;

  constructor(name) {
    this.name = name;
  }

  introduceSelf() {
    console.log(`Hi! I'm ${this.name}`);
  }

}

私有方法

与私有数据属性一样，你也可以声明私有方法。而且名称也是以 # 开头，只能在类自己的方法中调用

class Example {

  somePublicMethod() {
    this.#somePrivateMethod();
  }

  #somePrivateMethod() {
    console.log('You called me?');
  }
}

const myExample = new Example();

myExample.somePublicMethod(); // 'You called me?'

myExample.#somePrivateMethod(); // SyntaxError

对象和文本之间的转换

  • parse(): 以文本字符串形式接受 JSON 对象作为参数，并返回相应的对象。
  • stringify(): 接收一个对象作为参数，返回一个对应的 JSON 字符串。

requestAnimationFrame

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。

Promise（）

fetch（）API

fetch（）API是一种现代的、基于 Promise 的、用于替代 XMLHttpRequest 的方法。

const fetchPromise = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');

console.log(fetchPromise);

fetchPromise.then( response => {
  console.log(`已收到响应：${response.status}`);
});

console.log("已发送请求……");

  1. 调用 fetch() API，并将返回值赋给 fetchPromise 变量。

  2. 紧接着，输出 fetchPromise 变量，输出结果应该像这样：Promise { <state>: "pending" }。这告诉我们有一个 Promise 对象，它有一个 state属性，值是 "pending"。"pending" 状态意味着操作仍在进行中。

  3. 将一个处理函数传递给 Promise 的 then() 方法。当（如果）获取操作成功时，Promise 将调用我们的处理函数，传入一个包含服务器的响应的 Response 对象。

  4. 输出一条信息，说明我们已经发送了这个请求。

    ​

Promise.all()

它接收一个 Promise 数组，并返回一个单一的 Promise。

  • 当且仅当数组中所有的 Promise 都被兑现时，才会通知 then() 处理函数并提供一个包含所有响应的数组，数组中响应的顺序与被传入 all() 的 Promise 的顺序相同。
  • 会被拒绝——如果数组中有任何一个 Promise 被拒绝。此时，catch() 处理函数被调用，并提供被拒绝的 Promise 所抛出的错误。
const fetchPromise1 = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
const fetchPromise2 = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found');
const fetchPromise3 = fetch('https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json');

Promise.all([fetchPromise1, fetchPromise2, fetchPromise3])
  .then( responses => {
    for (const response of responses) {
      console.log(`${response.url}：${response.status}`);
    }
  })
  .catch( error => {
    console.error(`获取失败：${error}`)
  });

Promise.any()

在 Promise 数组中的任何一个被兑现时它就会被兑现，如果所有的 Promise 都被拒绝，它也会被拒绝。

const fetchPromise1 = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json');
const fetchPromise2 = fetch('https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found');
const fetchPromise3 = fetch('https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json');

Promise.any([fetchPromise1, fetchPromise2, fetchPromise3])
  .then( response => {
    console.log(`${response.url}：${response.status}`);
  })
  .catch( error => {
    console.error(`获取失败：${error}`)
  });

async 和 await

async关键字为你提供了一种更简单的方法来处理基于异步 Promise 的代码。在一个函数的开头添加 async，就可以使其成为一个异步函数。

async function myFunction() {
  // 这是一个异步函数
}

在异步函数中，你可以在调用一个返回 Promise 的函数之前使用 await 关键字。这使得代码在该点上等待，直到 Promise 被完成，这时 Promise 的响应被当作返回值，或者被拒绝的响应被作为错误抛出。

Web Worker

Web Worker 的意义在于可以将一些耗时的数据处理操作从主线程中剥离，使主线程更加专注于页面渲染和交互。

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

  • 懒加载
  • 文本分析
  • 流媒体数据处理
  • canvas 图形绘制
  • 图像处理

需要注意：

  • 有同源限制
  • 无法访问 DOM 节点
  • 运行在另一个上下文中，无法使用Window对象
  • Web Worker 的运行不会影响主线程，但与主线程交互时仍受到主线程单线程的瓶颈制约。换言之，如果 Worker 线程频繁与主线程进行交互，主线程由于需要处理交互，仍有可能使页面发生阻塞
  • 共享线程可以被多个浏览上下文（Browsing context）调用，但所有这些浏览上下文必须同源（相同的协议，主机和端口号）
// 在 "generate.js" 中创建一个新的 worker
const worker = new Worker('./generate.js');

// 当用户点击 "Generate primes" 时，给 worker 发送一条消息。
// 消息中的 command 属性是 "generate", 还包含另外一个属性 "quota"，即要生成的质数。
document.querySelector('#generate').addEventListener('click', () => {
  const quota = document.querySelector('#quota').value;
  worker.postMessage({
    command: 'generate',
    quota: quota
  });
});

// 当 worker 给主线程回发一条消息时，为用户更新 output 框，包含生成的质数（从 message 中获取）。
worker.addEventListener('message', message => {
  document.querySelector('#output').textContent = `Finished generating ${message.data} primes!`;
});

// 监听主线程中的消息。
// 如果消息中的 command 是 "generate"，则调用 `generatePrimse()`
addEventListener("message", message => {
  if (message.data.command === 'generate') {
    generatePrimes(message.data.quota);
  }
});

// 生成质数 (非常低效)
function generatePrimes(quota) {

  function isPrime(n) {
    for (let c = 2; c <= Math.sqrt(n); ++c) {
      if (n % c === 0) {
          return false;
       }
    }
    return true;
  }

  const primes = [];
  const maximum = 1000000;

  while (primes.length < quota) {
    const candidate = Math.floor(Math.random() * (maximum + 1));
    if (isPrime(candidate)) {
      primes.push(candidate);
    }
  }

  // 完成后给主线程发送一条包含我们生成的质数数量的消息消息。
  postMessage(primes.length);
}

基本dom操作

document.querySelector

它允许你使用 CSS 选择器选择元素，调用会匹配它在文档中遇到的第一个对应元素

document.querySelectorAll

匹配文档中每个匹配选择器的元素，并把它们的引用存储在一个array中

document.getElementById

document.getElementsByTagName

创建和放置节点

document.createElement

document.appendChild

移动和删除元素

document.removeChild

删除自身节点：

document.parentNode.removeChild

热门相关：最强狂兵   霸皇纪   第一神算：纨绔大小姐   仗剑高歌   天启预报