摘要:原文第一章主要介紹的大概情況基本語法。通過和來引用對象屬性或數組元素的值就構成一個表達式。
原文:https://keelii.github.io/2016/06/16/javascript-definitive-guide-note-0/
JavaScript 簡介第一章 主要介紹 JavaScript 的大概情況、基本語法。之前沒有 JavaScript 基礎的看不懂也沒關系,后續(xù)章節(jié)會有進一步的詳細說明,我會通讀一遍 《JavaScript 權威指南》,然后根據個人的理解整理出來我認為重要的核心概念,同時我也會參考原版英文版 JavaScript The Definitive Guide,取一些關鍵性、重要的單詞做補充
中文排版指南遵守 中文文案排版指北,歡迎批評批正
JavaScript 是面向 web 的編程語言,是一門 高階的(high-level)、動態(tài)的(dynamic)、弱類型的(untyped)解釋型(interpreted)編程語言,適合面向對象(oop)和函數式的(functional)編程風格。JavaScript 語法源自 Java 和 C,一等函數(first-class function)來自于 Scheme,它的基于原型繼承來自于 Self
JavaScript 的版本JavaScript 語言規(guī)范由 ECMA 國際發(fā)布,版本號一般叫做 ECMAScript x,如:ECMAScript 3, ECMAScript 5, ECMAScript 6,簡稱 ES x
Mozilla 發(fā)布的 JavaScript 版本一般叫做 JavaScript x.x,如:JavaScript 1.3, JavaScript 1.5
Micorsoft 發(fā)布的 JavaScript 版本一般叫做 JScript
可以這么說 「Mozilla 和 Micorsoft 開發(fā)的瀏覽器中 JavaScript內核一般都實現了某個 ECMAScript 版本的規(guī)范」
JavaScript 語言核心有很多 API,比如:針對字符串、數組、正則、日期。但這些通常不包括輸入輸出 API(類似網絡、存儲、圖形相關的特性),輸入輸出 API 一般是由 JavaScript 的宿主環(huán)境(host environment)提供的,通常是瀏覽器
JavaScript 語言核心 變量/賦值快速預覽下 JavaScript 變量的用法
// 雙斜線之后內容是單行注釋 /* 這是多行注釋 */ // 變更是表示值的一個符號名字,通過 var 關鍵字聲明 var x; // 聲明一個變量 x // 值可以通過等號賦值給變量 x = 0 // 現在變量 x 的值為 0 x // => 0 通過變量獲取其值 // JavaScript 支持多種數據類型 x = 1; // 數字 x = 0.01; // 整數和實數都是數字(number)類型 x = "hello world" // 字符串 x = "JavaScript"; // ... x = true; // 布爾值 x = false; // ... x = null; // 是一個特殊的值,意思是「空」 x = undefined; // 和 null 非常累似對象/數組
JavaScript 中兩個非常重要的數據類型是對象和數組
// 對象是名/值對的集合,或字符串到值映射的集合 var book = { // 對象由花括號括起來 topic: "JavaScript", // book 對象的屬性 topic 的值是 "JavaScript" fat: true }; // 通過「.」或「[]」來訪問對象屬性 book.topic // => "JavaScript" book.["fat"] // => true book.author = "Flanagan" // 通過賦值給 book 對象創(chuàng)建一個新屬性 author // JavaScript 數組 var primes = [2, 3, 5, 7]; primes[0] // => 2 通過數組下標訪問第一個元素 primes.length // => 4 數組中元素的個數 primes[4] = 9 // => 9 添加新元素 primes[6] = 11 // => 11 此時數組變成 [2, 3, 5, 7, 9, undefined, 11], 長度也變?yōu)?7 // 對象數組 var points = [ { x: 0, y: 0 }, { x: 1, y: 1 } ]; // 數組對象 var data = { listA: [1, 3, 5], listB: [2, 4, 6] };表達式/運算符
通過方括號定義數組元素和通過花括號定義對象屬性名和值的語法稱為 初始化表達式(initializer expression),表達式是 JavaScript 中的一個短語,這個短語可以通過運算得出一個值。通過「.」和「[]」來引用對象屬性或數組元素的值就構成一個表達式。上面的代碼中注釋中箭頭(=>)后的值就是表達式的運算結果
JavaScript 中最常見的表達式寫法就是像下面代碼一樣使用運算符(operator),運算符作用于操作數,生成一個新的值
// 最常見的是算術運算符 3 + 2 // => 5 加法 3 - 2 // => 1 減法 3 * 2 // => 6 乘法 3 / 2 // => 1.5 除法 points[1].x - points[0].x // => 1 復雜的操作數運算 "3" + "2" // => "32" 字符串連接 // 運算符簡寫形式 var count = 0; count++; // 自增1 count--; // 自減1 count += 2; // 自加2, 相當于 count = count + 2 count *= 3; // ... count // => 6 變量名本身也是表達式 var x = 2, y = 3 x == y // => false x != y // => true x < y // => true x <= y // => true x == y // => false "two" == "three" // => false "two" > "three" // => true "tw" 在字母表中的索引大于 "th" false == (x > y) // => true // 邏輯運算符 (x == 2) && (y == 3) // true (x > 2) && (y < 3) // false !(x == y) // true
如果 JavaScript 中的「短語」是表達式,那么整個句子就稱做 語句(statement),以分號結束的行都是一條語句。語句和表達式有很多共同之處
函數粗略了講,表達式僅僅計算出一個值并不進行其它操作,不會改變程序的運行狀態(tài),而語句并不包含一個值(或者說它包含的值我們并不關心),但它們改變了程序運行狀態(tài)
函數是帶有名稱(named)和參數的 JavaScript 代碼片段,可以一次定義多次調用
function plus1(x) { // 定義了一個名為 plus1 的函數,帶有參數 x return x + 1; // 返回一個比傳入參數大 1 的數值 } // 函數代碼塊是由花括號包裹起來的部分 plus1(3) // => 4 函數調用結果為 3+1 var square = function(x) { // 函數是一種值,可以賦值給變量 return x * x; }; square(plus1(3)) // => 16 在一個表達式中調用兩個函數
當函數和對象合寫在一起時,當函數就變成了「方法」(method):
// 當函數賦值給對象的屬性,我們稱為「方法」,所有 JavaScript 對象都含有方法 var a = []; // 創(chuàng)建一個空數組 a.push(1, 2, 3); // 調用數組的添加元素方法 a.reverse(); // 調用數組的次序反轉方法 // 自定義方法 points.dist = function() { var p1 = this[0]; var p2 = this[1]; var a = p2.x - p1.x; var b = p2.y - p1.y; return Math.sqrt(a*a + b*b) // 勾股定理,用 Math.sqrt 來計算平方根 } points.dist(); // => 求得兩個點之間的距離面向對象
JavaScript 中的面向對象特性和傳統語言的很大的區(qū)別,下面展示一個類用來表示 2D 平面中的幾何點,這個類實例化后的對象有一個名為 r() 的方法,可以計算該點到原點的距離:
function Point(x, y) { this.x = x; this.y = y; } // 通過給構造函數的 prototype 對象賦值,來給 Point 對象定義方法 Point.prototype.r = function() { return Math.sqrt(this.x * this.x + this.y * this.y) }; // 使用 new 關鍵字和構造函數來創(chuàng)建一個實例 p var p = new Point(1, 1); // Point 的實例對象 p(以及所有 Point 的實例對象)繼承了方法 r() p.r() // => 1.414...客戶端的 JavaScript 嵌入到 HTML 中的 JavaScript
JavaScript 代碼可以通過
正常 HTML 段落