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数据类型的四种方法
JS常用的内置对象有Date、Array、JSON,RegExp等。 一般来讲,Date和Array用的最频繁,JSON可以对对象和数组进行序列化和反序列化,还有一个作用就是实现对象的深拷贝。
RegExp即正则表达式,是处理字符串的利器。 关于数据类型和正则表达式的介绍可以参考博客:ES5对数组增强的9个API 和 JS正则表达式精简
1、函数原型链
Javascript虽然没有继承概念,但Javascript在函数Function对象中建立了原型对象prototype,并以Function对象为主线,从上至下,在内部构建了一条原型链。
简单来说就是建立了变量查找机制,当访问一个对象的属性时,先查找对象本身是否存在,如果不存在就去该对象所在的原型连上去找,直到Object对象为止,如果都没有找到该属性才会返回undefined。
因此我们经常会利用函数的原型机制来实现JS继承。关于函数原型链可参考博客:JS原型对象和原型链
2、函数作用域
函数作用域就是变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的。在JS中没有会块级作用域,只有函数作用域,因此JS中还存在着另外一种怪异现象,那就是变量提升。关于作用域的介绍请参考博客:函数的作用域和作用域链
3、函数指针 this
this 存在于函数中,它指向的是该函数在运行时被调用的那个对象。在实际项目中,遇到this的坑比较多,因此需要对this作深入的理解。
Function对象还提供了call、apply和bind等方法来改变函数的this指向,其中call和apply主动执行函数,bind一般在事件回调中使用,而call和apply的区别只是参数的传递方式不同。关于call,apply和bind的用户请参考博客:详解JS的call,apply和bind
4、构造函数 new
JS中的函数即可以是构造函数又可以当作普通函数来调用,当使用new来创建对象时,对应的函数就是构造函数,通过对象来调用时就是普通函数。
普通函数的创建有:显式声明、匿名定义、new Function() 等三种方式。
当通过new来创建一个新对象时,JS底层将新对象的原型链指向了构造函数的原型对象,于是就在新对象和函数对象之间建立了一条原型链,通过新对象可以访问到函数对象原型prototype中的方法和属性。new的详细介绍请参考博客:理解JS中的new运算符
5、闭包
闭包其实是一个主动执行的代码块,这个代码块的特殊之处是可以永久保存局部变量,但又不污染全局变量,可以形成一个独立的执行过程,因此我们经常用闭包来定义组件。关于闭包的介绍请参考:干货分享:让你分分钟学会JS闭包
6、单线程和异步队列
setTimeout和setInterval是JS内置的两个定时器,使用很简单,但这两个方法背后的原理却不简单。