Lucas's Blog
HomeArchiveTagsCategoriesAboutLabPitfallDocs

js执行栈

发表于 2020/02/01js🍵 ≈ 3 mins

js 在执行代码时可分为全局上下文、函数上下文、eval 上下文，代码执行过程：创建全局上下文（caller），自上而下执行全局上下文；遇到函数时，函数上下文（callee）被 push 到执行栈顶端；开始执行函数中的代码，caller 被挂起；函数执行完后，callee 被移除出执行栈，继续执行全局上下文

声明标识符

let

  • 作用域是块级作用域
  • 不存在变量声明提前
  • 不能重复定义
  • 存在暂时性死区

    暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量

var tmp = 123;

if (true) {
   tmp = 'abc'; // ReferenceError
   let tmp;
}
// 上面代码中,存在全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp
// 导致后者绑定这个块级作用域,所以在let声明变量前,对tmp赋值会报错。

// 以下死区比较隐蔽
function bar(x = y, y = 2) {
  return [x, y];
}

bar(); // 报错

const

  • 一般用来声明常量，且声明的常量是不允许改变的
  • 块级作用域
  • 存在暂时性死区

var

  • 作用域是函数作用域
  • 存在变量提升

变量提升

明确两点：

  • 函数声明优于变量声明
  • 函数表达式会将变量提升，但是代码在执行的时候才会被赋值
test();
console.log(test); // 输出下面的函数test(),符合第一点
function test() {
  console.log("我是函数");
}
console.log(test);
var test = "我是变量";
console.log(test); // 输出'我是变量',符合第二点
var test = function (params) {
  console.log("我是函数表达式");
};
console.log(test);
test();

this

this 的指向，是在调用函数时根据上下文所动态决定的

  • 默认绑定
  • 隐式绑定（根据调用关系决定）
const foo = {
  bar: 10,
  fn: function () {
    console.log(this);
    console.log(this.bar);
  },
};
var fn1 = foo.fn;
fn1(); // this 指向window，这就是隐式丢失
foo.fn(); // this 指向foo，这也就是隐式绑定，指向最后调用它的对象
  • 显式绑定（call/apply/bind/new 绑定）

new 绑定的优先级比显式 bind 绑定更高。如果构造函数中显式返回一个值，且返回的是一个对象，那么 this 就指向这个返回的对象；如果返回的不是一个对象，那么 this 仍然指向实例

  • 箭头函数
function foo() {
  return (a) => {
    console.log(this.a);
  };
}

const obj1 = {
  a: 2,
};

const obj2 = {
  a: 3,
};

const bar = foo.call(obj1);
console.log(bar.call(obj2)); // 输出2，箭头函数的绑定无法被修改

—>详解 this

call/apply/bind 的区别和实现

三者作用是相同的，都可以改变 this 的指向，区别在于传参不同。call 传的参数是参数列表，相当于...[参数数组]，apply 是参数数组，而 bind 是直接改变这个函数的 this 指向并且返回一个新的函数，而不是直接调用立刻执行。

作用域和作用域链

作用域其实可理解为执行上下文中声明的变量和变量的作用范围。

作用域链: 当访问一个变量时，解释器会首先在当前作用域查找，如果没有找到，就去父作用域找，直到找到该变量或者不在父作用域中，这就是作用域链。

闭包

函数嵌套函数时，内层函数调用外层函数变量，并且在全局下可访问，这就是闭包

栈溢出

  • 递归

面试题：有一个函数，参数是一个函数，返回值也是一个函数，返回的函数功能和入参的函数相似，但这个函数只能执行 3 次，再次执行无效，如何实现

function sayHi() {
  console.log("hi");
}

function threeTimes(fn) {
  let times = 0;
  return () => {
    if (times++ < 3) {
      fn();
    }
  };
}

const newFn = threeTimes(sayHi);
newFn();
newFn();
newFn();
newFn();
newFn(); // 后面两次执行都无任何反应

面试题

for (var i = 1; i <= 5; i++) {
  setTimeout(function timer() {
    console.log(i);
  }, 1000);
}
// serTimeout是异步操作，等待外部循环结束后再执行，此时i=6，于是输出一堆66666
// 解决办法1：立即执行函数
for (var i = 1; i <= 5; i++) {
  (function (i) {
    setTimeout(function timer() {
      console.log(i);
    }, 1000);
  })(i);
}
// 解决办法2：使用let
for (let i = 1; i <= 5; i++) {
  setTimeout(function timer() {
    console.log(i);
  }, 1000);
}
// 每个 let 会和代码块结合起来形成块级作用域
js执行上下文执行栈