JavaScript 概述

ECMAScript 和 JavaScript的關(guān)系

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

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

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

ECMAScript的歷史

年份	名稱	描述
1997	ECMAScript 1	第一個(gè)版本
1998	ECMAScript 2	版本變更
1999	ECMAScript 3	添加正則表達(dá)式 添加try/catch
?	ECMAScript 4	沒有發(fā)布
2009	ECMAScript 5	添加”strict mode”嚴(yán)格模式 添加JSON支持
2011	ECMAScript 5.1	版本變更
2015	ECMAScript 6	添加類和模塊
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)單地說，ECMAScript 描述了JavaScript語言本身的相關(guān)內(nèi)容。

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

JavaScript語言規(guī)范

JavaScript引入方式

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

<script>// 在這里寫你的JS代碼 </script>

引入額外的JS文件

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

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

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

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

結(jié)束符

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

JavaScript語言基礎(chǔ)

變量聲明

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

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

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

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

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

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語句，否則程序會(huì)繼續(xù)執(zhí)行后續(xù)case中的語句。

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 中的非常類似，只是定義方式有點(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)部訪問它（該變量的作用域是函數(shù)內(nèi)部）。只要函數(shù)運(yùn)行完畢，本地變量就會(huì)被刪除。

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

變量生存周期：

• JavaScript變量的生命期從它們被聲明的時(shí)間開始。
• 局部變量會(huì)在函數(shù)運(yùn)行以后被刪除。
• 全局變量會(huì)在頁面關(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)行詞法分析。

詞法分析的過程：

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

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

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

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

函數(shù)內(nèi)部無論是使用參數(shù)還是使用局部變量都到AO上找。看兩個(gè)例子：

var age = 18; function foo(){console.log(age);var age = 22;console.log(age); } foo(); // 問：執(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 詞法分析過程： 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í)行過程： 注意：執(zhí)行過程中所有的值都是從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值的語句了

?

總結(jié)

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

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