携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情
前言：
距离下班还有半小时，说实话真的很困，熬夜不好，不能熬夜了，但是每次这么说，每次还是会熬夜的，第二天就困困困，好啦，说正事吧，前阵子把前端三兄弟HTML和CSS整理完了，却忘记把最主要的JavaScript整理好。今天正好把它整理好，如有不足之处，望指正。
一、JavaScript简介
1.什么是JavaScript
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。 [1] 【百度百科】
2.JavaScript的背景
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [2] 【百度百科】
JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015【百度百科】
3.JavaScript的组成
- ECMAScript
- DOM
- BOM
4.JavaScript的引用
1）内部引用
<script> 标签内
2）外部引用
通过script 标签的src 属性引入js文件
注意：不要同时使用内部引用和外部引用
二、JavaScript中的基本语法及术语
- JavaScript中的基本语法
1）语句：
- 值、运算符、表达式、关键词和注释
- 语句会按照它们被编写的顺序逐一执行
- 以分号结束语句不是必需的，是代码⻛格问题字面量
2）字面量
- 一般固定的值称为字面量比如： 3.14 、nick
- {} 对象字面量
- [] 数组字字面量
- function test() {} 函数字面量变量
3）变量
- 使用var 定义变量
- 变量声明是弱类型的，可以随时更改
- 变量可以通过变量名访问，字面量是一个恒定的值运算符
4）运算符
- 赋值，算术和位运算符
- 条件，比较及逻辑运算符
- 在运算符旁边（ = + - * / ）添加空格是个好习惯： 关键字
5）关键字
- 用于标识要执行的操作
- 比如var 是告诉浏览器创建一个变量保留字
6）保留字
- 以后可能会实现的关键字
- 可以不记，编辑器会变色关键字
2. 面向对象的概念
1）.什么是面向对象
维基百科： 面向对象程序设计（英语：Object-oriented programming，缩写：OOP）是种具有对象概念的程序编程典范，同时也是一种程序开发的抽象方针。它可能包含数据、属性、代码与方法。对象则指的是类的实例!!!它将对象作为程序的基本单元，将程序和数据封装其中，以提高软件的重用性、灵活性和扩展性，对象里的程序可以访问及经常修改对象相关连的数据。在面向对象程序编程里，计算机程序会被设计成彼此相关的对象
可能上面说的太过专业化，一开始我也没咋搞懂，知道别人告诉我一个生活中的例子，我才能对应起来，我把这个分享给你们
比如说我现在特别想吃酸菜鱼
- 面向过程（就是指代一个过程）
1.买材料，鱼 酸菜...
2.洗菜，洗🐟
3.烧鱼
4.吃鱼
- 面向对象（有一个对象）
1.找到酸菜鱼店面
2.点🐟
3.吃鱼
总之：js里面万物皆对象
创建对象
var Person = new Object()
对象里面有属性，有方法
三、JavaScript中变量
1.js中的变量的类型
1).原始类型
原始类型保存在栈内存里 7种原始类型
| 原始类型 | 含义 |
|---|---|
| Boolean | 非真即假 |
| Null | 指的是你声明了一个对象未设置值——可以理解尚未创建的对象 |
| Undefined | 声明了变量，但是没有赋值 |
| Number | 超过一定的范围，会丢失精度 |
| String | 在js里 字符串使用单引号或者双引号围住的 |
| Symbol | es6提出的概念 |
| BigInt |
2).引用类型
| 引用类型 | 含义 |
|---|---|
| Object | 万物皆对象 |
3).原始类型和引用类型区别
- 原始类型 值是保存在栈内存，按值保存
- 引用类型 栈内存里保存的指针， 堆内存里保存的是值
2.变量的声明规范
1).变量声明和变量赋值
- 单一声明
- 多个声明
2).声明规范
(1). 必须是以字⺟、下划线 ( _ ) 或者美元符号 ( $ )
(2). 开头变量是对大小写敏感的
(3). 关键字和保留字不能用
3).建议
1.定一个语义化变量名
2.小驼峰命名变量 myHeader
3.构造函数是用每个单词都是大写的 Person
4.建议不要用拼音
3.变量运算
1).运算优先级高于赋值
2).同类型的运算——直接值进行
3).运算不同类型的运算——类型转换，值进行运算
4.常⻅的运算符
一类数学符号，可以根据两个值(或变量)产生结果
1).算数运算符
+
-
*
/
%
可以和等号组合(复合赋值运算符) a += 2 => a = a + 2
2).关系运算符
1.大小比较 2.等值比较
3).自增自减
1.++ 2--
5.js当中的真真假假
- 真——满足条件就是真，变量可转为布尔值true
- 假——不满足条件就是假变量可转为布尔值false
1）真与假的运算
- 与 &&\
- 或 ||\
- 非 ！
2）6个假变量
1.false (布尔型)
2.null (用于定义空的或者不存在的引用)
3.undefined (未定义值)
4.0 (数字类型)
5. "" '' (空字符串) (字符型)
6. NaN(not a Number)
四、JavaScript中的流程控制语句
1.js基础语法之如何进行判断
1)语法
条件可以是表达式或者变量
// 语句1
} else {
// 语句2
}
- == 和 ===的区别
- == 会先判断数据类型一不一致，不一致的话就会转换数据类型\
- ===直接进行值判断
注意：
判断条件是否互斥
else if 有个好处，是满足了条件后，直接停止了
保证有个else，避免出现异常
2.使用三元运算改造判断
1)语法
条件 ? 表达式1 : 表达式2\
// 条件为true时，执行表达式1，否则执行表达式2
2)使用场景 非真即假的场景 3)注意 自带return
a > 0 ? str = 'ss' : str = 'sss'
4)条件链
str = a > 0 ? (a > 3 ? '大于3' : '小于等于3') : '小于等于0'
3.js中的switch语句
1)语法
switch(表达式) {
case n:
代码块
break;
case n:
代码块
break;
default:
默认代码块
}
2)和if 的选择
有3，4种以上条件的时候，就可以考虑使用switch
注意：内部严格按照=== 的规则，一定要值和类型相等才行使用break语句打断程序
4.for循环
1)语法
for (语句 1; 语句 2; 语句 3) {
要重复的代码块
}
// 语句1 声明一个变量
// 语句2 指定循环跳出条件
// 语句3 控制变量的变化
注意：
语句1，2，3都不是必需的
语句2不写的话，必须在代码块里使用break中断循环
5.while循环
1)语法
while (条件) {
代码块
}
do {
代码块
}while (条件)；
注意：
别忘了改变条件中的变量，不然就写了个死循环
do while 始终比while 多一次循环 ！！！
五、JavaScript重点——函数
1.函数及函数的组成
1)语法
function name(参数 1, 参数 2, 参数 3) {
要执行的代码
}
//实例
function sum(a, b) {
// return undefined return a * 10 + b
}
注：return 只能在函数里使用
2.形参和实参
- 形参——声明函数的时候定义的一个参数
- 实参——调用函数的时候传的一个参数
注：
形参和实参是一一对应的
数量可以不对应
函数可以设置默认参数
定义形参的时候需要语义化
实参可以是字面量也可以是变量
3.声明的方法
1)声明方式
//1函数声明
function name(参数) {
// 执行语句
}
// Date
// Array
//2.(匿名)函数表达式
//3.new Function()
注：
声明函数过程中，函数里的语句是不会执行
只有当调用函数的时候，函数里的语句才会执行
4.返回值
1)函数的作用
在恰当的时机里， 执行一段代码将值处理后，返回回来
2)return的作用
1.返回值
2.中断函数
3.只能写在函数体里面
5.变量作用域
1)变量
- 全局变量——挂载到window 对象上的
- 局部变量——函数体内部声明的变量
2)作用域链
内层函数是可以访问外层函数声明的一个变量
6.js中函数隐藏的参数
arguments
作用： 1)取参数
传入的实参都能在函数体里通过arguments类数组取到
如果下面多取了参数硬加在里面，使用arguments来取参数但是要在return之前，因为return会中断执行
2)具有数组的一些特点
1.通过索引取参 2.有长度
7.递归
含义——函数自己调用自己
注意：要有终止递归的条件,不然就变成死循环了
8.立即执行函数
1)含义
相当于一个一次性的函数
2)实例
以() [] 开头的语句，前面的语句必须加分号，否则会解析错误
3)两种写法
(1)把整个自调用函数用括号括起来了
(2)函数声明变成表达式的方法 只要将函数声明变成表达式就可以执行
4)特点
1.自动执行
2.执行完成以后销毁
5）证明销毁 可以传参数
六、JavaScript中的闭包
1).一个例子引入闭包
声明的var count是一个全局变量，在函数体外面声明的话它是可以在外部直接修改的
1.全局变量
在调用函数的时候虽然声明了一个变量，但是每次调用这个函数，就会初始化这个变量，也就是不断的初始化不断地加12.局部变量
需求——在函数的外界访问到函数的内部的一个变量(可以通过一个函数（这个函数又被成为闭包）)
2).函数上下文
（1）上下文
-
全局上下文——它有个全局对象windows,windows指的就是一个浏览器，无论是声明一个变量，还是一个函数，统统挂在的都是windows对象里面
-
函数上下文——全局对象里面声明了一些变量
（2）函数上下文产生、销毁
- 产生——函数执行的时候会形成自己的上下文(环境，对象)
- 销毁——函数执行结束的时候就结束
（3）总结 函数在执行的那一瞬间再调用内部的函数会产生函数上下文
3）闭包
(1).为什么需要是闭包
- JavaScript 变量属于本地或全局作用域
- 全局变量能够通过闭包实现局部（私有），只有调用函数才能改变变量
(2).产生闭包
通过调用函数时返回其内部的函数
(3)闭包的副作用
产生内存泄漏
(4)通过闭包能实现什么
实现外界访问函数体内部的变量
(5)一句话总结闭包
有权访问另一个函数作用域中的变量的函数
函数体内部的变量时只能通过内部的函数（闭包）去访问，不仅可以访问还可以对它进行操作，将inner这个函数return回去，（因为inner课可以访问count所以可以将它抛出去）用一个add变量接住并且调用函数test，（这个时候就产生了一个函数上下文，这个函数上下文就绑定在这个内部的函数函数上面了，因为它已经return出去了，产生出一个实体，被add接住了），调用这个add
七、JS中对象
1.对象
除了原始值，其他都是对象
原始值：Undefined、Null、Boolean、Number、 Symbol、BigInt 和String Null不是一个对象，是代表对象还未创建的变量
2.可以使用typeof 判断原始类型
栈内存里面保存的是对象的地址，这个地址指向的就是这个对象，原始类型的这个值就保存在栈里面
3.语法
4.js对象中的一些常⻅操作
- 查
1.通过. 运算符可以访问对象属性
2.或者[] 操作符访问， [] 里面可以写变量，也可以写字符串
遍历信息
- 增
通过
.创建属性
-
改 直接在属性上面改
-
删 通过delete 运算符
5.对象中的方法怎么访问自己的属性
1).通过对象.
2).通过this 访问对象自己
3).对象里面的属性是用，隔开的this在哪里输出，就指代那个对象
6.js中创建对象的几种方式
1).对象字面量 声明一个对象，赋值给一个变量
2).构造函数 1.Object
2.自定义构造函数(大驼峰)
this指向的是对象的本身
使用new 实例化一个对象，就像工厂一样
3.构造函数的参数
固定参数——不知道创建对象实例的时候，传入的参数是什么位置也要严格对应
不定参数
3).js底层剖析之new
- 创建了一个空的对象
- 帮助我们把对象返回回来
- 改变了this的指向，指向了空对象
New 创建了一个空对象，改变了this的指向，指向空对象，然后把对象返回回来
八、js-原型全面剖析
1.原型prototype的基本概念
function Person() {}
console.log(Person.prototype)
是Person的一个属性，也是一个对象，这个对象又有一个属性constructor,这个属性又指向person
2.原型的作用
如果直接输出person,是看不见的输出创建对象的country属性是能看见的,这个就是原型的作用
Prototype能够设置实例化出来的对象的属性，能够透过构造函数的prototype属性能够设置创建出来的属性
1)给构造出的对象设置公共的属性或方法
Prototype作为一个隐藏属性保存到实例化对象里面
输出为undefined，传入的对象是obj,new传入对象是空对象，没有name这个属性。构造函数的内部属性会覆盖掉原型上
2)建立了构造函数和实例化出来对象的联系(通过new创造出来的)
3)构造函数和原型都能写方法）选择问题：
- 凡是方法写在原型上 （方法为什么不写在构造函数——写在构造函数里的方法和属性会重新克隆一次，会导致占用内存较高）
- 需要配置的属性是写在构造函数上实例化对象的时候
- 实例化对象不能对原型上的属性进行改动
总结：只有构造函数才能对原型上的属性进行改动
原型（说实质的话）就是构造函数的属性
