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内置的两个定时器,使用很简单,但这两个方法背后的原理却不简单。

我们知道,JS是单线程语言,在浏览器中,当JS代码被加载时,浏览器会为其分配一个主线程来执行任务(函数),主线程会形成一个全局执行环境,执行环境采用栈的方式将待执行任务按顺序依次来执行。

但在浏览器中有一些任务是非常耗时的,比如http请求、定时器、事件回调等,为了保证其他任务的执行效率不被影响,JS在执行环境中维护了一个异步队列(也叫工作线程),并将这些任务放入队列中进行等待,这些任务的执行时机并不确定,只有当主线程的任务执行完成以后,才会去检查异步队列中的任务是否需要开始执行。这就是为什么setTimeout(fn,0) 始终要等到最后执行的原因。关于单线程和异步队列问题请参考:setTimeout(0)

7、异步通讯 Ajax技术

Ajax是浏览器专门用来和服务器进行交互的异步通讯技术,其核心对象是XMLHttpRequest,通过该对象可以创建一个Ajax请求。为了防止XSS攻击,浏览器对Ajax做了限制,不允许Ajax跨域请求服务器,就是只能访问当前域名下的url。

当然,如果确信你的站点不存在跨域的风险,可以在服务端主动开启跨域请求。 也可以直接通过CORS或JSONP来实现。

JSONP是利用脚本(script)跨域能力来模拟Ajax请求。

CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。 关于CORS的介绍请参考:跨域资源共享 CORS 详解

8、DOM对象 document

document对象里保存着整个web页面dom结构,在页面上所有的元素最终都会映射为一个dom对象。 document也提供了很多api来查找特定的dom对象,比如getElementById,querySelector等等。

9、事件系统 Event

事件是用户与页面交互的基础,到目前为止,DOM事件从PC端的 鼠标事件(mouse) 发展到移动端的 触摸事件(touch) 和 手势事件(guesture)

由于DOM结构可能会多层嵌套,因此也衍生出了两种事件流:事件捕获和事件冒泡,后者最常用。利用事件冒泡机制可以实现很多功能,比如页面点击统计。关于两种事件流的介绍请参考:事件冒泡和捕获

除此之外,在页面初始化、滚动、隐藏、返回等操作时分别内置了onload/onDOMContentLoaded、onscroll、onvisibility和onhashchange等事件,如果想要捕获这些事件,需要通过addEventLisener/attachEvent来进行绑定。

10、全局对象 window

在JS中,当一段JS代码在浏览器中被加载执行,JS引擎会在内存中构建一个全局执行环境,执行环境的作用是保证所有的函数能按照正确的顺序被执行,而window对象则是这个执行环境中的一个全局对象,window对象中内置了很多操作api和对象,document对象就是其中一个。关于JS执行环境的介绍请参考博客:深入理解JS执行细节

参考: https://blog.csdn.net/w343516704/article/details/73457119

javascript知识体系的更多相关文章

  1. JavaScript知识体系索引

    JavaScript 参考手册 www.w3school.com.cn JavaScript基础语法 JavaScript的数据类型 Javascript的对象分类 JavaScript内置对象 Ja ...

  2. 《jQuery风暴》第2章 必须知道的JavaScript知识

    第2章 必须知道的JavaScript知识 JavaScript是jQuery应用的基础,掌握JavaScript这门语言是使用jQuery的基础条件.本章不会全面细致的讲解JavaScript的全部 ...

  3. 【转载】JavaScript基础知识体系

    前言 最近总是有一种感觉,对于知识没有积淀,很多时候都是忘记了哪里就去查一下,比如JS这种语言,很是浪费时间,如果能够把这些知识形成知识体系塞进大脑,做到即用即取就好了,那么就可以借助思维导图来帮助我 ...

  4. web前端知识体系总结

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  5. 自己总结的web前端知识体系大全【欢迎补充】

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  6. github上最全的资源教程-前端涉及的所有知识体系

    前面分享了前端入门资源汇总,今天分享下前端所有的知识体系. 个人站长对个人综合素质要求还是比较高的,要想打造多拉斯自媒体网站,不花点心血是很难成功的,学习前端是必不可少的一个环节, 当然你不一定要成为 ...

  7. android知识体系

    1.Android架构分为4层*应用程序层 Android会同一系列核心应用程序包一起发布,该应用程序包包括email客户端,SMS短消息程序,日历,地图,浏览器,联系人管理程序等.所有的应用程序都是 ...

  8. web前端知识体系大全

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  9. web前端知识体系小结(转)

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

随机推荐

  1. Saiku + Kylin 多维分析平台探索

    背景 为了应对各种数据需求,通常,我们的做法是这样的: 对于临时性的数据需求:写HQL到Hive里去查一遍,然后将结果转为excel发送给需求人员. 对于周期性的.长期性的数据需求:编写脚本,结合Hi ...

  2. android studio 添加get,set方法快捷方式

    android studio 添加get,set方法快捷方式

  3. 利用arcgis发布综合又详细的地理定位服务

    数据: sheng:省,city:城市,xian:区县,street2:街道,life:生活服务(house:住宅小区)需求: 根据经纬度信息,得到详细地址信息,比如:甘肃省兰州市**县**街道**小 ...

  4. render函数

    vue2.0之render函数   虽然vue推荐用template来创建你的html,但是在某些时候你也会用到render函数. 虚拟DOM Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的 ...

  5. LNMP的并发配置和资源分配

    PHP程序性能如何?程序的并发可以达到多少?程序的瓶颈在哪儿?为了满足业务需求应该购买多少台服务器?负载均衡中php应用服务器需要多少台? LNMP中的N是nginx充当Web Server 内容的分 ...

  6. python-数据分析与展示(Numpy、matplotlib、pandas)---2

    笔记内容整理自mooc上北京理工大学嵩天老师python系列课程数据分析与展示,本人小白一枚,如有不对,多加指正 1.python自带的图像库PIL 1.1常用API  Image.open()    ...

  7. Golang字符串解析成数字

    package main import ( "strconv" "fmt" ) func main() { // 使用ParseFloat解析浮点数,64是说明 ...

  8. Golang闭包案例分析与普通函数对比

    闭包案例 package main import ( "fmt" "strings" //记住一定引入strings包 ) //①编写一个函数makeSuffi ...

  9. php操作共享内存shmop类及简单使用测试(代码)

    SimpleSHM 是一个较小的抽象层,用于使用 PHP 操作共享内存,支持以一种面向对象的方式轻松操作内存段.在编写使用共享内存进行存储的小型应用程序时,这个库可帮助创建非常简洁的代码.可以使用 3 ...

  10. 初识wxPython

    wxPython是包装C++编写的wxWidgets跨平台的GUI组件 安装wxPython pip install wxpython import wx def load(event): file ...