Navigation
阅读进度0%
No headings found.

JS 核心原理：任务队列、This、作用域与原型

December 27, 2025 (1mo ago)

[GitHub]
JavaScript
EventLoop
Prototype

关于任务队列

只需要把js 执行的过程理清楚，基本上这些题目都是小问题，几乎来说没有任何问题

原理 和执行流程

容易出错的误区和注意事项

误区 结果
认为只要preomis 都是异步的
then 的参数都能被传递下去
then 中return error 就能到 catch
finly 接受参数
async/awit 的异步到底是怎么回事？
process.nextTick(function() {
console.log('3');
}) 是直接把function 加入的micro 队列去的		 我们可以借助这样的表格来具体的分析 其中的情况

经典问题分析

async function async1() {
  console.log("async1 start");
  await async2();
  console.log("async1 end");
}
 
async function async2() {
  console.log("async2");
}
 
console.log("script start");
 
setTimeout(function() {
  console.log("setTimeout");
}, 0);
 
async1();
 
new Promise(resolve => {
  console.log("promise1");
  resolve();
}).then(function() {
  console.log("promise2");
});
console.log('script end')
script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

分析如下

代码执行过程如下：

  1. 开头定义了async1和async2两个函数，但是并未执行，执行script中的代码，所以打印出script start；
  2. 遇到定时器Settimeout，它是一个宏任务，将其加入到宏任务队列；
  3. 之后执行函数async1，首先打印出async1 start；
  4. 遇到await，执行async2，打印出async2，并阻断后面代码的执行，将后面的代码加入到微任务队列；
  5. 然后跳出async1和async2，遇到Promise，打印出promise1；
  6. 遇到resolve，将其加入到微任务队列，然后执行后面的script代码，打印出script end；
  7. 之后就该执行微任务队列了，首先打印出async1 end，然后打印出promise2；
  8. 执行完微任务队列，就开始执行宏任务队列中的定时器，打印出setTimeout。

This问题

原理

this 只有在调用的时候才完成绑定**，运行时绑定！****;箭头函数没有this，他的this 是最近的作用域中的this, **

一般而言 关于普通函数，this 就是一句话：“谁调用指向谁”

注意事项

func1.call(null)
一个非常的经典的题目 最关键的就是var x = a(5)，函数a是在全局作用域调用，所以函数内部的this指向window对象。所以 this.x = 5 就相当于：window.x = 5。之后 return this，也就是说 var x = a(5) 中的x变量的值是window，这里的x将函数内部的x的值覆盖了。然后执行console.log(x.x)， 也就是console.log(window.x)，而window对象中没有x属性，所以会输出undefined。
2
当指向y.x时，会给全局变量中的x赋值为6，所以会打印出6。
this 绑定的优先级 区分不清
**this绑定的优先级：**new绑定 > 显式绑定 > 隐式绑定 > 默认绑定。

作用域

原理

注意事项

经典题目
经典题目

原型

原理图

下面的两张图是非常重要的 图

function SuperType(){
    this.property = true;
}
 
SuperType.prototype.getSuperValue = function(){
    return this.property;
};
 
function SubType(){
    this.subproperty = false;
}
 
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
    return this.subproperty;
};
 
var instance = new SubType();
console.log(instance.getSuperValue());

容易出错的误区和注意事项

var getName = function () {
 console.log(4);
}
// e
function getName () {
 console.log(5);
}
 
// 你可以这样理解
var getName;
function getName(){};
 
getName =  function () {
 console.log(4);
};