js高級程序設計 - 溫故而知新

時間 2019-11-16

原文原文鏈接

JavaScript 誕生於 1995 年。當時，它的主要目的是處理之前由服務器端語言（如 Perl）負責的一些輸入驗證操做。在 JavaScript 問世以前，必須把表單數據發送到服務器端才能肯定用戶是否沒有填寫某個必填域，那你可能九年級木塊模塊了是否輸入了無效的值。 Netscape Navigator 但願經過 JavaScript 來解決這個問題。在人們廣泛使用電話拔號上網的年代，可以在客戶端完成一些基本的驗證任務絕對是使人興奮的。畢竟，撥號上網的速度之慢，致使了與服務器的每一次數據交換事實上都成了對人們耐心的一次考驗。javascript

1.一個完整的 JavaScript 實現應該由下列三個不一樣的部分組成:

核心（ECMAScript）
文檔對象模型（DOM）
瀏覽器對象模型（BOM）

2.script元素：

script元素定義了下列 6 個屬性：css

async ：可選。表示應該當即下載腳本，但不該妨礙頁面中的其餘操做，好比下載其餘資源或等待加載其餘腳本。只對外部腳本文件有效。
charset ：可選。表示經過 src 屬性指定的代碼的字符集。因爲大多數瀏覽器會忽略它的值，所以這個屬性不多有人用。
defer：可選。表示腳本能夠延遲到文檔徹底被解析和顯示以後再執行。只對外部腳本文件有效。IE7 及更早版本對嵌入腳本也支持這個屬性。
language：已廢棄。
src：可選
type：可選。

3.ECMAScript中的基本數據類型

基本數據類型：Undefined、Null、Boolean、Number 和 String。java

4.基本數據和引用類型的值

基本類型值在內存中佔據固定大小的空間，所以被保存在棧內存中；
從一個變量向另外一個變量複製基本類型的值，會建立這個值的一個副本；
引用類型的值是對象，保存在堆內存中；
包含引用類型值的變量實際上包含的並非對象自己，而是一個指向該對象的指針；
從一個變量向另外一個變量複製引用類型的值，複製的實際上是指針，所以兩個變量最終都指向同一個對象

5.引用類型

Object類型
Array類型
Date類型
RegExp類型
Function類型

函數內部屬性

arguments.callee：返回一個對函數的引用，該函數調用了當前函數。

function factorial(num) {
    if (num <= 1) {
        return 1;
    } else {
        return num * arguments.callee(num - 1)
    }
}

複製代碼

arguments.callee.caller：返回正被執行的 Function 對象，也就是所指定的 Function 對象的正文。

function outer(){ 
 inner(); 
} 
function inner(){ 
 alert(arguments.callee.caller); 
} 
outer(); 
複製代碼

6.垃圾收集

javascript含有自動垃圾收集機制。json

垃圾收集的方法：跨域

JavaScript 中最經常使用的垃圾收集方式是標記清除。

當變量進入環境（例如，在函數中聲明一個變量）時，就將這個變量標記爲「進入環境」。從邏輯上講，永遠不能釋放進入環境的變量所佔用的內存，由於只要執行流進入相應的環境，就可能會用到它們。而當變量離開環境時，則將其標記爲「離開環境」。數組

另外一種不太常見的垃圾收集策略叫作引用計數。

引用計數的含義是跟蹤記錄每一個值被引用的次數。當聲明瞭一個變量並將一個引用類型值賦給該變量時，則這個值的引用次數就是 1。若是同一個值又被賦給另外一個變量，則該值的引用次數加1。相反，若是包含對這個值引用的變量又取得了另一個值，則這個值的引用次數減1。當這個值的引用次數變成0時，則說明沒有辦法再訪問這個值了，於是就能夠將其佔用的內存空間回收回來。這樣，當垃圾收集器下次再運行時，它就會釋放那些引用次數爲零的值所佔用的內存瀏覽器

var element = document.getElementById("some_element"); 
var myObject = new Object(); 
myObject.element = element; 
element.someObject = myObject; 
複製代碼

這個例子在一個 DOM 元素（element）與一個原生 JavaScript 對象（myObject）之間建立了循環引用。其中，變量 myObject 有一個名爲 element 的屬性指向 element 對象；而變量 element 也有一個屬性名叫 someObject 回指 myObject。因爲存在這個循環引用，即便將例子中的 DOM 從頁面中移除，它也永遠不會被回收。性能優化

爲了不相似這樣的循環引用問題，最好是在不使用它們的時候手工斷開原生 JavaScript 對象與DOM 元素之間的鏈接。例如，可使用下面的代碼消除前面例子建立的循環引用：bash

myObject.element = null; 
element.someObject = null; 
複製代碼

7.subString、substr、slice之間的區別

stringObject.substring(start,stop)
stringObject.substr(start,length)
arrayObject.slice(start,end)

8.對象屬性類型

ECMAScript 中有兩種屬性：數據屬性和訪問器屬性。服務器

數據屬性 Configurable：表示可否經過 delete 刪除屬性從而從新定義屬性，可否修改屬性的特性，或者可否把屬性修改成訪問器屬性。像前面例子中那樣直接在對象上定義的屬性，它們的這個特性默認值爲 true。 Enumerable：表示可否經過 for-in 循環返回屬性。像前面例子中那樣直接在對象上定義的屬性，它們的這個特性默認值爲 true。 Writable：表示可否修改屬性的值。像前面例子中那樣直接在對象上定義的屬性，它們的這個特性默認值爲 true。 Value：包含這個屬性的數據值。讀取屬性值的時候，從這個位置讀；寫入屬性值的時候，把新值保存在這個位置。這個特性的默認值爲 undefined。
訪問屬性 Configurable：表示可否經過 delete 刪除屬性從而從新定義屬性，可否修改屬性的特性，或者可否把屬性修改成數據屬性。對於直接在對象上定義的屬性，這個特性的默認值爲 true。 Enumerable：表示可否經過 for-in 循環返回屬性。對於直接在對象上定義的屬性，這個特性的默認值爲 true。 Get：在讀取屬性時調用的函數。默認值爲 undefined。 Set：在寫入屬性時調用的函數。默認值爲 undefined。
```
使用訪問器屬性的常見方式，即設置一個屬性的值會致使其餘屬性發生變化
複製代碼
```

9.建立對象的幾種模式

工廠模式

function person(name,age){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.sayName = function(){
        console.log(this.name)
    }
    return o;
}

var p = person('張三',20);
p.sayName(); // 張三
複製代碼

構造函數模式

function Person(name,age){
    this.name = name;
    this.age = age;
    this.sayName = function(){
        console.log(this.name);
    }
}

var p = new Person('張三',20);
p.sayName(); // 張三
複製代碼

New實例化對象會經歷如下4個步驟：

1. 建立新對象
2. 將構造函數的做用域複製給新對象
3. 執行構造函數的方法
4. 返回新對象
複製代碼

原型模式

function Person() {}
Person.prototype = {
    constructor: Person,
    name: "Nicholas",
    age: 29,
    job: "Software Engineer",
    friends: ["Shelby", "Court"],
    sayName: function() {
        alert(this.name);
    }
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Court,Van" 
alert(person2.friends); //"Shelby,Court,Van" 
alert(person1.friends === person2.friends); //true

複製代碼

組合構造函數模式和原型模式

function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.prototype.sayName = function(){
    console.log(this.name)
};

var p = new Person('張三',10);
p.sayName(); // 張三
複製代碼

動態原型模式

function Person(name,age){
    this.name = name;
    this.age = age;
    
    if (typeof this.sayName != 'function') {
        Person.prototype.sayName = function(){
            console.log(this.name)
        };
    }
}

var p = new Person('張三',10);
p.sayName(); // 張三
複製代碼

寄生構造函數模式

function Person(name,age){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.sayName = function(){
        console.log(this.name)
    };
    return o;
}

var p = new Person('張三',10);
p.sayName(); // 張三
複製代碼

穩妥構造函數模式

function Person(name,age){
    var o = new Object();
    o.name = name;
    o.age = age;

    o.sayName = function(){
        console.log(name)
    };
    return o;
}

var p = Person('張三',10);
p.sayName(); // 張三
複製代碼

跨域請求技術

CORS（Cross-Origin Resource Sharing，跨源資源共享）
圖片Ping 最經常使用於跟蹤用戶點擊頁面或動態廣告曝光次數
JSONP JSONP 是經過動態script元素（要了解詳細信息，請參考第 13 章）來使用的，使用時能夠爲 src 屬性指定一個跨域 URL。這裏的script元素與元素相似，都有能力不受限制地從其餘域加載資源。由於 JSONP 是有效的 JavaScript 代碼，因此在請求完成後，即在 JSONP 響應加載到頁面中之後，就會當即執行。來看一個例子

function handleResponse(response){ 
 alert("You’re at IP address " + response.ip + ", which is in " + 
 response.city + ", " + response.region_name); 
} 
var script = document.createElement("script"); 
script.src = "http://freegeoip.net/json/?callback=handleResponse"; 
document.body.insertBefore(script, document.body.firstChild); 

複製代碼

Comet
SSE（Server-Sent Events，服務器發送事件）
Web Sockets

對象防篡改

Object.preventExtensions()：不可添加屬性和方法
Object.seal()：不能刪除屬性和方法
Object.freeze()：不可添加屬性和方法而且不能刪除屬性和方法

性能優化

避免全局查找
避免 with 語句
避免沒必要要的屬性查找

使用變量和數組要比訪問對象上的屬性更有效率

避免雙重解釋

//某些代碼求值——避免!! 
eval("alert('Hello world!')"); 

//建立新函數——避免!! 
var sayHi = new Function("alert('Hello world!')"); 

//設置超時——避免!! 
setTimeout("alert('Hello world!')", 500); 

//已修正
alert('Hello world!'); 

//建立新函數——已修正
var sayHi = function(){ 
 alert('Hello world!'); 
}; 

//設置一個超時——已修正 
setTimeout(function(){ 
 alert('Hello world!'); 
}, 500); 
複製代碼

最小語句數

//一個語句 
var count = 5, 
    color = "blue", 
    values = [1,2,3], 
    now = new Date(); 

//只用一條語句建立和初始化數組 
var values = [123, 456, 789]; 

//只用一條語句建立和初始化對象 
var person = { 
    name : "Nicholas", 
    age : 29, 
    sayName : function(){ 
       alert(this.name); 
    } 
}; 
複製代碼