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

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

JavaScript一種直譯式腳本語言，是一種動態類型、弱型別、基於原型的語言，內建支援型別。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來為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程序设计有所帮助。