JavaScript 概述

ECMAScript 和 JavaScript的關(guān)系

1996年11月，JavaScript 的創(chuàng)造者 Netscape(網(wǎng)景) 公司，決定將 JavaScript 提交給國(guó)際標(biāo)準(zhǔn)化組織 ECMA ，希望這門(mén)語(yǔ)言能夠成為國(guó)際標(biāo)準(zhǔn)。次年，ECMA發(fā)布262號(hào)標(biāo)準(zhǔn)文件（ECMA-262）的第一版，規(guī)定了瀏覽器腳本語(yǔ)言的標(biāo)準(zhǔn)，并將這種語(yǔ)言稱(chēng)為ECMAScript，這個(gè)版本就是1.0版。

該標(biāo)準(zhǔn)一開(kāi)始就是針對(duì)JavaScript語(yǔ)言制定的，但是沒(méi)有稱(chēng)其為JavaScript，有兩個(gè)方面的原因。一是商標(biāo)，JavaScript本身已被Netscape注冊(cè)為商標(biāo)。二是想體現(xiàn)這門(mén)語(yǔ)言的制定者是ECMA，而不是Netscape，這樣有利于保證這門(mén)語(yǔ)言的開(kāi)發(fā)性和中立性。

因此ECMAScript和JavaScript的關(guān)系是，前者是后者的規(guī)格，后者是前者的一種實(shí)現(xiàn)。JavaScript = ECMAScript + JavaScript自己特有的東西(BOM+DOM)

ECMAScript的歷史

年份	名稱(chēng)	描述
1997	ECMAScript 1	第一個(gè)版本
1998	ECMAScript 2	版本變更
1999	ECMAScript 3	添加正則表達(dá)式 添加try/catch
?	ECMAScript 4	沒(méi)有發(fā)布
2009	ECMAScript 5	添加”strict mode”嚴(yán)格模式 添加JSON支持
2011	ECMAScript 5.1	版本變更
2015	ECMAScript 6	添加類(lèi)和模塊
2016	ECMAScript 7	增加指數(shù)運(yùn)算符（**） 增加Array.prototype.includes

注：ES6就是指ECMAScript 6。

盡管 ECMAScript 是一個(gè)重要的標(biāo)準(zhǔn)，但它并不是 JavaScript 唯一的部分，當(dāng)然，也不是唯一被標(biāo)準(zhǔn)化的部分。實(shí)際上，一個(gè)完整的 JavaScript 實(shí)現(xiàn)是由以下 3 個(gè)不同部分組成的：

• 核心（ECMAScript）?
• 文檔對(duì)象模型（DOM） Document object model (整合js，css，html)
• 瀏覽器對(duì)象模型（BOM） Broswer object model（整合js和瀏覽器）

簡(jiǎn)單地說(shuō)，ECMAScript 描述了JavaScript語(yǔ)言本身的相關(guān)內(nèi)容。

• JavaScript 是腳本語(yǔ)言
• JavaScript 是一種輕量級(jí)的編程語(yǔ)言。
• JavaScript 是可插入 HTML 頁(yè)面的編程代碼。
• JavaScript 插入 HTML 頁(yè)面后，可由所有的現(xiàn)代瀏覽器執(zhí)行。
• JavaScript 很容易學(xué)習(xí)。

JavaScript語(yǔ)言規(guī)范

JavaScript引入方式

Script標(biāo)簽內(nèi)寫(xiě)代碼

<script>// 在這里寫(xiě)你的JS代碼 </script>

引入額外的JS文件

<script>可以定義在html頁(yè)面的任何地方。但是定義的位置會(huì)影響執(zhí)行順序。
? ? ? ? <script>可以定義多個(gè)。

<script src="myscript.js"></script>

注釋（注釋是代碼之母）- 和 java 注釋基本一樣

// 這是單行注釋/*這是多行注釋 */

結(jié)束符

JavaScript中的語(yǔ)句要以分號(hào)（;）為結(jié)束符。

JavaScript語(yǔ)言基礎(chǔ)

變量聲明

• JavaScript的變量名可以使用_，數(shù)字，字母，$組成，不能以數(shù)字開(kāi)頭。
• 聲明變量使用?var 變量名;?的格式來(lái)進(jìn)行聲明
• 變量名是區(qū)分大小寫(xiě)的。
• 推薦使用駝峰式命名規(guī)則。
• 保留字不能用做變量名。

var name = "lp"; var age = 18;

ES6新增了 let 命令，用于聲明變量。其用法類(lèi)似于 var，但是所聲明的變量只在 let 命令所在的代碼塊內(nèi)有效。例如：for 循環(huán)的計(jì)數(shù)器就很適合使用 let 命令。

for (let i=0;i<arr.length;i++){...}

ES6新增 const 用來(lái)聲明常量。一旦聲明，其值就不能改變。

const PI = 3.1415; PI // 3.1415 PI = 3 // TypeError: "PI" is read-only

保留字列表：

abstract boolean byte char class const debugger double enum export extends final float goto implements import int interface long native package private protected public short static super synchronized throws transient volatile

運(yùn)算符

算數(shù)運(yùn)算符

+ - * / % ++ --

比較運(yùn)算符

> >= < <= != == === !==

注意：

1 == “1” // true 1 === "1" // false

邏輯運(yùn)算符

&& || !

賦值運(yùn)算符

= += -= *= /=

流程控制

if-else

var a = 10; if (a > 5) {console.log("yes"); } else {console.log("no"); }

if-else if-else

var a = 10; if (a > 5) {console.log("a > 5"); } else if (a < 5) {console.log("a < 5"); } else {console.log("a = 5"); }

switch

var day = new Date().getDay(); switch (day) {case 0:console.log("Sunday");break;case 1:console.log("Monday");break;default:console.log("...") }

switch中的case子句通常都會(huì)加break語(yǔ)句，否則程序會(huì)繼續(xù)執(zhí)行后續(xù)case中的語(yǔ)句。

for

for (var i=0;i<10;i++) {console.log(i); }

while

var i = 0; while (i < 10) {console.log(i);i++; }

三元運(yùn)算

var a = 1; var b = 2; var c = a > b ? a : b

函數(shù)

函數(shù)定義

JavaScript 中的函數(shù)和 Python 中的非常類(lèi)似，只是定義方式有點(diǎn)區(qū)別。

// 普通函數(shù)定義 function f1() {console.log("Hello world!"); }// 帶參數(shù)的函數(shù) function f2(a, b) {console.log(arguments); // 內(nèi)置的arguments對(duì)象console.log(arguments.length);console.log(a, b); }// 帶返回值的函數(shù) function sum(a, b){return a + b; } sum(1, 2); // 調(diào)用函數(shù)// 匿名函數(shù)方式 var sum = function(a, b){return a + b; } sum(1, 2);// 立即執(zhí)行函數(shù) (function(a, b){return a + b; })(1, 2);

補(bǔ)充：ES6中允許使用“箭頭”（=>）定義函數(shù)。

var f = v => v; // 等同于 var f = function(v){return v; }

如果箭頭函數(shù)不需要參數(shù)或需要多個(gè)參數(shù)，就是用圓括號(hào)代表參數(shù)部分：

var f = () => 5; // 等同于 var f = function(){return 5};var sum = (num1, num2) => num1 + num2; // 等同于 var sum = function(num1, num2){return num1 + num2; }

函數(shù)中的arguments參數(shù)

function add(a,b){console.log(a+b);console.log(arguments.length) }add(1,2)

注意：函數(shù)只能返回一個(gè)值，如果要返回多個(gè)值，只能將其放在數(shù)組或?qū)ο笾蟹祷?/strong>。

函數(shù)的全局變量和局部變量

局部變量：在JavaScript函數(shù)內(nèi)部聲明的變量（使用 var）是局部變量，所以只能在函數(shù)內(nèi)部訪問(wèn)它（該變量的作用域是函數(shù)內(nèi)部）。只要函數(shù)運(yùn)行完畢，本地變量就會(huì)被刪除。

全局變量：在函數(shù)外聲明的變量是全局變量，網(wǎng)頁(yè)上的所有腳本和函數(shù)都能訪問(wèn)它。

變量生存周期：

• JavaScript變量的生命期從它們被聲明的時(shí)間開(kāi)始。
• 局部變量會(huì)在函數(shù)運(yùn)行以后被刪除。
• 全局變量會(huì)在頁(yè)面關(guān)閉后被刪除。

作用域

首先在函數(shù)內(nèi)部查找變量，找不到則到外層函數(shù)查找，逐步找到最外層。

幾個(gè)例子：

// 1. var city = "BeiJing"; function f() {var city = "ShangHai";function inner(){var city = "ShenZhen";console.log(city);}inner(); }f(); //輸出結(jié)果是？ShenZhen// 2. var city = "BeiJing"; function Bar() {console.log(city); } function f() {var city = "ShangHai";return Bar; } var ret = f(); ret(); // 打印結(jié)果是？BeiJing// 3.閉包 var city = "BeiJing"; function f(){var city = "ShangHai";function inner(){console.log(city);}return inner; } var ret = f(); ret();

詞法分析（嘗試?yán)斫?#xff09;

JavaScript中在調(diào)用函數(shù)的那一瞬間，會(huì)先進(jìn)行詞法分析。

詞法分析的過(guò)程：

當(dāng)函數(shù)調(diào)用的前一瞬間，會(huì)先形成一個(gè)激活對(duì)象：Avtive Object（AO），并會(huì)分析以下3個(gè)方面：

函數(shù)參數(shù)，如果有，則將此參數(shù)賦值給AO，且值為undefined。如果沒(méi)有，則不做任何操作。

函數(shù)局部變量，如果AO上有同名的值，則不做任何操作。如果沒(méi)有，則將此變量賦值給AO，并且值為undefined。

函數(shù)聲明，如果AO上有，則會(huì)將AO上的對(duì)象覆蓋。如果沒(méi)有，則不做任何操作。

函數(shù)內(nèi)部無(wú)論是使用參數(shù)還是使用局部變量都到AO上找?？磧蓚€(gè)例子：

var age = 18; function foo(){console.log(age);var age = 22;console.log(age); } foo(); // 問(wèn)：執(zhí)行foo()之后的結(jié)果是？undefined 和 22// 第二題： var age = 18; function foo(){console.log(age);var age = 22;console.log(age);function age(){console.log("呵呵");}console.log(age); } foo(); // 執(zhí)行后的結(jié)果是？ ? age(){console.log("呵呵");} 和 22 和22 詞法分析過(guò)程： 1、分析參數(shù)，有一個(gè)參數(shù)，形成一個(gè) AO.age=undefine; 2、分析變量聲明，有一個(gè) var age, 發(fā)現(xiàn) AO 上面已經(jīng)有一個(gè) AO.age，因此不做任何處理 3、分析函數(shù)聲明，有一個(gè) function age(){...} 聲明， 則把原有的 age 覆蓋成 AO.age=function(){...};最終，AO上的屬性只有一個(gè)age，并且值為一個(gè)函數(shù)聲明執(zhí)行過(guò)程： 注意：執(zhí)行過(guò)程中所有的值都是從AO對(duì)象上去尋找1、執(zhí)行第一個(gè) console.log(age) 時(shí)，此時(shí)的 AO.age 是一個(gè)函數(shù)，所以第一個(gè)輸出的一個(gè)函數(shù) 2、這句 var age=22; 是對(duì) AO.age 的屬性賦值， 此時(shí)AO.age=22 ，所以在第二個(gè)輸出的是 22 3、同理第三個(gè)輸出的還是22, 因?yàn)橹虚g再?zèng)]有改變age值的語(yǔ)句了

?

總結(jié)

以上是生活随笔為你收集整理的前端之 JavaScript 基础的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。