[JavaScript知识库]JavaScript 学习笔记（小白必进，知识回顾必看）

JavaScript 学习笔记（小白必进，知识回顾必看）

引言：不用怀疑，除非你是大神（大神可以走了），否则该系列都能让你学有所得，帮你巩固你的知识体系。撰写该文章本意是为了记录我在学习过程中的各种知识点，方便回顾，毕竟你以为你会了和你真的会了还是有着巨大的区别；而且，JavaScript作为前端入门的重中之重，还是不容忽视的。不要说现在有各种框架和各种模板组件你就不需要学习了，JavaScript是基础，决定着你的上层建筑。地基不牢靠，迟早还是会和我一样回来重新夯实；

在搜索时你不难发现想要快速找到自己需要的内容总是需要花费大量的时间，各种各样X天快速入门，小白X天特训成前端大神的唬人标签和各种标题党、抄袭党真的会打击你继续下去的决心，标题唬人，但是却没有多少是从底层逻辑和理论知识基础来教授的。所以在我的前端开发专栏教程中，决定以笔记的形式进行记录和基础讲解，包括各种问题的排除，也希望能够帮助到和我一样遇到类似问题的小宝贝，希望在以后的日子中能多多指教，文章中出现的问题请留言，我会及时纠正，我们一起加油,一起进步

小呆提示：通过目录可以更快查找你需要的内容哟~

JavaScript 相关概念以及历史背景篇

刚开始从学习到现在，我耳边总是徘徊着这样的声音，JavaScript就是Java的一种；
你不会写Java就不会写JavaScript；
JavaScript和Java不就是同一家公司吗？

这些话影响你写代码嘛？不影响，但是当你需要研究更深层的底层逻辑时，你会发现知识不是你觉得他有用他才有用，没用的知识早就被淘汰了，那些官网还至于花费精力和时间专门记录和统计吗？
之所以进行区分是因为他们有一些概念是你早晚都得接触到的，从小老师有一句话叫 等到肚子痛了才想到来掏茅坑 ，与其被动地接受不如主动地出击，这样你才有同未来不可预见性的风险 所抗衡的 风险规避成本；
言归正传，我们一起探究一下两者的区别，在探究中展开学习：

Java和JavaScript的本质区别

Java 跟 JavaScript 虽然在名称上有些许相似，但其实是两种完全不同的语言；
Java是一种程序设计语言，JavaScript是客户端的脚本语言，把这两样东西放在一起比较在科学上其实并不严谨。但它们唯一相同的地方可能就是名字中都有Java；
那 JavaScript 为什么有 Java 这个词呢，是因为它里面借鉴了Java的对象的概念，所以才有了这个具有“迷惑性”的名称。

1. 开发公司不同

javascript与Java是由不同的公司开发的不同产品。
javascript是 网景公司（Netscape）的产品，其目的是为了扩展Netscape Navigator功能，而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言；
而Java是 IT及互联网技术服务公司（SUN Microsystems）公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发。
~
实际上，javascript 最初的名字并不是 javascript，而是LiveScript，名字中的“Java”是经过SUN Microsystems公司授权的。

2. 语言及对象方式不同

javascript是基于对象的，它是一种脚本语言，是一种基于对象和事件驱动的编程语言，因而它本身提供了非常丰富的内部对象供设计人员使用。
Java是面向对象的，即Java是一种真正的面向对象的语言，即使是开发简单的程序也必须设计对象。

3. 编译执行方式不同

javascript与Java在浏览器中所执行的方式不一样。javascript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户，即javascript语句本身随Web页面一起下载下来，由浏览器解释执行。
Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应平台上的仿真器或解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代码。

说到这里你应该是对JavaScript有了一个基本的轮廓，我们先总结如上，然后开始解决你刚才可能会出现的问题。

总结（Java和JavaScript的本质区别）

• 开发公司不同
• 语言及对象方式不同
• 编译执行方式不同

产生的问题：

1. 什么是解释型语言？什么又是编译型语言？
2. 什么是脚本语言？
3. 什么是面向对象，什么又是基于对象？
4. 开发 JavaScript 具体用在什么地方呢？怎么用
5. 暂时只想到这些，还有问题请打在留言

以下的问题解答以及我所有博客的问题解答都是为了拓展知识面，完善知识结构体系所设立的，真的地学习计算机肯定是全面的展开学习才能让你的知识体系坚如磐石，偏科无疑会使你的知识体系外强中干，当飓风来袭，终将变得不堪一击。这也是我在学习过程中摸索和实践所领悟的道理；也许会有人怼我说，那我全面的学习岂不是学的很慢。学知识从来都不是以速度取胜，是质量和侧重。有些知识，你可以不精，但你必须懂。你可以欺骗自己，但你欺骗不了你未来的人生。
拓展知识层面的广度可以培养我们在面对事情的思维方式和和思考方式，让我们有着更为全面的思考和解决方式。

什么是解释型语言？什么又是编译型语言？

我们编写的源代码是人类语言，我们自己能够轻松理解；但是对于计算机硬件（CPU），源代码就是天书，根本无法执行，计算机只能识别某些特定的二进制指令，在程序真正运行之前必须将源代码转换成二进制指令。

所谓的二进制指令，也就是机器码，是 CPU 能够识别的硬件层面的“代码”，简陋的硬件（比如古老的单片机）只能使用几十个指令，强大的硬件（PC和智能手机）能使用成百上千个指令。

然而，究竟在什么时候将源代码转换成二进制指令呢？不同的编程语言有不同的规定：
有的编程语言要求必须提前将所有源代码一次性转换成二进制指令，也就是生成一个可执行程序（Windows 下的 .exe），比如C语言、C++、Golang、Pascal（Delphi）、汇编等，这种编程语言称为编译型语言，使用的转换工具称为编译器。
有的编程语言可以一边执行一边转换，需要哪些源代码就转换哪些源代码，不会生成可执行程序，比如 Python、JavaScript、PHP、Shell、MATLAB 等，这种编程语言称为解释型语言，使用的转换工具称为解释器。

更多关于两者的详细定义与区别可以 查看详细>

什么是脚本语言和非脚本语言？

脚本语言是为了缩短传统的编写-编译-链接-运行（edit-compile-link-run）过程而创建的计算机编程语言。脚本语言是编程语言的子集。

脚本语言

• 一个脚本通常是解释执行而非编译。脚本语言通常都有简单、易学、易用的特性，目的就是希望能让程序员快速完成程序的编写工作。

脚本语言不需要编译，一句句解释执行就可以，脚本语言是读一行执行一行，边读边执行，而无需关注下一行的语言，例如JavaScript就是典型的轻量级脚本语言，此外还有 VBScript、Perl、PHP、Python；

非脚本语言（主要指编译型语言）

与脚本语言相对的就是非脚本语言，非脚本语言则是必须读取整个源程序内容、建立完执行环境后执行的语言。非脚本语言比如java、C这些，如果代码有错误，编译这关都通过不了，更运行并不了；

而python等脚本语言，如果你代码里有错误，也可以运行到错误代码之前，遇到错误后停下并报错。导致这一差别是因为脚本语言没有编译这一步，而编译时会检查代码中的错误。

什么是面向对象，什么又是基于对象？

也许你或多或少都听过面对对象编程，面对过程编程，但是为什么呢？
你可以理解为，这是一种编程的方法，因为计算机无法直接理解我们一个业务的运作方式，而这种编程的方法是我们将世界的运作方式进行抽象化理解所建立的模型和方法；

例如：问题： 洗衣机里面放有脏衣服，怎么洗干净？

那么我就就在下面的定义中进行举例说明：

面向过程

面向过程——步骤化
说到面对对象，得先提及面向过程的方法，方便进行对比理解；面向过程就是分析出实现需求所需要的步骤，通过函数（方法）一步一步实现这些步骤，接着依次调用即可
所以**，面向过程是具体化的，流程化的**，解决一个问题，你需要一步一步的分析，一步一步的实现。

例:刚才的洗衣服，在面向过程中应该是流程化的：

1、执行加洗衣粉方法；

2、执行加水方法；

3、执行洗衣服方法；

4、执行清洗方法；

5、 执行烘干方法；

上面的步骤就是将 洗衣服这一个问题转变为一个又一个的方法，通过实现一个又一个的方法来实现问题的解决

面向对象

面向对象——行为化（概念相对抽象，可结合下面的例子理解）
面向对象是把整个需求按照特点、功能划分，将这些存在共性的部分封装成类（类实例化后才是对象），创建了对象不是为了完成某一个步骤，而是描述某个事物在解决问题的步骤中的行为

例：在面向对象中，我们又可以这样地去做：
1、我先弄出两个对象：“洗衣机”对象和“人”对象

2、针对对象“洗衣机”加入一些属性和方法：“洗衣服方法”“清洗方法”、“烘干方法”

3、针对对象“人”加入属性和方法：“加洗衣粉方法”、“加水方法”

4、然后执行

人.加洗衣粉

人.加水

洗衣机.洗衣服

洗衣机.清洗

洗衣机.烘干

解决同一个问题 ，面向对象编程就是先抽象出对象，然后用对象执行方法的方式解决问题。

基于对象

概念及背景：

而基于对象（Object-Based），和**面向对象（object-oriented）**则不是一个概念，不提供抽象、继承、重载等有关面向对象语言的功能。“基于对象”是面向对象编程新趋势，是走向动态化的一次变革。业界在多个领域已经感受到它的优点，并且开始广泛接受这个概念。

现在应用最广的基于对象的语言，应该是JavaScript和Lua。其中JS语言的发展尤其快，已经从浏览器脚本，发展成一门通用的脚本语言，通过node.js框架在服务器端也占据了一席之地，并且随之HTML5在手机端的流行，JS更是成为了前端编程的必备武器。

什么是基于对象？

面向对象：是先有一个抽象的对象描述（类）， 然后根据这个描述去构建新的对象（实例化对象）
基于对象： 是先有一个具体的对象，然后根据这个具体的对象，再去创建新的对象（实例化对象）

举两个例子来结合上面的两条概念，方便进行理解：

1. 比如建造房子：
   面向对象：是先设计好图纸，然后按照这个图纸的设计去建造房子、房屋内部结构；
   基于对象：是先建造一个房子，然后根据房子的样子，再去建造房子内部结构
   2.回到刚才的洗衣服问题：
   面向对象的过程我们都知道了，那么基于对象则应该是：
   对象为 人-洗衣机
   过程就应该为：
   1、人加水加洗衣液
   2、人启动洗衣机，洗衣机自动洗涤然后烘干

JavaScript 诞生以及历史背景（补充说明）

该部分为部分历史的补充，可以选择观看
JavaScript和JScipt.的关系
javascript之父是布兰登·艾奇，JavaScript前身叫做LiveScript。
网景公司有一个浏览器，当时非常著名，叫领航者浏览器 “Navigator” 当时网景公同开发JavaScript的目的是为了占领“浏览器”市场；而 JavaScript 语言是为领航者浏览器专门量身打造的。JavaScript 只支持 Navigator浏览器，其它浏览器不支持。这个时候微软慌了，马上组建团队，开发了一种编程语言叫做 JScript ，专门和JavaScript抗衡的，只支持IE浏览器。网景公司在某个历史阶段，和SUN公司有合作，SUN公司把LiveScript,改名为JavaScript；
JavaScript 是一门编程语言，专门用来操作HTML页面中的节点，让网页产生动态效果的
JavaScript中也有变量、数据类型、运算符、if语句、for循环、标识符、关键字等。

就像是就像是三国鼎立和后来的天下归一，JavaScript和JScipt 的竞争直接导致了程序员需要使用两种语言编写两套规范，这显然是不符合技术的发展的要求的。所以终于由 ECMA欧洲计算机制造商协会 制定了规则，也降低了技术入门门槛，最关键的是程序员可以更高效的专注于开发；可以说 JavaScrip是ECMA-262标准的实现和扩展。

JavaScript包括三块

ECMAScript、DOM、BOM

1. ECMAScript 是 ECMA 制定的262标准，JavaScript 和 JScript 都遵守这个标准，ECMAScript,是JavaScript核心语法

2. DOM编程是通过JavaScript对HTML 中的 dom 节点进行操作，DOM是有规范的，DOM规范是W3C制定的

3. BOM编程是对浏览器本身操作，例如:前进、后退、地址栏、关闭窗口、弹窗等。由于浏览器有不同的厂家制造，所以BOM缺少规范，一般只是有一个默认的行业规范。

补充说明：

什么是dom?(补充说明)

DOM全称 Document Object Model，即文档对象模型，它允许脚本(JavaScript以后的文章中简称JS) 控制Web页面、窗口和文档；

简单演示一下：

<head>
	<meta charset="utf-8">
	<title>我的第一个html页面</title>
</head>
<body>
	<h1>hello world ！</h1>
	<h2>hello world ！</h2>
	<a href="https://www.baidu.com/" target="_blank">超链接1（新窗口）</a>
	<a href="https://www.baidu.com/" target="_top">超链接2（原窗口页面）</a>
</body>
</html>

复制文档，在桌面创建一个文本文档，就是 .txt 后缀的文件，然后粘贴这段代码，保存关闭后重命名文档，将后缀改为 .html ，然后便可以双击打开或使用浏览器打开（这可是基基基基基基础操作，不赘述了），然后你可以看到一个hello world的页面，不要在意他很丑，因为在你什么都没会之前他就只能这么丑。再然后按 F12 或 鼠标右键 =>检查

当你把鼠标悬浮于这些标签对上面时你会发现他会出现悬浮效果，而这一对标签对就是一个DOM节点，有时候我们可以直接写JS代码对DOM节点中的元素进行直接操作以得到我们想要的效果，比如点击文本触发事件等等我们后面会详述，这里制作概念理解。

什么是Bom?（补充说明）

BOM 全称 Browser Object Model 是浏览器对象模型，浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。
概念比较抽象，举个例子，加入我们打开一个网页，点击该网页中的超链接，一般会有两种方式打开:
a.在新的页面打开（重新打开一个新窗口）
b.在当前页面打开（覆盖原页面）
这就是一个最基本的BOM对象的操作，BOM下的windows对象进行了打开新窗口 open的操作，open选定操作类型为新窗口或原来的窗口；

总结

终于，我们的概念部分算是结束了，我们也来简单地梳理一下该章所涉及的知识点
首先

• JavaScript是由网景公司开发的客户端的脚本语言，最开始叫 LiveScript，。跟 java 不同，并且它是解释性编程语言
• 面向过程——步骤化 解决一个问题需要一步一步的分析，一步一步的实现。
• 面向对象——行为化 面向对象是把整个需求按照特点、功能划分并封装成类，类实例化为对象，对象描述行为
• 基于对象 先有一个具体的对象，然后根据这个具体的对象，再去创建新的对象（实例化对象）
• JavaScript包括三块 ECMAScript、DOM、BOM

本节结语

如果你已经看到着你，那恭喜你，你成功的学完了后面学习所需要的铺垫知识。
路漫漫其修远兮，学习本就是一个循序渐进的过程而不是三两分钟就可以了事儿。如果你看完后觉得迷糊、懵逼，相信我，这属于正常状况请不要怀疑你自己，你可以不断回顾相关知识加深印象，未来的未来能给你提供不少帮助。举个自身例子
还记得小时候我喜欢看地理中国，就是单纯的感兴趣，不断地回顾；好处是后来初高中地理对我来说是轻松容易的，毕竟好多东西我小时候就知道了，在这里说这个不是为了寻求赞同和自夸，我只是把我自己的亲生经历分享给大家参考，这样大家能够更准确地找寻适合自己的道路；
我相信来学习这个专题系列的小伙伴都是希望通过自己的努力去完成或创造些什么，那么，不管后面你遇到什么，一定要脚踏实地地学习，并坚持下去；踩坑是不可避免的，但我更希望像我这样不断踩坑的小朋友能够借助博文等等的东西帮助自己少踩坑，快速提升自己，不说达到大气层吧，至少突破自己的天花板。在以后的日子里，我将会是你的做朋友，陪你一起打怪升级…