Web前端知识体系精简

Sun, 05 Nov 2017 19:28:29 +0800

Web前端技术由html、CSS和JavaScript三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，对应的每个知识点点到为止，不作详细介绍。目的是帮助大家审查自己的知识结构是否完善，如有遗漏或不正确的地方，希望共勉。

JAVASCRIPT 篇

0、基础语法

Javascript基础语法包括：变量定义、数据类型、循环、选择、内置对象等。

数据类型有string,number,boolean,null,undefined,object等。其中，string,number和boolean是基础类型,null和undefined是JS中的两个特殊类型,object是引用类型。

Javascript可以通过typeof来判断基础数据类型，但不能够准确判断引用类型, 因此需要用到另外一个方法，那就是Object的toString,

JS常用的内置对象有Date、Array、JSON,RegExp等。一般来讲，Date和Array用的最频繁，JSON可以对对象和数组进行序列化和反序列化，还有一个作用就是实现对象的深拷贝。

RegExp即正则表达式，是处理字符串的利器。

1、函数原型链

Javascript虽然没有继承概念，但Javascript在函数Function对象中建立了原型对象prototype，并以Function对象为主线，从上至下，在内部构建了一条原型链。

简单来说就是建立了变量查找机制，当访问一个对象的属性时，先查找对象本身是否存在，如果不存在就去该对象所在的原型连上去找，直到Object对象为止，如果都没有找到该属性才会返回undefined。

因此我们经常会利用函数的原型机制来实现JS继承。

2、函数作用域

函数作用域就是变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。在JS中没有会块级作用域，只有函数作用域，因此JS中还存在着另外一种怪异现象，那就是变量提升。

3、函数指针 this

this 存在于函数中，它指向的是该函数在运行时被调用的那个对象。在实际项目中，遇到this的坑比较多，因此需要对this作深入的理解。

Function对象还提供了call、apply和bind等方法来改变函数的this指向，其中call和apply主动执行函数，bind一般在事件回调中使用，而call和apply的区别只是参数的传

递方式不同。

4、构造函数 new

JS中的函数即可以是构造函数又可以当作普通函数来调用，当使用new来创建对象时，对应的函数就是构造函数，通过对象来调用时就是普通函数。

普通函数的创建有：显式声明、匿名定义、new Function() 等三种方式。

当通过new来创建一个新对象时，JS底层将新对象的原型链指向了构造函数的原型对象，于是就在新对象和函数对象之间建立了一条原型链，通过新对象可以访问到函数对象原型prototype中的方法和属性。

精简 on 庞玉栋个人博客