JS基础

---

theme: condensed-night-purple

JavaScript 引擎

将.js文件内容转化为机器懂的语言。只要实现这个功能，就可以被叫做引擎。我们甚至可以自己编写。

词法分析 Parser

符合ECMA标准的JavaScript引擎：

抽象语法树 AST

解释器 Interpreter

即时的，从第一行开始读，解释为ByteCode，运行。 这样的环境中会做很多重复的工作，如不断重复计算循环中的函数

编译器 Compiler

启动慢，先编译为计算机可以理解的low-level编程语言，再执行，相当于做了优化(Optimized)

混合编译器

前两个各取所长，构成的Just In Time Compiler，使得运行速度加快。我们要写让机器更好预测的代码。

JavaScript 运行时

Philip Roberts：到底什么是Event Loop呢？

Call Stack

栈溢出 Stack Overflow

Memory Heap

垃圾回收 Garbage Collection

内存泄漏 Memory Leaks

1. addEventListener
2. setInternal

执行上下文 Execution Context

包括创建和执行两个阶段

词法环境 Lexical Environment

lexical scope => availabel data + variables where the function was defined,not where the function is called(dynamic scope ===> this keyword),to "fix it",use arrow function.

变量提升 Hoisting

JavaScript引擎看到var或者function的时候，会提升他们，并在内存中分配空间。对变量来说只提升了左边的一部分即var teddy = undefined。 调用函数时，JavaScript引擎看到括号 ()，就会创建一个上下文环境。

每当我们调用函数，都会创建一个新的执行上下文，即都会发生一个创建阶段和一个执行阶段，变量提升就发生在创建阶段。

调用函数 Function invocation/call

函数表达式 js var canada = function() { console.log('hi') }//no hoisting 函数声明式 js function sayhi() { console.log('hi') }//hoisting

argument -> ...args

作用域链

全局变量

IIFE

this 关键字

this ：is the object that the function is a property of. ===>>> who called me ? 看“点运算符左边”是谁，没有的话默认是全局对象 1. give methods access to their object 2. execute same code for multiple object

动态和静态作用域链

obj并没有调用anotherFunc，而是sing函数在内部调用了anotherFunc，解决方法： 1. 箭头函数 2. bind 3. self = this

call,apply & bind

• 前两个用来从别的对象中“借用方法”，立即执行，两个区别在于传递参数列表的方法，call用逗号分隔，apply用数组形式传递

• bind返回一个新的函数，使我们可以稍后调用有特定的上下文或this关键字的函数