深入了解JS ｜ 青训营笔记

用户7201002528597
121 阅读13分钟

这是我参与笔记创作活动的第6天

一、本堂课重点内容：

  1. JS的基本概念
  2. JS是怎么执行的
  3. JS的进阶知识点

二、详细知识点介绍：

一、JS的基本概念

1.1 JS的诞生

image.png

1.2 JS的发展

image.png

1.3 JS的进程

image.png

1.4 JS的优缺点

image.png

  1. 简单性：它是基于Java基本语句和控制流之上的简单而紧凑的设计，是学习Java的好过渡，而且，它的变量类型是采用弱类型，未采用严格的数据类型。
  2. 安全性：JS不允许访问本地硬盘，不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览和动态交互，从而有效的防止数据的丢失。
  3. 动态性：JS可以直接对用户或客户输入做出响应，无须经过Web程序。它对用户的响应通过以事件驱动的方式进行，即由某种操作动作引发响应的事件响应，如：点击鼠标、移动窗口、选择菜单等。
  4. 动态性：JS可以直接对用户或客户输入做出响应，无须经过Web程序。它对用户的响应通过以事件驱动的方式进行，即由某种操作动作引发响应的事件响应，如：点击鼠标、移动窗口、选择菜单等。

1.5 JS的数据类型

image.png JavaScript 中的数据类型可以分为两种类型：

  • 基本数据类型（值类型）：字符串（String）、数字（Number）、布尔（Boolean）、空（Null）、未定义（Undefined）、Symbol；
  • 引用数据类型：对象（Object）、数组（Array）、函数（Function）。

提示：Symbol 是 ECMAScript6 中引入的一种新的数据类型，表示独一无二的值。

JS的基本数据类型
1) String 类型

字符串（String）类型是一段以单引号''或双引号""包裹起来的文本，例如 '123'、"abc"。需要注意的是，单引号和双引号是定义字符串的不同方式，并不是字符串的一部分。

定义字符串时，如果字符串中包含引号，可以使用反斜杠\来转义字符串中的引号，或者选择与字符串中不同的引号来定义字符串，如下例所示：

var str = "Let's have a cup of coffee.";  // 双引号中包含单引号
var str = 'He said "Hello" and left.';    // 单引号中包含双引号
var str = 'We'll never give up.';        // 使用反斜杠转义字符串中的单引号
2) Number 类型

数值（Number）类型用来定义数值，JavaScript 中不区分整数和小数（浮点数），统一使用 Number 类型表示，如下例所示：

var num1 = 123;     // 整数var num2 = 3.14;    // 浮点数

注意：Number 类型所能定义的数值并不是无限的，JavaScript 中的 Number 类型只能表示 -(253 - 1) 到 (253 -1) 之间的数值。

对于一些极大或者极小的数，也可以通过科学（指数）计数法来表示，如下例所示：

var y=123e5;      // 123 乘以 10 的 5 次方，即 12300000var z=123e-5;     // 123 乘以 10 的 -5 次方，即 0.00123

另外，Number 类型中还有一些比较特殊的值，分别为 Infinity、-Infinity 和 NaN，其中

  • Infinity：用来表示正无穷大的数值，一般指大于 1.7976931348623157e+308 的数；
  • -Infinity：用来表示负无穷大的数值，一般指小于 5e-324 的数；
  • NaN：即非数值（Not a Number 的缩写），用来表示无效或未定义的数学运算结构，例如 0 除以 0。
提示：如果某次计算的结果超出了 JavaScript 中 Number 类型的取值范围，
那么这个数就会自动转化为无穷大，正数为 Infinity，负数为 -Infinity。
3) Boolean 类型

布尔（Boolean）类型只有两个值，true（真）或者 false（假），在做条件判断时使用的比较多，您除了可以直接使用 true 或 false 来定义布尔类型的变量外，还可以通过一些表达式来得到布尔类型的值，例如：

var a = true;   // 定义一个布尔值
truevar b = false;  // 定义一个布尔值 
falsevar c = 2 > 1; // 表达式 2 > 1 成立，其结果为“真（true）”，所以 c 的值为布尔类型的 true
truevar d = 2 < 1;  // 表达式 2 < 1 不成立，其结果为“假（false）”，所以 c 的值为布尔类型的 false
4) Null 类型

Null 是一个只有一个值的特殊数据类型，表示一个“空”值，即不存在任何值，什么都没有，用来定义空对象指针。

使用 typeof 操作符来查看 Null 的类型，会发现 Null 的类型为 Object，说明 Null 其实使用属于 Object（对象）的一个特殊值。因此通过将变量赋值为 Null 我们可以创建一个空的对象。

5) Undefined 类型

Undefined 也是一个只有一个值的特殊数据类型，表示未定义。当我们声明一个变量但未给变量赋值时，这个变量的默认值就是 Undefined。例如：

var num;console.log(num);  // 输出 undefined

在使用 typeof 操作符查看未赋值的变量类型时，会发现它们的类型也是 undefined。对于未声明的变量，使用 typeof 操作符查看其类型会发现，未声明的变量也是 undefined，示例代码如下：

var message;console.log(typeof message);  // 输出 
undefinedconsole.log(typeof name);     // 输出 undefined
6) Symbol 类型

Symbol 是 ECMAScript6 中引入的一种新的数据类型，表示独一无二的值，Symbol 类型的值需要使用 Symbol() 函数来生成，如下例所示：

var str = "123";
var sym1 = Symbol(str);
var sym2 = Symbol(str);
console.log(sym1);          // 输出 Symbol(123)
console.log(sym2);          // 输出 Symbol(123)
console.log(sym1 == sym2);  // 输出 false ：虽然 sym1 与 sym2 看起来是相同的，但实际上它们并不一样，根据 Symbol 类型的特点，sym1 和 sym2 都是独一无二的
JS 引用数据类型
1) Object 类型

JavaScript 中的对象（Object）类型是一组由键、值组成的无序集合，定义对象类型需要使用花括号{ }，语法格式如下：

{name1: value1, name2: value2, name3: value3, ..., nameN: valueN}

其中 name1、name2、name3、...、nameN 为对象中的键，value1、value2、value3、...、valueN 为对应的值。

在 JavaScript 中，对象类型的键都是字符串类型的，值则可以是任意数据类型。要获取对象中的某个值，可以使用对象名.键的形式，如下例所示：

var person = {    
name: 'Bob',   
age: 20,    
tags: ['js', 'web', 'mobile'],   
city: 'Beijing',    
hasCar: true,    
zipcode: null};
console.log(person.name);       // 输出 Bo
bconsole.log(person.age);        // 输出 20
2) Array 类型

数组（Array）是一组按顺序排列的数据的集合，数组中的每个值都称为元素，而且数组中可以包含任意类型的数据。在 JavaScript 中定义数组需要使用方括号[ ]，数组中的每个元素使用逗号进行分隔，例如：

[1, 2, 3, 'hello', true, null]

另外，也可以使用 Array() 函数来创建数组，如下例所示：

var arr = new Array(1, 2, 3, 4);console.log(arr);       // 输出 [1, 2, 3, 4]

数组中的元素可以通过索引来访问。数组中的索引从 0 开始，并依次递增，也就是说数组第一个元素的索引为 0，第二个元素的索引为 1，第三个元素的索引为 2，以此类推。如下例所示：

var arr = [1, 2, 3.14, 'Hello', null, true];
console.log(arr[0]);  // 输出索引为 0 的元素，即 1
console.log(arr[5]); // 输出索引为 5 的元素，即 true
console.log(arr[6]);  // 索引超出了范围，返回 undefined
3) Function 类型

函数（Function）是一段具有特定功能的代码块，函数并不会自动运行，需要通过函数名调用才能运行，如下例所示：

function sayHello(name){    
return "Hello, " + name;}
var res = sayHello("Peter");
console.log(res);  // 输出 Hello, Peter

此外，函数还可以存储在变量、对象、数组中，而且函数还可以作为参数传递给其它函数，或则从其它函数返回，如下例所示：

var fun = function(){   
    console.log("http://c.biancheng.net/js/");
}
function createGreeting(name){   
    return "Hello, " + name;}
function displayGreeting(greetingFunction, userName){
    return greetingFunction(userName);
}
var result = displayGreeting(createGreeting, "Peter");
console.log(result);  // 输出 Hello, Peter
1.6作用域

image.png

1.7变量提升

image.png

二、JS是怎么执行的

2.1JS的执行机制

image.png

image.png

  • JavaScript 的执行机制：先编译，再执行

  • JS实际上变量和函数声明在代码里的位置是不会改变的，而且是在编译阶段被 JavaScript 。

  • JavaScript 代码执行过程中，需要先做变量提升，而之所以需要实现变量提升，是因为 JavaScript 代码在执行之前需要先编译。在编译阶段，变量和函数会被存放到变量环境中，变量的默认值会被设置为 undefined；在代码执行阶段，JavaScript 引擎会从变量环境中去查找自定义的变量和函数如果在编译阶段，存在两个相同的函数，那么最终存放在变量环境中的是最后定义的那个，这是因为后定义的会覆盖掉之前定义的。

2.2 JS的执行上下文

经过编译后，会生成两部分内容：执行上下文（Execution context）和可执行代码

image.png

image.png 执行上下文是 JavaScript 执行一段代码时的运行环境，比如调用一个函数，就会进入这个函数的执行上下文，确定该函数在执行期间用到的诸如 this、变量、对象以及函数等，在执行上下文中存在一个变量环境的对象（Viriable Environment）这样就生成了变量环境对象。接下来 JavaScript 引擎会把声明以外的代码编译为字节码

执行上下文 由变量环境、词法环境、可执行代码环境组成，在每个执行上下文的变量环境中，都包含了一个外部引用，用来指向外部的执行上下文，我们把这个外部引用称为 outer。

  • 当 JavaScript 执行全局代码的时候，会编译全局代码并创建全局执行上下文，而且在整个页面的生存周期内，全局执行上下文只有一份。
  • 当调用 一个函数的时候，函数体内的代码会被编译，并创建函数执行上下文，一般情况下，函数执行结束之后，创建的函数执行上下文会被销毁。
  • 当使用 eval 函数的时候，eval 的代码也会被编译，并创建执行上下文

2.3 JS的执行栈

调用栈 image.png

调用栈就是用来管理函数调用关系的一种数据结构。 JavaScript 的调用栈JavaScript 引擎正是利用栈的这种结构来管理执行上下文的。在执行上下文创建好后，JavaScript 引擎会将执行上下文压入栈中，通常把这种用来管理执行上下文的栈称为执行上下文栈，又称调用栈。

  • 调用栈是 JavaScript 引擎追踪函数执行的一个机制，当一次有多个函数被调用时，通过调用栈就能够追踪到哪个函数正在被执行以及各函数之间的调用关系。在分析复杂结构代码，或者检查 Bug 时，调用栈都是非常有用的。

  • 每调用一个函数，JavaScript 引擎会为其创建执行上下文，并把该执行上下文压入调用栈，然后 JavaScript 引擎开始执行函数代码。

  • 如果在一个函数 A 中调用了另外一个函数 B，那么 JavaScript 引擎会为 B 函数创建执行上下文，并将 B 函数的执行上下文压入栈顶。

  • 当前函数执行完毕后，JavaScript 引擎会将该函数的执行上下文弹出栈。当分配的调用栈空间被占满时，会引发“堆栈溢出”问题。

2.4词法环境、变量环境、Outer

image.png

image.png

image.png

image.png

三、JS的进阶知识点

3.1 闭包

闭包（closure）是一个函数以及其捆绑的周边环境状态（lexical environment，词法环境）的引用的组合。换而言之，闭包让开发者可以从内部函数访问外部函数的作用域。在 JavaScript 中，闭包会随着函数的创建而被同时创建。

闭包虽然可以让开发者可以从内部函数访问外部函数的作用域，但如果引用闭包的函数是一个全局变量，那么闭包会一直存在直到页面关闭；如果这个闭包以后不再使用的话，就会造成内存泄漏。 image.png

3.2 this

在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

  • 在方法中，this 表示该方法所属的对象。
  • 如果单独使用，this 表示全局对象。
  • 在函数中，this 表示全局对象。
  • 在函数中，在严格模式下，this 是未定义的(undefined)。
  • 在事件中，this 表示接收事件的元素。
  • 类似 call() 和 apply() 方法可以将 this 引用到任何对象。 image.png

3.3 GC垃圾回收机制

JavaScript具有垃圾收集器，垃圾收集器会按照固定的时间间隔周期性的执行。

最常见的垃圾回收方式有两种：

标记清除

引用计数

1)标记清除：

原理：是当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。

  1. 垃圾回收器，在运行的时候会给存储在内存中的所有变量都加上标记。
  2. 去掉环境中的变量以及被环境中的变量引用的变量的标记。
  3. 再被加上标记的会被视为准备删除的变量。
  4. 垃圾回收器完成内存清除工作，销毁那些带标记的值并回收他们所占用的内存空间。

2)引用计数

原理：跟踪记录每个值被引用的次数。

  1. 声明了一个变量并将一个引用类型的值赋值给这个变量，这个引用类型值的引用次数就是1。
  2. 同一个值又被赋值给另一个变量，这个引用类型值的引用次数加1。
  3. 当包含这个引用类型值的变量又被赋值成另一个值了，那么这个引用类型值的引用次数减1。
  4. 当引用次数变成0时，说明没办法访问这个值了。
  5. 当垃圾收集器下一次运行时，它就会释放引用次数是0的值所占的内存。 （注意：当循环引用的时候就会释放不掉内存。）

三、实践练习例子：

1. 观察是否存在内存泄漏并回收

如果连续五次垃圾回收之后，内存占用一次比一次大，就有内存泄漏。这就要求实时查看内存占用。

1)可以浏览器查看内存占用。

2)通过命令行，命令行可以使用 Node process.memoryUsage提供的方法。process.memoryUsage返回一个对象，包含了 Node 进程的内存占用信息。（判断内存泄漏，以heapUsed字段为准。）

四、课后个人总结：

  • 本章有什么知识点不容易掌握？
  1. JS的执行机制
  2. JS的垃圾回收机制
avatar
文章
阅读
粉丝