JS基础知识总结（ECMA Script部分）

2019-02-24 本文已影响71人 reneeChoi

前言

最近总觉得自己所学到的Javascript基础知识不够系统，所以重新学习了Javascript的基本知识并有了这篇文章的产出，这篇文章主要是总结ECMA 262的的语法标准。

这篇文章的主要内容是小结于慕课网的视频课程《前端JavaScript面试技巧》, 如有错误，请多指正，谢谢。

1. 变量类型和计算

1.1 按储存方式区分变量类型

值类型：字符串（String）、数值（Number）、布尔值（Boolean）、Undefined、Null
占用空间固定，保存在栈中/保存与复制的是值本身/使用typeof检测数据的类型
引用类型：对象（Object）、数组（Array）、函数（Function）
占用空间不固定，保存在堆中/保存与复制的是指向对象的一个指针/使用instanceof检测数据类型/使用new()方法构造出的对象是引用型

另外，typeof运算符结果：undefined，string，number，Boolean，object，function。（typeof只能区分值类型的详细类型，区分引用类型时只能区分出函数）

1.2 JS中的内置函数

Object, Array, Boolean, Number, String, Function, Date, RegExp
作用：作为构造函数使用

1.3 JS内置对象

Math, JSON

1.4 如何理解Json

JSON是一个JS对象,也是一种数据格式
有两个API
JSON.stringify({a:10,b:11})//把对象变成字符串
JSON.parse('{a:10,b:11}')//把字符串变成对象

1.5 强制类型转换

1.5.1 if() {} if里会转换成false

0: false
NaN: false
'': false
null: false
false: false
undefined: false

1.5.2 === 与==

“==” 会强制类型转换
“===” 不会强制类型转换

另外，何时用===，何时用==？除了以下这种写法用==，其余全部用===

if(obj.a == null){
    //这里相当于obj.a === null || obj.a === undefined 简写形式
    //这是jquery源码中推荐的写法
}

1.6 构造函数

1.6.1 构造函数的特点

构造函数的首字母必须大写，用来区分于普通函数
内部使用的this对象，来指向即将要生成的实例对象
使用New来生成实例对象

1.6.2 构造函数的扩展

var a = {} 其实是var a = new Object()的语法糖
var a = [] 其实是var a = new Array()的语法糖
function Foo(){...} 其实是var Foo = new Function(...)
使用instanceof判断一个函数是否是一个变量的构造函数，如判断一个变量是否为“数组”：
变量 instanceof Array

2. 原型和原理链

2.1原型

2.1.1 5条原型规则（是学习原型链的基础）

所有的引用类型（数组，对象，函数），都具有对象特性，即可自由扩展属性（除“null”以外）。
所有的引用类型，都有一个proto属性（隐式原型属性），属性值是一个普通的对象。
所有的函数，都有一个prototype属性（显式原型），属性值是一个普通的对象。
所有的引用类型，proto属性值指向它的构造函数的“prototype”属性值。（两者完全相等）
当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的proto（即它的构造函数的prototype）中寻找。

2.1.2 补充

this：实例调用构造函数的方法时，this永远指向实例自身
循环对象自身的属性： for in

var item
for(item in f){
    //高级浏览器已经在for in中屏蔽了来自原型的属性
    //但是这里建议大家还是加上这个判断，保证程序的健壮性
    if(f,hasOwnProperty(item)){
        console.log(item);
    }
}

2.2原型链

原型链继承的例子（之后补充）

instanceof

f instanceof Foo的判断逻辑是：
1. f的__proto__一层一层往上，能否对应到Foo.prototype
2. 再试着判断f instanceof Object

2.3 New一个对象的过程

创建一个新对象
this指向这个新对象
执行代码，即对this赋值
返回this

3. 闭包和作用域

3.1 作用域

3.1.1 执行上下文

执行上下文的分类

全局：变量定义，函数声明（一段<script>）
函数：变量定义、函数声明、this、arguments (函数中)
另外， ”函数声明“与“函数表达式”的区别：比如函数声明是functon fn(){ }，函数表达式是var fn = function(){};

fn()//不会报错
function fn(){
    //函数声明, 全局上下文提取到fn()函数
}

fn1()//会报错
var fn1 = function(){
    //函数表达式，全局上下文会提取到fn1为undefined
}


fn('zhangsan')
function fn(name){
    //函数
    console.log(this);
    console.log(arguments);
}

变量提升
执行代码块的时候，会将申明变量、函数、argument等提前提取出来，然后再执行代码，即变量提前，函数声明提前

this不同的使用场景
this要在执行时才能确认值，定义时无法确认

作为构造函数执行
作为对象属性执行
作为普通函数执行
call apply bind函数

var a = {
    name:'A',
    fn: function(){
        console.log(this.name);
        console.log(this )
    }
}
a.fn(); // this === a 
a.fn.call({name:'B'}) // this === {name:'B'}
var fn1 = a.fn; 
fn1(); // this === window

3.2 作用域概念

作用域
全局作用域，函数作用域，块级作用域（ES6: let, const）
作用域链：
自由变量：当前作用域没有定义的变量

3.2 闭包

定义：闭包是一个函数和函数所声明的词法环境的结合。
应用场景：模块化、封装。
优点：封装性强，使得变量始终保持在内存中。
缺点：内存的消耗导致的性能问题。
闭包创建：函数嵌套函数，使得内部函数返回出去，让外部来访问内部的变量。
闭包的使用场景
1.函数作为一个返回值
2.函数作为参数传递。
闭包的例子：需注意，一个函数的父级作用域是在它定义的时候的作用域，而非它执行时候的作用域。

function F1(){
    var a = 100;
    return function(){
        console.log(a) //100
    }
}

var f1 = F1();
var a = 200
f1()

4. 异步和单线程

4.1 异步

异步定义
同步会阻塞后续程序代码的执行，而异步不会阻塞程序的运行。
何时需要异步：

在可能发生等待的情况：在等待的过程中程序仍然要执行其他操作。
等待过程中不能像 alert 一样阻塞程序运行。

前端使用异步的场景：

定时任务：setTimeout，setInterval
网络请求：ajax 请求，动态 <img> 加载、脚本等文件下载和加载。
事件绑定

4.2 单线程

由于js是单线程，在代码执行的时候又不能因为执行需要等待的代码而造成阻塞，因此js会首先将无需等待的（同步）的代码执行完成后，来处理异步的代码，如果达到异步代码的执行条件的话，就会执行。

setTimeout的例子

console.log(1)
setTimeout(function(){//因为setTimeout是异步，所以执行时会被暂存起来
    console.log(2)
}, 0)
console.log(3)
setTimeout(function(){
    console.log((4))
},1000)
console.log(5)

//打印顺序 1 3 5 2 4

5. 其他知识点-日期和Math，数组API，对象API

5.1 日期常用的API

Date.now() //获取当前时间毫秒数
var dt = new Date();
dt.getTime()  //获取毫秒数
dt.getFullYear() //年
dt.getMonth()  //月(0-11)
dt.getDate()  //日(0-31)
dt.getHours() //小时
dt.getMinutes() //分钟(0-59)
dt.getSeconds() //秒(0-59)

5.2 Math常用的API

Math.random()  //(0-1)
//常见的用法：清除缓存，比如说网站访问链接，同一个链接会使同一个缓存，链接后面加上一个随机数，就可以清楚缓存

5.3数组API

forEach 遍历所有元素
every 判断所有元素是否都符合条件
some 判断是否有至少一个元素符合条件
sort 排序
map 对元素重新组装，生成新数组
filter 过滤符合条件的元素

5.4 对象API（for in）

var arr = [1, 2, 3]
arr.forEach(function(item, index){
    console.log(index, item)
})

// 0 1
// 1 2
// 2 3

var arr = [1, 2, 3]
var result = arr.every(function(item, index){
    if(item<4){
        return true;
    }
})
console.log(result) // true

var arr = [1, 2, 3]
var result2 = arr.some(function(item, index){
    if(item<2){
        return true
    }
})
console.log(result2) //true

var arr = [5,4,3,2,1]
var arr2 = arr.sort(function(a,b){
    //从小到大排序
    console.log(a+'..'+b)
    return a-b
    //从大到小排序
    // return b-a
})
console.log(arr2)

var arr = [1,2,3,4]
var arr2 = arr.map(function(item,index){
    //将元素重新组装，并返回
    return '<b>'+item+'</b>'
})
console.log(arr2)

var arr = [1,2,3]
var arr2 = arr.filter(function(item,index){
    //通过某一个条件过滤
    if(item >= 2){
        return true
    }
})
console.log(arr2)

//对象代码的例子
var obj={
    x:100,
    y:200,
    z:300
}
var key
for(key in obj){
    //hasOwnProperty判断是不是obj原生的属性
    if(obj.hasOwnProperty(key)){
        console.log(key,obj[key])
    }
}