JavaScript常用基礎知識強化學習_javascript技巧

首先，還是用比較官方的文字描述來解釋下JavaScript：

JavaScript一種直譯式指令碼語言，是一種動態類型、弱類型、基於原型的語言，內建支援類型。它的解譯器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於用戶端的指令碼語言，最早是在HTML（標準通用標記語言 (SGML)下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。
JavaScript擁有以下幾個特點：

• · 指令碼語言。JavaScript是一種解釋型的指令碼語言,C、C++等語言先編譯後執行,而JavaScript是在程式的運行過程中逐行進行解釋。
• · 基於對象。JavaScript是一種基於對象的指令碼語言,它不僅可以建立對象,也能使用現有的對象。
• · 簡單。JavaScript語言中採用的是弱類型的變數類型,對使用的資料類型未做出嚴格的要求,是基於Java基本語句和控制的指令碼語言,其設計簡單緊湊。
• · 動態性。JavaScript是一種採用事件驅動的指令碼語言,它不需要經過Web伺服器就可以對使用者的輸入做出響應。在訪問一個網頁時,滑鼠在網頁中進行滑鼠點擊或上下移、視窗移動等操作JavaScript都可直接對這些事件給出相應的響應。
• · 跨平台性。JavaScript指令碼語言不依賴於作業系統,僅需要瀏覽器的支援。因此一個JavaScript指令碼在編寫後可以帶到任意機器上使用,前提上機器上的瀏覽器支 持JavaScript指令碼語言,目前JavaScript已被大多數的瀏覽器所支援。

JavaScript由以下部分組成：

• · ECMAScript，描述了該語言的文法和基本對象。
• · 文件物件模型（DOM），描述處理網頁內容的方法和介面。
• · 瀏覽器物件模型（BOM），描述與瀏覽器進行互動的方法和介面。

JavaScript都有哪些資料類型？

• · object object中又有 Function、String、Array、Object、Date等等
• · string
• · number
• · boolean
• · null
• · undefined

下面部分代碼來證明下以上所說：
String、Number是對象，string、number是不同的資料格式...

 var str = "abc"; var Str = new String("abc"); var num = 100; var Num = new Number(100); console.log(typeof str, typeof Str, typeof num, typeof Num); // string object number object

對象原型鏈是個啥？
當我們用new一個對象 (使用建構函式建立) 或者用Object.create建立對象時，那麼這個對象將會有原型和原型鏈。
比如：我們建立個建構函式_obj,然後通過_obj來new一個obj，那麼這時的原型鏈就是：obj → _obj → Object.prototype → null。
讓我們通過代碼來說明吧：

 function _obj(){}; _obj.prototype.name = "野獸"; //每個函數都包含一個prototype屬性，這個屬性指向一個對象的引用，這個對象就是“原型對象”。 _obj.prototype.age = 21; _obj.prototype.sayHello = function(){   console.log("Hello "+this.name); }; var obj = new _obj(); console.log(obj); //_obj{} 而其的__proto__裡包含了_obj裡的各個屬性，包括name，age，sayHello  console.log(obj.__proto__ == _obj.prototype); //true obj.sayHello(); // Hello 野獸 console.log(Object.prototype.__proto__); // null 當我們追究到Object(也就是object的源頭時)其指向的是null

值的注意的是：Object.create(null)的原型鏈直接為null，也就是說人家的原型鏈短的很呢...

JavaScript中範圍怎麼玩？
當我們在JavaScript中使用var聲明一個變數，其實就是在該範圍所指向的對象添加一個屬性及屬性值。
在JavaScript中不存在塊級範圍，在當前範圍內聲明的變數也只有在當前範圍及當前範圍內的函數內可用，而在函數內聲明的變數只適用於該函數內(如果不做操作)，在函數外部調用該變數將會報錯not defined。
讓我們跑一跑代碼來認識下範圍：

 var firstNum = 1; ~function(){   var secondNum = 2;   console.log("在裡面列印："+firstNum ,secondNum); // 在裡面列印：1 2 }(); console.log("在外面列印："+firstNum ,secondNum); // Uncaught ReferenceError: secondNum is not defined(…)

範圍也有範圍鏈：

 var firstNum = 1; console.log("在最外層列印："+firstNum); // 在最外層列印：1 ~function(){   var secondNum = 2;   console.log("在中介層列印："+firstNum,secondNum); // 在中介層列印：1 2   ~function(){     var thirdNum = 3;     console.log("在最裡層列印："+firstNum,secondNum,thirdNum); // 在最裡層列印：1 2 3   }();   console.log("在中介層列印："+firstNum,secondNum,thirdNum); // Uncaught ReferenceError: thirdNum is not defined(…) }(); console,log("在最外層列印："+firstNum,secondNum,thirdNum); // 由於上面已經報錯，而瀏覽器執行JavaScript又是單線程的，所以壓根沒執行到這句...

也就是說，在當前範圍聲明的變數將會在其子...子子子範圍還是一直能用，爽歪歪吧，哈哈...

閉包是什嗎？怎麼玩？
函數的執行依賴於變數範圍，這個範圍是在函數定義時決定的，而不是函數調用時決定的。為了實現這種詞法範圍，JavaScript函數對象的內部狀態不僅包含函數的邏輯代碼，還必須引用當前的範圍鏈。函數對象可以通過範圍鏈相互關聯起來，函數體內部的變數都可以儲存在函數的範圍內，這種特性其實就是“閉包”。
繼續來看代碼吧：

 function counter(){  var num = 0;  return {   count : function(){ return num++; },   reset : function(){ return num = 0; }  } }; var firstNum = counter(); var secondNum = counter(); console.log(firstNum.count()); // 0 console.log(secondNum.count()); // 0 firstNum.reset(); console.log(firstNum.count()); // 0 num已被重設，所以返回的為0 console.log(secondNum.count()); // 1 num未被重設，所以返回的是1 console.log(firstNum,secondNum); // 都為 Object{ count:function(),reset:function(),__proto__} 並且並不能在其中找到counter裡var的n，這也實現了函數裡的私人變數，只將需要暴露的兩個方法給暴露在外。

閉包用的多的兩個作用：讀取函數內部的變數值；讓這些變數值始終儲存著(在記憶體中)。
同時需要注意的是：閉包慎用，不濫用，不亂用，由於函數內部的變數都被儲存在記憶體中，會導致記憶體消耗大。

JavaScript中的this
在JavaScript中，this通常指向的是我們正在執行的函數本身，或者是，指向該函數所屬的對象。
全域的this → 指向的是Window
函數中的this → 指向的是函數所在的對象
對象中的this → 指向其本身
驗證代碼：

 console.log(this); // Window {external: Object, chrome: Object, document: document, global: Window, cr: Object…} 全域下執行console.log,所以此處指向的是Window ~function seeThis(){  console.log(this); // Window {external: Object, chrome: Object, document: document, global: Window, cr: Object…} 由於我是在全域下寫的這個函數，所以此處指向的還是Window }(); var obj = {  name:"野獸",  showThis:function(){   console.log(this); // Object {name: "野獸",showThis:function(),__proto__} 此處列印的是對象本身  } }; obj.showThis();

arguments
在Javascript函數體內，arguments像數組一樣（並不是真的數組），有length屬性，可以代表傳給函數的參數的個數。
簡單來說，arguments函數執行時所傳的實際參數。
比如：arguments[0]表示傳入第一個參數。
用代碼驗證：

 function argumentsTest(){  console.log(arguments[0]?arguments[0]:"Hello World",arguments[1]?arguments[1]:"你好 世界") }; argumentsTest(); // Hello World 你好 世界 argumentsTest("This is firstValue => arguments[0].","This is secondValue => arguments[1]."); // This is firstValue => arguments[0]. This is secondValue => arguments[1].

暫時就為大家分享這些JavaScript常用基礎知識，希望對大家進一步學習掌握javascript程式設計有所協助。