JavaScript

最新推荐文章于 2024-09-17 13:42:29 发布

冰之华

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量211

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/adfgcxe/article/details/113880724

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JavaScript

概述

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 [1]

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [2]

JavaScript的标准是[ECMAScript ](https://baike.baidu.com/item/ECMAScript /1889420)。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES6。 [1]

ECMAScript 介绍

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。

ECMAScript实际上是一种脚本在语法和语义上的标准。实际上JavaScript是由ECMAScript，DOM和BOM三者组成的。所以说，在JavaScript，JScript和ActionScript中声明变量，操作数组等语法完全一样，因为它们都是ECMAScript。但是在操作浏览器对象等方面又有各自独特的方法，这些都是各自语言的扩展。

*世界五大主流浏览器*

不同的浏览器内核对网页的语法解释也不同，因此网页开发者需要在不同内核的浏览器中测试网页的渲染效果。
简单介绍一下五大主流浏览器。（按时间顺序）

*IE浏览器：*
IE是微软公司旗下浏览器，是目国内用户量最多的浏览器。IE诞生于1994年，当时微软为了对抗市场份额占据将近百分之九十的网景Netscape Navigator，于是在Windows中开发了自己的浏览器Internet Explorer，自此也引发了第一次浏览器大战。结果可想而知，微软大获全胜，网景不得不将自己卖给AOL公司。但实际上事情并没有结束，网景后来开发了风靡一时的Firefox火狐，至今Firefox也成为世界五大浏览器之一。
1996年，微软从Spyglass手里拿到Spyglass Mosaic的源代码和授权，开始开发自己的浏览器IE。后来，微软以IE和Windows捆绑的模式不断向市场扩展份额，使IE成为市场的绝对主流。现在装了Windows系统的电脑基本无法卸载IE。

*Opera浏览器：*
Opera是挪威Opera Software ASA公司旗下的浏览器。1995年，opera公司发布第一版Opera浏览器，使用自己研发的Presto内核。当时opera公司的开发团队不断完善Presto内核，使Opera浏览器一度成为顶级浏览器。直到2016年奇虎360和昆仑万维收购了Oprea浏览器，从此也丢弃了强大的Presto内核，改用当时Google开源的webkit内核。后来Opera浏览器跟随Google将浏览器内核改为Blink内核。自此Presto内核也淡出了互联网市场。

*Safari浏览器：*
第二次浏览器大战是从苹果公司发布Safari浏览器开始的。2003年，苹果公司在苹果手机上开发Safari浏览器，利用自己得天独厚的手机市场份额使Safari浏览器迅速成为世界主流浏览器。Safari是最早使用webkit内核的浏览器也是现在苹果默认的浏览器。

*Firefox浏览器：*
Firefox浏览器使Mozilla公司旗下浏览器，也是刚才提到的网景公司后来的浏览器。网景被收购后，网景人员创办了Mozilla基金会，这是一个非盈利组织，他们在2004年推出自己的浏览器Firefox。Firefox采用Gecko作为内核。Gecko是一个开源的项目，代码完全公开，因此受到很多人的青睐。Firefox的问世加快了第二次浏览器大战的开始。第二次浏览器大战与第一次二元鼎力的局面不同，这一次的特点就是百家争鸣，也自此打破了IE浏览器从98年网景被收购后独步浏览器市场的局面。

*Chrome浏览器：*
Chrome浏览器是google旗下的浏览器。Chrome浏览器至发布以来一直讲究简洁、快速、安全，所以Chrome浏览器到现在一直受人追捧。最开始Chrome采用webkit作为浏览器内核，直到2013年，google宣布不再使用苹果的webkit内核，开始使用webkit的分支内核Blink。

以上是五大浏览器的简介，接下来是四大内核。在介绍五大浏览器的同时也已经顺便介绍了四大内核。四大内核分别是：Trident（也称IE内核）、webkit、Blink、Gecko。五大浏览器采用的都是单内核，而随着浏览器的发展现在也出现了双内核。像360浏览器、QQ浏览器都是采用双内核。
作为前端开发，熟悉四大内核是非常有必要的。四大内核的解析不同使网页渲染效果更具多样化。下面总结一下各常用浏览器所使用的内核。
1、IE浏览器内核：Trident内核，也是俗称的IE内核；
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；
7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
8、百度浏览器、世界之窗内核：IE内核；
9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；

特点

JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

是一种解释性脚本语言（代码不进行预编译）。
主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
JavaScript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。JavaScript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
可以实现web页面的人机交互。

js Es5

基础知识

数据类型：基本类型引用类型类型的判断类型的转化
变量，内存，数据：var, 栈，堆
函数：定义，作用，使用，普通函数，函数表达式，回调函数，匿名函数
对象：定义，作用，使用，属性，方法

函数

原型：原型对象(函数原型)prototype ，隐式原型(实例对象) proto(原型链)
执行上下文：变量的提升，函数的提升，动态性

执行全局代码时，会产生一个执行上下文环境，每次调用函数都又会产生执行上下文环境。当函数调用完成时，这个上下文环境以及其中的数据都会被消除，再重新回到全局上下文环境。处于活动状态的执行上下文环境只有一个。

其实这是一个压栈出栈的过程——执行上下文栈。

执行上下文生命周期

1.创建阶段

(1).生成变量对象

(2).建立作用域链

(3).确定 this 指向

2.执行阶段

(1).变量赋值

(2).函数引用

(3).执行其他代码

3.销毁阶段

执行完毕出栈，等待回收被销毁

作用域：静态性(作用域链)

作用域链：当使用一个变量时候，先在自己的作用域里找，如果没有找到，再到父级作用域找，一直找到全局作用域，如果都没有找到即报错。
闭包：定义，作用，使用场景，模块

注：引用类型的__proto__属性指向它构造函数的prototype

对象

声明 : 方式，使用场景，属性的调用，方法的调用
继承：原型的继承

线程

单线程：执行顺序(初始化代码块，回调代码块)
浏览器知识基础：浏览器的知识及五大浏览器

补充

Json ，Ajax ，伪数组，转义字符，

this场景

this 几种不同的使用场景

常见用法

1.作为构造函数执行

2.作为对象属性执行

3.作为普通函数执行(this === window)

4.call apply

扩展

Error

定义：

error，指程序中的非正常运行状态，在其他编程语言中称为“异常”或“错误”。解释器会为每个错误情形创建并抛出一个Error对象，其中包含错误的描述信息。

ECMAScript定义了六种类型的错误。除此之外，还可以使用Error构造方法创建自定义的Error对象，并使用throw语句抛出该对象。

六种错误

ReferenceError:找不到对象时

TypeError:错误的使用了类型或对象的方法时

RangeError:使用内置对象的方法时，参数超范围

SyntaxError:语法写错了

EvalError:错误的使用了Eval

URIError:URI错误

错误的处理

使用try包裹的代码，即使不出错，效率也比不用try包裹的代码低；

在try中，尽量少的包含可能出错的代码；

无法提前预知错误类型的错误，必须用try catch捕获；

finally可以省略；

自定义异常

throw new Error(“提示文字”)；

try catch… (err.message) // 接住抛出的自定义错误

DOM

略

BOM

略

Js ES6(2015)

Let :不重复声明,块级作用域，变量不提升,有作用域链
const:声明大写且有初始值，变量不提升,有作用域链，不能修改内容
结构赋值，字符串模板，简化对象写化
箭头函数(this的用法，写法，使用场景)
函数参数默认值，rest函数参数(用来代替arguments)
扩展运算符([…])
Symbol(被称为第七种数据类型,类似字符串，由于解决命名冲突，不能参与运算，不能 for…in，for of遍历)
数组遍历方法(for in) foreach,map,everwy,some,filter,indexof,lastindexof,reduce

es6新增的方法(for of) from, of, fill ,find, findindex,includes(es7)

数组空位(es5 方法遍历会省略空，es6方法遍历会把空遍历undefined)
迭代器([Symbol.iterator],只要部署iterator接口就能被for…of遍历) 数组，伪数组，字符串， json
生成器(*) 用于解决异步回调问题(回调地狱)

function 和函数名之间有一个*号，

函数体内部使用了 yield 表达式创建生成器对象
Promise 是新的异步编程的新的解决方案，用来封装异步操作并返回结果

主要用于异步计算, 可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果,可以在对象之间传递和操作promise，帮助我们处理队列
(api) resolve(), reject(), then(), catch(), finally(), all([对象数组]), race([对象数组])
then 返回 promise对象对象的状态由then回调函数决定

then 返回非promise对象时对象状态为 resolve

then 返回是promise对象时对象状态为 then方法的返回值决定

then 返回是new Error()是对象状态为 reject

异步扩展：

原生 ajax
Jquery(ajax)
fetch(es6)
axios

注：

fetch()方法定义在Window对象以及WorkerGlobalScope对象上，用于发起获取资源的请求，其返回一个Promise对象，这个Promise对象会在请求响应后被resolve，并传回Response对象，对原生的扩展

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
Set es6 的新的数据结构(集合)