JavaScript基础

JavaScript

一. 邂逅 JavaScript

1. JavaScript 的组成

JavaScript基础分为三个部分：

• ECMAScript：JavaScript 的语法标准。
  • 包括变量、表达式、运算符、函数、if语句、for语句等。
• DOM：Document Object Model（文档对象模型），操作页面上的元素的 API。
  • 比如让盒子移动、变色、改变大小、轮播图等等。
• BOM：Browser Object Model（浏览器对象模型），操作浏览器部分功能的 API。
  • 通过BOM可以操作浏览器窗口，比如弹框、控制浏览器跳转、获取浏览器分辨率等等。

通俗理解就是：ECMAScript 是 JS 的语法；DOM 和 BOM 浏览器运行环境为 JS 提供的 API。

浏览器内核和JS引擎的关系

2. JavaScript 是前端语言

JavaScript是前端语言，而不是后台语言。

JavaScript运行在用户的终端网页上，而不是服务器上，所以我们称之为“前端语言”。就是服务于页面的交互效果、美化，不能操作数据库。

后台语言是运行在服务器上的，比如PHP、ASP、JSP等等，这些语言都能够操作数据库，都能够对数据库进行“增删改查”操作。

备注：Node.js是用 JavaScript 开发的，现在也可以基于 Node.js 技术进行服务器端编程。

3. JavaScript 的特点

特点1：解释型语言

JavaScript 是解释型语言，不需要事先被翻译为机器码；
而是边翻译边执行（翻译一行，执行一行）

什么是「解释型语言」？

不需要编译，所以解释型语言开发起来尤为方便，但是解释型语言运行较慢也是它的劣势。
不过解释型语言中使用了 JIT 技术，使得运行速度得以改善。

特点2：单线程

特点3：ECMAScript标准

简单来说，ECMAScript不是一门语言，而是一个标准。ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

ECMAScript在2015年6月，发布了ECMAScript 6版本（ES6），语言的能力更强（也包含了很多新特性）。

二. 数据类型

1.为什么需要数据类型

在计算机中，不同的数据所需占用的存储空间不同，为了充分利用存储空间，于是定义了不同的数据类型。而且，不同的数据类型，寓意也不同。

无论这个变量是字符串类型，还是数字类型，我们都可以直接用 var 去定义它。
比如：

var a = 'hello word';

var b = 123;

为什么可以这样做呢？这是因为：JavaScript 是一种「弱类型语言」，或者说是一种「动态语言」，这意味着不需要提前声明变量的类型，在程序运行过程中，类型会自动被确定。

JS 的变量数据类型，是在程序运行的过程中，根据等号右边的值来确定的。而且，变量的数据类型是可以变化的。比如说：

var name = 'qianguyihao';

name = 123; // 强制将变量 name 修改为 数字类型

2.JS中的数据类型

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

注意：内置对象 Function、Array、Date、RegExp、Error 等都是属于 Object 类型。
也就是说，除了那五种基本数据类型之外，其他的，都称之为 Object 类型。

面试问：引用数据类型有几种？
面试答：只有一种，即 Object 类型。

数据类型之间最大的区别：

• 基本数据类型：参数赋值的时候，传数值。
• 引用数据类型：参数赋值的时候，传地址（修改的同一片内存空间）。

3.栈内存和堆内存

我们首先记住一句话：JS中，所有的变量都是保存在栈内存中的。

基本数据类型：

基本数据类型的值，直接保存在栈内存中。值与值之间是独立存在，修改一个变量不会影响其他的变量。

引用数据类型：

对象是保存到堆内存中的。每创建一个新的对象，就会在堆内存中开辟出一个新的空间，而变量保存了对象的内存地址（对象的引用）。如果两个变量保存了同一个对象的引用，当一个通过一个变量修改属性时，另一个也会受到影响。

三. typeof 运算符

typeof()表示“获取变量的数据类型”，返回的是小写，语法为：（两种写法都可以）

// 写法1
typeof 变量;

// 写法2
typeof(变量);

• typeof 这个运算符的返回结果就是变量的类型。那返回结果的类型是什么呢？是字符串。

返回结果：

typeof 的代码写法	返回结果
typeof 数字	number
typeof 字符串	string
typeof 布尔型	boolean
typeof 对象	object
typeof 方法	function
typeof null	object
typeof undefined	undefined

备注 1：为啥 typeof null的返回值也是 object 呢？因为 null 代表的是空对象。

备注 2：typeof NaN的返回值是 number，上一篇文章中讲过，NaN 是一个特殊的数字。

返回结果举例：

console.log(type []); // 空数组的打印结果：object

console.log(type {}); // 空对象的打印结果：object

代码解释：这里的空数组[]、空对象{} ，为啥他们在使用 typeof 时，返回值也是 object呢？因为这里的 返回结果object指的是引用数据类型。空数组、空对象都是引用数据类型 Object。

四. 变量的类型转换的分类

类型转换分为两种：显示类型转换、隐式类型转换。

显示类型转换

• toString()
• String()
• Number()
• parseInt(string)
• parseFloat(string)
• Boolean()

隐式类型转换

• isNaN ()
• 自增/自减运算符：++、—-
• 正号/负号：+a、-a
• 加号：+
• 运算符：-、*、/

隐式类型转换（特殊）

• 逻辑运算符：&&、||、！ 。非布尔值进行与或运算时，会先将其转换为布尔值，然后再运算，但运算结果是原值。
• 关系运算符：<、> <= >=等。关系运算符，得到的运算结果都是布尔值：要么是true，要么是false。

五. 作用域

作用域：变量起作用的区域

全局作用域 ：在script标签内，函数外的区域就是全局作用域，在全局作用内声明的变量叫做全局变量 。全局变量可以在任意地方访问。

函数作用域 ：在 函数内的区域 叫做函数作用

• 全局变量：在函数外，script 标签内声明的变量就是全局变量，全局变量在任何地方都能访问的到。
• 局部变量：在函数中声明的变量，就是局部变量，局部变量只有在当前函数体内能够访问。
• 隐式全局变量：没有使用var定义的变量也是全局变量，叫做隐式全局变量。(不要使用)

// 全局作用域 : script标签内, 函数外 
//            全局变量 => 任何地方都可以访问
// 函数作用域 : 函数内部 
//             局部变量 => `当前函数`内部

// 除了两个常用的变量还有 隐式全局变量 : 任何地方都能访问(前提是已经好)   (避免使用)(先执行函数)

六. 预解析

js执行代码分为两个过程：

• 预解析过程（变量与函数提升）
• 代码一行一行执行

预解析过程：分别举例

// 预解析过程
// 1. 把var声明的变量提升到当前作用域最前面,不会提升赋值 
// 2. 把函数声明 提升到当前作用域的最前面,,
// 3. 如果函数同名 ???  后者会覆盖前者  
// 4. 如果 var声明的 和 函数声明的同名 ,  函数优先

面试题：

//1. 
var num = 10;
//fn1();
function fn1() {
  console.log(num);
  var num = 20;
}

//2. 
var a = 18;
//fn2();
function fn2() {
    var b = 9;
    console.log(a);
    console.log(b);
}

//3.
fn3();
console.log(c);
console.log(b);
console.log(a);
function fn3() {
  var a = b = c = 9;
  console.log(a);
  console.log(b);
  console.log(c);
}

//4. 思考题
var a = 4;
console.log(a);
a = 6;
console.log(a);
function a() {
  console.log('哈');
}

a();

a = 10;
console.log(a);

七. 基本包装类型