JavaScript 10分鐘入門 [復制鏈接]

2019-5-8 11:11
liujh 閱讀:207 評論:0 贊:0
Tag:  

簡介

JavaScript是一門面向對象的動態語言,他一般用來處理以下任務:

1、修飾網頁

  • 生成HTML和CSS
  • 生成動態HTML內容
  • 生成一些特效


2、提供用戶交互接口

  • 生成用戶交互組件
  • 驗證用戶輸入
  • 自動填充表單


3、能夠讀取本地或者遠程數據的前端應用程序,例如http://web-engineering.info/JsFrontendApp-Book

4、通過Nodejs實現像JAVA,C#,C++一樣的服務端程序

5、實現分布式WEB程序,包括前端和服務端

當前瀏覽器所支持的JavaScript的版本被稱為“ECMAScript的5.1”,或簡單的“ES5”,但接下來的兩個版本,稱為“ES6”和“ES7”(或“ES2015”和“ES2016”,新版以本年命名),有很多的附加功能和改進的語法,是非常值得期待的(并已部分被當前的瀏覽器和后端JS的環境支持)。

此篇博文,引自《Building Front-End Web Apps with Plain JavaScript》一書。

JavaScript類型和常量

JS有3個值類型:string,number和boolean,我們可以用一個變量v保存不同類型的值用來和typeof(v)比較, typeof(v)===”number”。

JS有5個引用類型:Object, Array, Function, Date 和 RegExp。數組,函數,日期和正則表達式是特殊類型的對象,但在概念上,日期和正則表達式是值類型,被包裝成對象形式體現。

變量,數組,函數的參數和返回值都可以不聲明,它們通常不會被JavaScript引擎檢查,會被自動進行類型轉換。

變量值可能為:

1、數據,如string,number,boolean

2、對象的引用:如普通對象,數組,函數,日期,正則表達式

3、特殊值null,其通常用作用于初始化的對象變量的默認值

4、特殊值undefined,已經聲明但沒有初始化的初始值

string是Unicode字符序列。字符串常量會被單引號或雙引號包裹著,如“Hello world!”,“A3F0′,或者空字符串”"。兩個字符串表達式可以用+操作符連接,并可通過全等于比較:

if (firstName + lastName === "James Bond")


字符串的字符數量可以通過length屬性獲得:

console.log( "Hello world!".length); // 12


所有的數字值都是在64位浮點數字。整數和浮點數之間沒有明確的類型區別。如果一個數字常量不是數字,可以將其值設置為NaN(“not a number”),它可以用isNaN方法來判斷。

不幸的是,直到ES6才有Number.isInteger方法,用于測試一個數是不是一個整數。因此在還不支持它的瀏覽器中,為確保一個數字值是一個整數,或者一個數字的字符串被轉換為一個整數,就必須使用parseInt函數。類似地,包含小數的字符串可用與parseFloat方法轉換。將一個數子n轉換成字符串,最好的方法是使用String(n)。

就像Java,我們也有兩個預先定義好的布爾型值,true與false,以及布爾運算符符號: ! (非),&&(與),||(或)。當非布爾型值與布爾型值比較時,非布爾型值會被隱式轉換。空字符串,數字0,以及undefined和null,會被轉換為false,其他所有值會轉換為true。

通常我們需要使用全等符號符號(===和!==)而不是==和!=。否則,數字2是等于的字符串“2”的, (2 == “2″) is true

VAR= [] 和var a = new Array() 都可以定義一個空數組。(二胡:推薦前者)

VAR O ={} 和 var o = new Obejct() 都可以定義個空對象(二胡:還是推薦前者)。注意,一個空對象{}不是真的空的,因為它包含的Object.prototype繼承屬性。所以,一個真正的空對象必須以Null為原型, var o = Object.create(null)。

表1 類型測試和轉換


變量作用域

在JavaScript的當前版本ES5,有兩種范圍變量:全局作用域和函數作用域,沒有塊作用域。因此,應該避免聲明在塊內聲明變量。

所有變量應在函數的開始聲明。只有在JavaScript的下一個版本ES6中,我們可以用let關鍵詞聲明一個塊級變量。

嚴格模式

從ES5開始,我們可以使用嚴格模式,獲得更多的運行時錯誤檢查。例如,在嚴格模式下,所有變量都必須進行聲明。給未聲明的變量賦值拋出異常。

我們可以通過鍵入下面的語句作為一個JavaScript文件或script元素中的第一行開啟嚴格模式:’use strict’;

通常建議您使用嚴格模式,除非你的代碼依賴于與嚴格的模式不兼容的庫。

不同類型的對象

JS對象與傳統的OO/UML對象不同。它們可以不通過類實例化而來。它們有屬性、方法、鍵值對三種擴展。

JS對象可以直接通過JSON產生,而不用實例化一個類。

var person1 = { lastName:"Smith", firstName:"Tom"};var o1 = Object.create( null); // an empty object with no slots


對象屬性可以以兩種方式獲得:

1、使用點符號(如在C ++/ Java的):person1.lastName = “Smith”

2、使用MAP方式person1["lastName"] = “Smith”

JS對象有不同的使用方式。這里有五個例子:

1、記錄,例如,

var myRecord = {firstName:”Tom”, lastName:”Smith”, age:26}

2、MAP(也稱為“關聯數組”,“詞典”或其他語言的“哈希表”)v

ar numeral2number = {“one”:”1″, “two”:”2″, “three”:”3″}

3、非類型化對象

var person1 = { lastName: "Smith", firstName: "Tom", getFullName: function () { return this.firstName +" "+ this.lastName; } };


4、命名空間

var myApp = { model:{}, view:{}, ctrl:{} };


可以由一個全局變量形式來定義,它的名稱代表一個命名空間前綴。例如,上面的對象變量提供了基于模型 – 視圖 – 控制器(MVC)架構模式,我們有相應的MVC應用程序的三個部分。

正常的類

數組

可以用一個JavaScript數組文本進行初始化變量:

var a = [1,2,3];

因為它們是數組列表,JS數組可動態增長:我們可以使用比數組的長度更大的索引。例如,上面的數組變量初始化后,數組長度為3,但我們仍然可以操作第5個元素 a[4] = 7;

我們可以通過數組的length屬性得到數組長度:

for (i=0; i < a.length; i++) { console.log(a[i]);} //1 2 3 undefined 7 `


我們可以通過 Array.isArray(a) 來檢測一個變量是不是數組。

通過push方法給數組追加元素:a.push( newElement);

通過splice方法,刪除指定位置的元素:a.splice( i, 1);

通過indexOf查找數組,返回位置或者-1:if (a.indexOf(v) > -1) …

通過for或者forEach(性能弱)遍歷數組:

var i=0;for (i=0; i < a.length; i++) { console.log( a[i]);}a.forEach(function (elem) { console.log( elem);})


通過slice復制數組:var clone = a.slice(0);

Maps

map(也稱為“散列映射”或“關聯數組’)提供了從鍵及其相關值的映射。一個JS map的鍵是可以包含空格的字符串:

var myTranslation = { "my house": "mein Haus", "my boat": "mein Boot", "my horse": "mein Pferd"}


通過Object.keys(m)可以獲得map中所有的鍵:

var i=0, key="", keys=[];keys = Object.keys( myTranslation);for (i=0; i < keys.length; i++) { key = keys[i]; alert('The translation of '+ key +' is '+ myTranslation[key]);}


通過直接給不存在的鍵賦值來新增元素:

myTranslation["my car"] = "mein Auto";

通過delete刪除元素:
delete myTranslation["my boat"];


通過in搜索map:

`if ("my bike" in myTranslation) ...`


通過for或者forEach(性能弱)和Object.keys()遍歷map:

var i=0, key="", keys=[];keys = Object.keys( m);for (i=0; i < keys.length; i++) { key = keys[i]; console.log( m[key]);}Object.keys( m).forEach( function (key) { console.log( m[key]);})


通過 JSON.stringify 將map序列化為JSON字符串,再JSON.parse將其反序列化為MAP對象 來實現復制:

var clone = JSON.parse( JSON.stringify( m))


請注意,如果map上只包含簡單數據類型或(可能嵌套)數組/map,這種方法效果很好。在其他情況下,如果map包含Date對象,我們必須寫我們自己的clone方法。

Functions

JS函數是特殊的JS的對象,它具有一個可選的名字屬性和一個長度屬性(參數的數目)。我們可以這樣知道一個變量是不是一個函數:

if (typeof( v) === "function") {...}


JS函數可以保存在變量里、被當作參數傳給其他函數,也可以被其他函數作為返回值返回。JS可以被看成一個函數式語言,函數在里面可以說是一等公民。

正常的定義函數方法是用一個函數表達式給一個變量賦值:

var myFunction = function theNameOfMyFunction () {...}function theNameOfMyFunction () {...}


其中函數名(theNameOfMyFunction)是可選的。如果省略它,其就是一個匿名函數。函數可以通過引用其的變量調用。在上述情況下,這意味著該函數通過myFunction()被調用,而不是通過theNameOfMyFunction()調用。

JS函數,可以嵌套內部函數。閉包機制允許在函數外部訪問函數內部變量,并且創建閉包的函數會記住它們。

當執行一個函數時,我們可以通過使用內置的arguments參數,它類似一個參數數組,我們可以遍歷它們,但由于它不是常規數組,forEach無法遍歷它。arguments參數包含所有傳遞給函數的參數。我們可以這樣定義一個不帶參數的函數,并用任意數量的參數調用它,就像這樣:

var sum = function () { var result = 0, i=0; for (i=0; i < arguments.length; i++) { result = result + arguments[i]; } return result;};console.log( sum(0,1,1,2,3,5,8)); // 20


prototype原型鏈可以訪問函數中的每一個元素,如Array.prototype.forEach(其中Array代表原型鏈中的數組的構造函數)。

var numbers = [1,2,3]; // create an instance of Arraynumbers.forEach( function (n) { console.log( n);});我們還可以通過原型鏈中的prototype.call方法來處理:var sum = function () { var result = 0; Array.prototype.forEach.call( arguments, function (n) { result = result + n; }); return result;};


Function.prototype.apply是Function.prototype.call的一個變種,其只能接受一個參數數組。

立即調用的JS函數表達式優于使用純命名對象,它可以獲得一個命名空間對象,并可以控制其變量和方法哪些可以外部訪問,哪些不是。這種機制也是JS模塊概念的基礎。在下面的例子中,我們定義了一個應用程序,它對外暴露了指定的元素和方法:

myApp.model = function () { var appName = "My app's name"; var someNonExposedVariable = ...; function ModelClass1 () {...} function ModelClass2 () {...} function someNonExposedMethod (...) {...} return { appName: appName, ModelClass1: ModelClass1, ModelClass2: ModelClass2 }}(); // immediately invoked


這種模式在WebPlatform.org被當作最佳實踐提及:

https://docs.webplatform.org/wiki/tutorials/javascript_best_practices

定義和使用類

類是在面向對象編程的基礎概念。對象由類實例化而來。一個類定義了與它創建的對象的屬性和方法。

目前在JavaScript中沒有明確的類的概念。JavaScript中定義類有很多不同的模式被提出,并在不同的框架中被使用。用于定義類的兩個最常用的方法是:

構造函數法,它通過原型鏈方法來實現繼承,通過new創建新對象。這是Mozilla的JavaScript指南中推薦的經典方法。

工廠方法:使用預定義的Object.create方法創建類的新實例。在這種方法中,基于構造函數繼承必須通過另一種機制來代替。

當構建一個應用程序時,我們可以使用這兩種方法創建類,這取決于應用程序的需求 。mODELcLASSjs是一個比較成熟的庫用來實現工廠方法,它有許多優點。(基于構造的方法有一定的性能優勢)

ES6中構造函數法創建類

在ES6,用于定義基于構造函數的類的語法已推出(新的關鍵字類的構造函數,靜態類和超類)。這種新的語法可以在三個步驟定義一個簡單的類。

基類Person 定義了兩個屬性firstName 和lastName,以及實例方法toString和靜態方法checkLastName:

class Person { constructor( first, last) { this.firstName = first; this.lastName = last; } toString() { return this.firstName + " " + this.lastName; } static checkLastName( ln) { if (typeof(ln)!=="string" || ln.trim()==="") { console.log("Error: " + "invalid last name!"); } }}


類的靜態屬性如下定義:

Person.instances = {};


一個子類定義的附加屬性和可能會覆蓋超類的方法:

class Student extends Person { constructor( first, last, studNo) { super.constructor( first, last); this.studNo = studNo; } // method overrides superclass method toString() { return super.toString() + "(" + this.studNo +")"; }}


ES5中構造函數法創建類

在ES5,我們可以以構造函數的形式定義一個基于構造函數的類結構,下面是Mozilla的JavaScript指南中推薦的編碼模式。此模式需要七個步驟來定義一個簡單的類結構。由于這種復雜的模式可能很難記住,我們可能需要使用cLASSjs之類的庫來幫助我們。

首先定義構造函數是隱式創建一個新的對象,并賦予它相應的值:

function Person( first, last) { this.firstName = first; this.lastName = last; }


這里的this指向新創建的對象。

在原型中定義實例方法:

Person.prototype.toString = function () { return this.firstName + " " + this.lastName;}可以在構造函數中定義靜態方法,也可以用.直接定義:Person.checkLastName = function (ln) { if (typeof(ln)!=="string" || ln.trim()==="") { console.log("Error: invalid last name!"); }}


定義靜態屬性:

Person.instances = {};


定義子類并增加屬性:

function Student( first, last, studNo) { // invoke superclass constructor Person.call( this, first, last); // define and assign additional properties this.studNo = studNo; }


通過Person.call( this, …) 來調用基類的構造函數。

將子類的原型鏈改為基類的原型鏈,以實現實例方法的繼承(構造函數得改回來):

// Student inherits from PersonStudent.prototype = Object.create( Person.prototype);// adjust the subtype's constructor propertyStudent.prototype.constructor = Student;


通過Object.create( Person.prototype) 我們基于 Person.prototype創建了一個新的對象原型。

定義覆蓋基類方法的子類方法:

Student.prototype.toString = function () { return Person.prototype.toString.call( this) + "(" + this.studNo + ")";};


最后通過new關鍵字來實例化一個類

var pers1 = new Person("Tom","Smith");JavaScript的prototype


prototype是函數的一個屬性(每個函數都有一個prototype屬性),這個屬性是一個指針,指向一個對象。它是顯示修改對象的原型的屬性。

__proto__是一個對象擁有的內置屬性(prototype是函數的內置屬性。__proto__是對象的內置屬性),是JS內部使用尋找原型鏈的屬性。

每個對象都有個constructor屬性,其指向的是創建當前對象的構造函數。




工廠模式創建類

在這種方法中,我們定義了一個JS對象Person,并在其內部定義了一個create方法用來調用Object.create來創建類。

var Person = { name: "Person", properties: { firstName: {range:"NonEmptyString", label:"First name", writable: true, enumerable: true}, lastName: {range:"NonEmptyString", label:"Last name", writable: true, enumerable: true} }, methods: { getFullName: function () { return this.firstName +" "+ this.lastName; } }, create: function (slots) { // create object var obj = Object.create( this.methods, this.properties); // add special property for *direct type* of object Object.defineProperty( obj, "type", {value: this, writable: false, enumerable: true}); // initialize object Object.keys( slots).forEach( function (prop) { if (prop in this.properties) obj[prop] = slots[prop]; }) return obj; }};


這樣,我們就有了一個Person的工廠類,通過調用create方法來實例化對象。

var pers1 = Person.create( {firstName:"Tom", lastName:"Smith"});

分享到:
我來說兩句
facelist
您需要登錄后才可以評論 登錄 | 立即注冊
所有評論(0)

領先的中文移動開發者社區
18620764416
7*24全天服務
意見反饋:[email protected]

掃一掃關注我們

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粵ICP備15117877號 )

两码中特期期