JS基础学习笔记
JavaScript基础学习笔记
本文根据B站pink老师的视频整理
由于有其他语言（C、JAVA）的基础，有些相同的内容就没有做笔记
如果你之前学过JAVA、C，那么这篇文章会比较适合你过一遍JS的基础
本文内容：
1. JS是什么
2. JS的作用
3. 浏览器如何执行JS
4. JS的三部分组成
4.1 ECMAScript
4.2 DOM文档对象类型
4.3 BOM浏览器对象模型
5. JS的书写位置
6. JS输入输出语句
7. 变量
7.1 变量的声明
7.2 变量的语法扩展
7.2.1 更新变量
7.2.2 同时声明多个变量
7.2.3 声明变量特殊情况
7.3 变量命名规范
8. 数据类型
8.1 为什么需要数据类型
8.2 变量的数据类型
8.3 数据类型的分类
8.4 简单数据类型
8.4.1 数字型
数字型范围
数字型的三个特殊值
isNaN()方法
8.4.2 字符串型
字符串引号嵌套
字符串转义
字符串长度
字符串拼接
8.4.3 Boolean类型
8.4.4 undefined、null
8.5 获取变量数据类型
8.6 数据类型转换
8.6.1 转换为字符型
8.6.2 转换为数字型
8.6.3 转换为布尔型
9. 运算符优先级
10. 函数参数
10.1 形参与实参的匹配问题
10.2 arguments的使用
11. 函数的两种声明方式
12. JS作用域
13. 作用域链
14. 预解析
15. 预解析案例
16. 对象
16.1 创建对象的三种方式
16.2 new关键字执行过程
16.3 遍历对象
初始JavaScript
1、JS是什么
- 是一种运行在客户端的脚本语言（script是脚本的意思）
- 脚本语言：不需要编译，运行过程中由 js 解释器（ js 引擎）逐行来进行解释并执行
- 现在可以基于 node.js 技术进行服务器端的编程
- HTML / CSS 是标记语言、描述类语言，相当于人的结构和衣服。而JS是一种编程类语言，它用来实现业务逻辑和页面控制，相当于人的各种动作
2、JS的作用
- 表单动态校验（密码强度检测）（JS产生的最初目的）
- 网页特效
- 服务端开发（ Node.js ）
- 桌面程序（ Electron ）
- App ( Cordova )
- 控制硬件-物联网（ Ruff ）
- 游戏开发（cocos2d-js）
3、浏览器如何执行JS
浏览器分为两部分：渲染引擎和JS引擎
- 渲染引擎：用来解析HTML和CSS，俗称内核。比如chrome浏览器的blink，老版本的webkit
- JS引擎：也称为JS解释器，用来读取网页中的JavaScript代码，对其处理后运行。比如chrome浏览器的V8
注意：浏览器本身并不会执行JS代码，而是通过内置JS引擎（解释器）来执行JS代码，JS引擎执行代码时，会逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。
4、JS的三部分组成
4.1 ECMAScript
ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 Javascript 或 JScript ，但实际上后两者是 ECMAScript 语言的实现和扩展
ECMAScript 规定了JS的编程语法和核心基础知识，是所有浏览器厂商共同遵循的一套JS语法工业标准
4.2 DOM 文档对象类型
文档对象模型( Document ObjectModel ，简称DOM) ，是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作( 大小、位置、颜色等 )
4.3 BOM 浏览器对象模型
BOM ( Browser Object Model ，简称BOM ) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等
5、JS的书写位置
5.1 行内式 JS
直接写到元素的内部。
例如：
<body>
<input type="button" value="hello" onclick="alert('你好呀！')">
body>
当点击hello按钮时，网页会弹出 “你好呀” 的窗口。
注意：
- 可以将单行或少量的JS代码写在html标签的事件属性内（以on开头的属性），如：
onclick - 注意单双引号的使用：在HTML中推荐使用双引号，在JS中推荐使用单引号
- 由于行内JS的写法可读性差，且嵌套时引号易错，所以在特殊请款下才使用
5.2 内嵌式的JS
把JS代码放到
打印的是10还是20？ 答案是20
如果函数中还有函数，那么在这个作用域种就又会诞生一个作用域
根据在内部函数可以访问外部函数变量的机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链。
可以理解为一种就近原则。
14、预解析
首先来看几个问题，看他们的结果会是怎样：
结果会报错，因为num既没有定义也没有赋值；
结果还是报错吗？不，结果变成了undifined
结果是多少？会报错吧应该，因为函数调用放到了最前面呀
错！结果会正常输出123
会正常输出123 ？ 错！
结果会报错：fn is not a function
看了上面的几个问题，下面正式来学习下预解析。
实际上，JS 引擎执行 JS 代码分为两步：预解析和代码执行
首先，JS 引擎会把 JS 里面所有的 var 还有 function 提升到当前作用域的最前面，然后再执行代码，即一行一行地运行代码。
预解析又分为变量预解析（变量提升）和函数预解析（函数提升）
变量预解析：把所有的变量声明提升到当前作用域的最前面，不提升赋值操作。
这就能很好的解释：
/*
为什么结果会是undefined？
实际上，首先进行了预解析，进行了变量提升，相当于执行了如下代码：
*/
var num;
console.log(num);
num = 10;
/* 变量只定义不赋值结果当然就是undefined了 */
/* 实际上相当于执行了以下代码： */
var fn; //提到最前面
fn();
fn = function (){
console.log(123);
}
/* 这样的代码结果当然会报错啦 */
同样的道理，再来看看函数预解析：就是把函数声明提升到当前作用域的最前面，不调用函数。
这就可以解释：
/* 为什么能够正常执行？
实际上是执行了以下代码：*/
/* 所以不管 fn() 在前面还是后面都不影响 */
15、预解析案例
案例一：
var num = 10;
fn();
function fn() {
console.log(num);
var num = 20;
}
答案是undifined
进行预解析后相当于：
var num;
function fn() {
var num;
console.log(num);
num = 20;
}
num = 10;
fn();
结果就是undefined
案例二：
var num = 10;
function fn() {
console.log(num);
var num = 20;
console.log(num);
}
fn();
结果是undefined 20
相当于执行了以下代码：
var num;
function fn() {
var num;
console.log(num);
num = 20;
console.log(num);
}
num = 10;
fn();
案例三：
var a = 18;
f1();
function f1() {
var b = 9;
console.log(a);
console.log(b);
var a = '123';
}
结果是undefined 9
相当于执行了：
var a;
funtion f1() {
var b;
var a;
b = 9;
console.log(a);
console.log(b);
a = '123';
}
a = 18;
f1();
案例四：
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
var a = b = c = 9;
console.log(a);
console.log(b);
console.log(c);
}
结果是9 9 9 9 9 a is not defined
相当于执行了以下代码：
function f1() {
var a;
a = b = c = 9;
console.log(a);
console.log(b);
console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);
/*
因为 var a = b = c = 9;
相当于是
var a = 9;
b = 9;
c = 9; 此时的 b , c 应该是全局变量
集体声明应该是：var a = 9,b = 9,c = 9;
*/
16、对象
16.1 创建对象的三种方式
1、利用对象字面量创建对象
var obj = {}; //创建了一个空的对象
var person = {
name: '张三';
age: 18;
sex: '男';
sayHi: function(){
console.log('hi');
}
}
注意：
-
属性和方法采用
键值对的形式 -
多个属性和方法中间用
逗号隔开 -
方法冒号后面跟的是一个匿名函数
-
调用对象的属性，有两种方法
方法一： 对象名.属性名
方法二：对象名['属性名']
- 调用对象的方法：
对象名.方法名()
2、利用new Object()创建对象
var person = new Object();
person.name = '张三';
person.age = 18;
person.sayHi = function(){
console.log('hi');
}
注意：
- 是利用等号赋值来添加属性和方法
- 用
分号;隔开 - 调用属性、方法和上面第一种方法一样
3、利用构造函数创建对象
有木有注意到，前面两种方法一次只能创建一个对象，如果里面的很多方法属性是相同的，那么一次又一次创建岂不是很麻烦 ？
因此，可以利用函数来重复这些相同的代码，这个函数就是构造函数，它里面封装的不是普通代码，而是对象。
所以，构造函数就是把对象里面相同的属性和方法抽象出来封装到函数里面。
创建语法：
function Person(name, age) {
this.name = name;
this.age = age;
this.say = function (str) {
console.log(str);
}
}
var zhangSan = new Person('张三', 18);
console.log(zhangSan.age);
zhangSan.say('hello');
注意：
- 构造函数名字的首字母要
大写 - 构造函数不需要 return 就可以返回结果，返回的是
object - 构造函数调用的时候必须要使用
new，就相当于创建了一个新的对象
16.2 new关键字执行过程
- 在内存种创建一个新的空对象
- 让
this指向这个空对象 - 执行构造函数里面的代码，给这个新对象添加属性和方法
- 返回这个新对象（所以构造函数不需要
return）
16.3 遍历对象
通过fon in来便利对象中的属性
var obj = {
name: 'xiaoming',
age: 18
}
for (var k in obj) {
console.log(k); //输出的是属性名
console.log(obj[k]); //输出的是值
}