重讀《JavaScript高級程序設計》

最近本身在休假，打算閉門幾天將《JavaScript高級程序設計》(第3版)這本良心教材再回顧一遍。目前本身進入前端領域近兩年，如今重讀並記錄下這本教材的「硬」知識點 😊 。

函數沒有重載

ECMAScript 函數不能像傳統意義上那樣實現重載。而在其餘語言（如Java）中，能夠爲一個函數編寫兩個定義，只要這兩個定義的簽名（接受的參數類型和數量）不一樣便可[p66]。ECMAScript的類型是鬆散形的，沒有簽名，因此是沒有重載的。

function load(num){
	return num + 100;
}
function load(num,name){
	return num + 200;
}
var result = load(100); // 300
# 後面的函數聲明覆蓋掉前面的函數聲明
複製代碼

基本的數據類型

基本類型值指的是簡單的數據段，而引用類型指那些可能由多個值構成的對象[p68]。這裏指出來的基本的數據類型是說的es5的哈：Undefined,Null,Boolean,Number和String。

傳遞參數

ECMAScript 中全部的函數的參數都是按值傳遞的[p70]。也就是說，把函數外部的值複製給函數內部的參數，就是把值從一個變量複製到另外一個變量同樣。**基本類型值的傳遞如同基本類型變量的複製同樣，而引用類型值的傳遞，則如同引用類型變量的複製同樣。**下面分開例子介紹兩種不一樣類型爲何是按值傳遞。

基本類型值

基本類型這個按值傳遞比較好理解，直接複製變量的值傳遞：

function addTen(num){
	num += 10;
	return num;
}
var count = 20;
var result = addTen(count);
console.log(result); // 30
console.log(count); // 20 ，沒有變化哈
複製代碼

引用類型值

有些人認爲引用類型的傳參是按照引用來傳的，那暫且認爲他們的理解是正確的，那下面的示例結果怎麼解析呢？

function setName(obj){
	obj.name = '嘉明';
	obj = new Object();
	obj.name = '龐嘉明';
}
var person = new Object();
setName(person);
console.log(person.name); // '嘉明'，爲啥不是'龐嘉明'呢？
複製代碼

若是是按照引用傳的話，那麼新建的對象obj = new Object()應該是指向堆內容的對象啊，那麼改變它本有的name屬性值應該生效，然而並無生效。因此它也是按值傳遞滴。

函數聲明與函數表達式

解析器在向執行環境中加載數據時，對函數聲明和函數表達式並不是一視同仁[p111]。解析器會率先讀取函數聲明，並使其執行任何代碼以前可用（能夠訪問）；至於函數表達式，則必須等到解析器執行到它所在的代碼行，纔會真正被解析。

console.log(sum(10 , 10)); // 20
function sum(num1 , num2){
	return num1 + num2;
}
複製代碼

console.log(sum(10 , 10)); //TypeError: sum is not a function
var sum = function(num1 , num2){
	return num1 + num2;
}
複製代碼

apply和call

每一個函數都包含兩個非繼承而來的方法：apply()和call()。這兩個方法的用途都是在特定的做用域中調用函數，實際上等於設置函數體內this對象的值[116]。call和apply在對象中仍是挺有用處的。

apply()方法和call()方法的做用是相同的，區別在於接收參數的方式不一樣。

apply

apply()方法接收兩個參數：一個是在其中運行函數的做用域，另外一個是參數數組，這裏的參數數組能夠是Array的實例，也能夠是arguments對象（類數組對象）。

function sum(num1 , num2){
	return num1 + num2;
}
function callSum1(num1,num2){
	return sum.apply(this,arguments); // 傳入arguments類數組對象
}
function callSum2(num1,num2){
	return sum.apply(this,[num1 , num2]); // 傳入數組
}
console.log(callSum1(10 , 10)); // 20
console.log(callSum2(10 , 10)); // 20
複製代碼

call

call()方法接收的第一個參數和apply()方法接收的同樣，變化的是其他的參數直接傳遞給函數。換句話說，在使用call()方法時，傳遞給函數的參數必須逐個列舉出來。

function sum(num1 , num2){
	return num1 + num2;
}
function callSum(num1 , num2){
	return sum.call(this , sum1 , sum2);
}
console.log(callSum(10 , 10)); // 20
複製代碼

建立對象

雖然Object構造函數或者對象字面量均可以用來建立單個對象，可是這些方式有個明顯的缺點：使用同一個接口建立不少對象，會產生大量的重複代碼。[p144]

工廠模式

工廠模式就是造一個模子產生一個個對象。

function createPerson(name , age ,job){
 	var o = new Object();
 	o.name = name;
 	o.age = age;
 	o.job = job;
 	o.sayName = function(){
 		alert(this.name);
 	};
 	return o;
 }
 
 var person1 = createPerson('nicholas' , 29 , 'software engineer');
 var person2 = createPerson('greg' , 27 , 'doctor');
複製代碼

工廠模式解決了建立多個類似對象的問題（解決建立對象時產生大量重複代碼），可是沒有解決對象識別的問題（即怎麼知道一個對象的類型，是Person仍是Animal啊）。

構造函數模式

下面使用構造函數建立特定類型的對象。這裏是Person類型：

function Person(name , age , job){ // 注意構造函數的首字母爲大寫哦
	this.name = name;
	this.age = age;
	this.job = job;
	this.sayName = function(){
		alert(this.name);
	}
}

var person1 = new Person('nicholas' , 29 , 'software engineer');
var person2 = new Person('greg' , 27 , 'doctor');

alert(person1.constructor == Person); // true 能夠理解爲person1的創造者是Person，也就是對象的類型Person
複製代碼

在建立Person的新實例，必須使用new操做符。以這種方式調用構造函數實際上會經歷如下4個步驟：

1. 建立一個新對象
2. 將構造函數的做用域賦給新對象（所以this指向了這個新對象）
3. 執行構造函數中的代碼（爲這個新對象添加屬性）
4. 返回新對象

構造函數解決了重複實例話問題（也就是建立多個類似對象的問題）和解決了對象識別的問題。可是，像上面那樣，person1和person2共有的方法，實例化的時候都建立了，這未免多餘了。固然能夠將共有的方法提取到外面，像這樣：

function Person(name , age , job){
	this.name = name;
	this.age = age;
	this.job = job;
	this.sayName = sayName;
}
function sayName(){
	alert(this.name);
}
var person1 = new Person('nicholas' , 29 , 'software engineer');
var person2 = new Person('greg' , 27 , 'doctor');
複製代碼

將sayName提取出來，就成了全局的方法了，然而這裏只有Person類建立對象的時候才使用到，這樣就大才小用了吧，因此提取出來到全局方法這種操做不推薦。

原型模式

建立的每一個函數都有一個prototype（原型）屬性，這個屬性就是一個指針，指向一個對象，而這個對象的用途就是包含能夠由特定類型的全部實例共享的屬性和方法。

function Person(){
}
Person.prototype.name = 'nicholas';
Person.prototype.age = 29;
Person.prototype.sayName = function(){
	alert(this.name);
};

var person1 = new Person();
person1.sayName(); // nicholas

var person2 = new Person();
person2.sayName(); // nicholas

console.log(person1.sayName == person2.sayName); // true
複製代碼

能夠有關係圖以下：

上面的Person.prototype不建議使用字面量來寫Person.prototype={},雖讓效果同樣，可是這裏重寫了本來Person.prototype的對象，所以constructor屬性會指向Ohject而不是Person。固然也是能夠處理的啦，將指向指正確並指定'construtor'的枚舉屬性爲enumerable: false。

原型模式解決了函數共享的問題，可是也帶了一個問題：實例化中對象的屬性是獨立的，而原型模式這裏共享了。

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

建立自定義類型的最多見的方式，就是組合使用構造函數模式和原型模式。構造函數模式用於定義實例屬性，而原型模式用於定義方法和共享屬性。

function Person(name , age ,job){
	this.name = name;
	this.age = age;
	this.job = job;
	this.friends = ['shelby' , 'court'];
}
Person.prototype.sayName = function(){
	alert(this.name);
}

var person1 = new Person('nicholas' , 29 , 'software engineer');
var person2 = new Person('greg' , 27 , 'doctor');

person1.friends.push('van');
console.log(person1.friends); // 'shelby,court,van'
console.log(person2.friends); // 'shelby,court'
console.log(person1.friends === person2.friends); // false
console.log(person1.sayName === person2.sayName); // true
複製代碼

動態原型模式

其餘的OO語言，好比java，建立對象的類中是包含了自身的屬性、方法和共有的屬性、方法，以下小狗的例子：

public class Dog{
	int age;
	public Dog(String name ){
		this.age = age;
		System.out.println('小狗的名字是: ' + name);
	}
	public void setAge(int age){
		age = age;
	}
	public int getAge(){
		System.out.println('小狗的年齡爲: ' + age);
		return age;
	}
	
	public static void main(String []args){
		/* 建立對象 */
		Dog dog = new Dog('tom');
		/* 經過方法來設定age */
		dog.setAge(2);
		/* 調用另一個方法獲取age */
		dog.getAge();
		/* 也能夠經過 對象.屬性名 獲取 */
		System.out.println('變量值: ' + dog.age);
	}
}
複製代碼

爲了看起來是類那麼一會事，動態原型模式把全部信息都封裝在了構造函數中，而經過在構造函數中初始化原型（僅在必要的狀況下），又保持了同時使用構造函數和原型的優勢。以下:

function Person(name , age ,job){
	// 屬性
	this.name = name;
	this.age = age;
	this.job = job;
	// 方法
	if(typeof this.sayName != 'function'){
		Person.prototype.sayName = function(){
			alert(this.name);
		}
	}
}
var friend = new Person('nicholas' , 29 , 'software engineer');
friend.sayName();
複製代碼

寄生構造函數模式

在前面幾種模式都不適應的狀況下，能夠用寄生構造函數模式（數據結構中就使用到哈），寄生構造函數模式能夠當作是工廠模式和構造函數模式的結合體。其基本思想是建立一個函數，該函數的做用僅僅是封裝建立對象的代碼，而後再返回新建立的對象。

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

var friend = new Person('nicholas', 29 , 'software engineer');
friend.sayName(); // nicholas
複製代碼

關於寄生構造函數模式，須要說明：返回的對象與構造函數或者與構造函數的原型屬性直接沒有什麼關係；也就是說，構造函數返回的對象與構造函數外部建立的對象沒有什麼區別。爲此，不能依賴instanceof操做符來肯定對象類型。因爲存在上面的問題，建議在可使用其餘模式的狀況下，不要使用這種模式。

穩妥構造函數模式

穩妥對象適合在一些安全的環境中（這些環境中會禁止使用this和new），或者防止數據被其餘應用程序（如Mashup程序）改動時使用。穩妥構造函數遵循與寄生構造函數相似的模式，可是有兩點不一樣：意識新建立對象的實例方法不引用this，二是不使用new操做符調用構造函數。

function Person(name , age , job){
	// 建立要返回的對象
	var o = new Object();
	
	// 能夠在這裏定義私有的變量和函數
	
	// 添加方法
	o.sayName = function(){
		alert(name);  // 不使用this.name
	};
	
	// 返回對象
	return o;
}

var friend = Person('nicholas', 29 , 'software engineer'); // 不使用new
friend.sayName(); // 'nicholas'
複製代碼

繼承

許多的OO語言都支持兩種繼承方法：接口繼承和實現繼承。接口繼承只繼承方法簽名，而實現繼承則繼承實際的方法。因爲函數沒有簽名，在ECMAScript中沒法實現接口繼承。ECMAScript只支持實現繼承，並且實現主要是依靠原型鏈來實現的。[p162]

原型鏈

原型鏈的基本思想是利用原型讓一個引用類型繼承另外一個引用類型的屬性和方法。回顧下構造函數、原型和實例的關係: 每一個構造函數都有一個原型對象，原型對象都包含一個指向構造函數的指針，而實例都包含一個指向原型對象的內部指針。

function SuperType(){
	this.property = true;
}
SuperType.prototype.getSuperValue = function(){
	return this.property;
}
function SubType(){
	this.subProperty = false;
}

// 繼承了SuperType,重點哦
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function(){
	return this.subProperty;
}

var instance = new SubType();
console.log(instance.getSuperValue()); // true
複製代碼

上面代碼中原型鏈以下：

原型鏈繼承帶來兩個問題：一是原型實際上變成了另外一個類型的實例，因而，原先的實例屬性也就變成了如今原型的屬性，共享了屬性。二是在建立子類型的實例時，不能在沒有影響全部對象實例的狀況下向超類型的構造函數傳遞參數。

借用構造函數

借用構造函數解決原型鏈繼承帶來的不能向構造函數傳遞倉鼠的問題。這裏使用到了apply()或者call()方法在新建立的對象上執行構造函數。

function SuperType(){
	this.colors = ['red','blue','green'];
}
function SubType(){
	// 繼承SuperType
	SuperType.call(this); // SuperType.apply(this)同效
}

var instance1 = new SubType();
instance1.color.push('black');
console.log(instance1.colors); // 'red,blue,green,black'

var instance2 = new SubType();
console.log(instance2.colors); // 'red,blue,green'
複製代碼

上面的例子中，我在父類型構造函數中沒有傳參數，看者感興趣的話能夠本身加下參數來實驗一番咯。

借用構造函數解決了原型鏈繼承的肯定，可是又沒有接納原型鏈的優勢：共享。下面的組合繼承結合了原型鏈和借用構造函數，容納了二者的優勢。

組合繼承

組合繼承的思路是使用原型鏈實現對原型屬性和方法的繼承，而經過借用構造函數來實現對實例屬性的繼承。

function SuperType(name){
	this.name = name;
	this.colors = ['red','blue','green'];
}
SuperType.prototype.sayName = function(){
	console.log(this.name);
}
function SubType(name,age){
	// 繼承屬性
	SuperType.call(this,name);
	this.age = age;
}

// 繼承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor =SubType; // 避免重寫構造函數指向錯誤
SubType.prototype.sayAge = function(){
	console.log(this.age);
}

var instance1 = new SubType('nicholas' , 29);
instance1.colors.push('black');
console.log(instance1.colors); // 'red,blue,green,black'
instance1.sayName(); // 'nicholas'
instance1.sayAge(); // 29

var instance2 = new SubType('greg' , 27);
console.log(instance2.colors); // 'red,blue,green'
instance2.sayName(); // 'greg'
instance2.sayAge(); // 27
複製代碼

組合繼承避免了原型鏈和借用構造函數的缺陷，融合了它們的優勢，成爲了JavaScript中最經常使用的繼承模式。並且，instanceof和isPrototypeOf()也可以用於識別基於組合繼承建立的對象。

原型式繼承

原型式繼承是藉助原型能夠基於已有的對象建立新對象，同時還沒必要所以建立自定義的類型。

function object(o){ // 傳入一個對象
	function F(){};
	F.prototype = o;
	return new F();
}

var person = {
	name : 'nicholas',
	friends: ['shelby','court','van']
};

var anotherPerson = object(person);
anotherPerson.name = 'greg';
anotherPerson.friends.push('rob');

var yetAnotherPerson = object(person);
yetAnotherPerson.name = 'linda';
yetAnotherPerson.friends.push('barbie');

console.log(person.friends); // 'shelby,court,van,rob,barbie'
複製代碼

寄生式繼承

寄生式繼承是與原型繼承緊密相關的一種思路。寄生式繼承的思路與寄生構造函數和工廠模式相似，便是建立了一個僅用於封裝繼承過程的函數，該函數在內部以某種方式來加強對象，最後再像真的作了全部工做同樣返回對象。

function object(o){ // 傳入一個對象
	function F(){};
	F.prototype = o;
	return new F();
}
function createAnother(original){
	var clone = object(original);
	clone.sayHi = function(){
		console.log('hi');
	};
	return clone;
}
var person = {
	name : 'nicholas',
	friends : ['shelby','court','van']
}
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); // 'hi'
複製代碼

上面的例子中，新對象anotherPerson不只具備person的全部屬性和方法，並且還有了本身的sayHi()方法。

寄生組合式繼承

組合繼承是JavaScript最經常使用的繼承模式；不過，它也有本身的不足。組合繼承最大的問題就是不管什麼狀況下，都會調用兩次超類型構造函數：一次是在建立子類型原型的時候，另外一次是在子類型構造函數內部。寄生組合式繼承可以解決這個問題。

所謂寄生組合式繼承，即經過借用構造函數來繼承屬性，經過原型鏈的混成形式來繼承方法。其背後的基本思路是沒必要爲了指定子類型的原型而調用超類型的構造函數，咱們所須要的無非就是超類型的原型的一個副本而已。寄生組合式繼承的基本模式以下：

function inheritPrototype(subType,superType){
	var prototype = Object(superType.prototype); // 建立對象
	prototype.constructor = subType; // 加強對象，防止下面重寫constructor屬性
	subType.prototype = prototype; // 指定對象
	
}
複製代碼

一個完整的例子以下,相關插圖見書[p173]:

function inheritPrototype(subType,superType){
	var prototype = Object(superType.prototype);
	prototype.constructor = subType;
	subType.prototype = prototype;
	
}
function SuperType(name){
	this.name = name;
	this.colors = ['red','blue','green'];
}
SuperType.prototype.sayName = function(){
	alert(this.name);
}
function SubType(name, age){
	SuperType.call(this, name); // 只在這調用了一次超類型的構造函數
        this.age = age;
}

inheritPrototype(SubType , SuperType);

SubType.prototype.sayAge = function(){
	console.log(this.age);
}

var instance = new SubType('nicholas' , 29);
複製代碼

上面的例子的高效處體如今它只調用了一次SuperType構造函數，而且避免了在SubType.prototype上建立沒必要要的，多餘的屬性。與此同時，原型鏈還能保持不變；所以還能正常使用instanceof和inPrototypeOf()。開發人員廣泛認爲寄生組合式繼承是引用類型最理想的繼承範式。

閉包

閉包是指有權訪問另外一個函數做用域中的變量的函數。個人理解是，函數內的函數使用到外層函數的變量延長變量的生存時間，形成常駐內存。例子見下：

function foo(){
    var a = 2;
    return function(){
		a += 1;
		console.log(a);
	}
}

var baz = foo();

baz(); // 3
baz(); // 4
baz(); // 5
baz(); // 6
複製代碼

上面的例子中，外部的函數foo()執行完成以後，正常的狀況下應該銷燬a變量的，可是內部的返回的匿名函數使用到該變量，不能銷燬。若是須要銷燬的話，能夠改寫成下面：

function foo(){
	var a = 2;
	return function(){
		a += 1;
		console.log(a);
	}
}
var baz = foo();
baz(); // 3

baz = null; // 將內部的匿名函數賦值爲空
複製代碼

從閉包提及

談到了閉包，這讓我想起了不久前刷知乎看到一篇文章。本身整理以下：

for(var i = 0 ; i < 5; i++){
	setTimeout(function(){
		console.log(i);
	},1000)
}
console.log(i);

// 5,5,5,5,5,5
複製代碼

上面的代碼是輸出了6個5，而這6個5是這樣執行的，先輸出全局中的console.log(i)，而後是過了1秒種後，瞬間輸出了5個5（爲何用瞬間這個詞呢，怕看者理解爲每過一秒輸出一個5）。解讀上面的代碼的話，能夠經過狹義範圍(es5)的理解：同步 => 異步 => 回調 （回調也是屬於異步的範疇，因此我這裏指明瞭狹義啦）。先是執行同步的for,遇到異步的setTimeout(setTimeout和setInterval屬於異步哈)後將其放入隊列中等待，接着往下執行全局的console.log(i)，將其執行完成後執行異步的隊列。

追問1:閉包

改寫上面的代碼，指望輸出的結果爲：5 => 0,1,2,3,4。改造的方式一：

for(var i = 0; i < 5; i++){
	(function(j){
		setTimeout(function(){
			console.log(j);
		},1000);
	})(i);
}
console.log(i);

// 5,0,1,2,3,4
複製代碼

上面的代碼巧妙的利用IIFE(Immediately Invoked Function Expression:聲明即執行的函數表達式)來解決閉包形成的問題，閉包的解析看上面。

方法二：利用js中基本類型的參數傳遞是按值傳遞的特徵，改造代碼以下

var output = function(i){
	setTimeout(function(){
		console.log(i);
	},1000);
};
for(var i = 0; i < 5; i++){
	output(i); // 這裏傳過去的i值被複制了
}
console.log(i);

// 5,0,1,2,3,4
複製代碼

上面改造的兩個方法都是執行代碼後先輸出5，而後過了一秒種依次輸出0,1,2,3,4。

若是不要考慮全局中的console.log(i)輸出的5，而是循環中輸出的0,1,2,3,4。你還可使用ES6的let塊級做用域語法,實現超級簡單:

for(let i = 0; i < 5; i++){
	setTimeout(function(){
		console.log(i);
	},1000);
}

// 0,1,2,3,4
複製代碼

上面是過了一秒鐘後，依次輸出0,1,2,3,4。這種作法相似於無形中添加了閉包。那麼，若是使用ES6語法的話，會怎樣實現5,0,1,2,3,4呢？

追問2:ES6

改造剛開始的代碼使得輸出的結果是每隔一秒輸出0,1,2,3,4，大概第五秒輸出5。

在不使用ES6的狀況下：

for(var i = 0; i < 5; i++){
	(function(j){
		setTimeout(function(){
			console.log(j);
		},1000*j);
	})(i);
}
setTimeout(function(){
	console.log(i);
},1000*i);

// 0,1,2,3,4,5
複製代碼

上面的代碼簡單粗暴，可是不推薦。看題目是每隔一秒輸出一個值，再回調實現最後的5輸出，這個時候應該使用ES6語法來考慮，應該使用Promise方案：

const tasks = [];
for(var i = 0; i < 5; i++){// 這裏的i聲明不能改爲let，改爲let的話請看下一段代碼
	((j)=>{
		tasks.push(new Promise((resolve)=>{ // 執行tasks
			setTimeout(()=>{
				console.log(j);
				resolve(); // 這裏必定要resolve,不然代碼不會按照預期執行
			},1000*j);
		}))
	})(i);
}

Promise.all(tasks).then(()=>{ // 執行完tasks，回調
	setTimeout(()=>{
		console.log(i);
	},1000);
});

// 符合要求的每隔一秒輸出
// 0,1,2,3,4,5
複製代碼

若是是使用let，個人改造以下：

const tasks = [];
for (let i = 0; i < 5; i++) {
		tasks.push(new Promise((resolve) => {
			setTimeout(() => {
				console.log(i);
				resolve();
			}, 1000 * i);
		}));
}

Promise.all(tasks).then(() => {
	setTimeout(() => {
		console.log(tasks.length);
	}, 1000);
});

// 0,1,2,3,4,5
複製代碼

上面的代碼比較龐雜，能夠將其顆粒話，模塊化。對上面兩段代碼的帶var那段進行改造後以下：

const tasks = []; // 這裏存放異步操做的Promise
const output = (i) => new Promise((resolve) => {
	setTimeout(()=>{
		console.log(i);
	},1000*i);
});

// 生成所有的異步操做
for(var i = 0; i < 5; i++){
	tasks.push(output(i));
}
// 異步操做完成以後，輸出最後的i
Promise.all(tasks).then(() => {
	setTimeout(() => {
		console.log(i);
	},1000);
});

// 符合要求的每隔一秒輸出
// 0,1,2,3,4,5
複製代碼

追問3:ES7

既然ES6的Promise能夠寫，那麼ES7是否能夠寫呢，從而讓代碼更加簡潔易讀？那就使用到到了異步操做的async await特性啦。

// 模擬其餘語言中的sleep，實際上能夠是任何異步操做
const sleep = (time) => new Promise((resolve) => {
	setTimeout(resolve , time);
});

(async () => {
	for(var i = 0; i < 5; i++){
		await sleep(1000);
		console.log(i);
	}
	
	await sleep(1000);
	console.log(i);
})();

// 符合要求的每隔一秒輸出
// 0,1,2,3,4,5
複製代碼

瀏覽器窗口位置

IE、Safari、Opera和Chrome都提供了screenLeft和screenTop屬性，分別表示瀏覽器窗口相對於屏幕左上角和上邊的位置[p197]。Firefox則以screenX和screenY屬性來表示。爲了兼容各個瀏覽器，能夠入下面這樣寫：

var leftPos = (typeof window.screenLeft == "number")?window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number")? window.screenTop : window.screenY;
複製代碼

瀏覽器窗口大小

因爲瀏覽器廠商以及歷史的問題，沒法確認瀏覽器自己的大小，可是能夠取得視口的大小[p198]。以下：

var pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;
    
if(typeof pageWidth != "number"){
	if(document.compatMode == 'CSS1Compat'){ // 標準模式下的低版本ie
		pageWidth = document.documentElement.clientWidth;
		pageHeight = document.documentElement.clientHeight;
	}else{ // 混雜模式下的chrome
		pageWidth = document.body.clientWidth;
		pageHeight = document.body.clientHeight;
	}
}
複製代碼

上面的示例能夠簡寫成下面這樣：

var pageWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientHeight;
var pageHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
複製代碼

canvas中的變換

爲繪製上下文應用變換，會致使使用不一樣的變換矩陣應用處理，從而產生不一樣的結果。[p453]

可經過下面的方法來修改變換矩陣:

• rotation(angle):圍繞原點旋轉圖像angle弧度
• scale(scaleX,scaleY)
• translate(x,y): 將座標原點移動到(x,y)。執行這個變換後，座標(0,0)會變成以前由(x,y)表示的點。

JSON

關於JSON，最重要的是要理解它是一種數據格式，不是一種編程語言。

對象字面量和JSON格式比較

先來看下對象字面量demo寫法：

var person = {
	name : "nicholas",
	age : 29
};

# 上面的代碼也能夠寫成下面的
var person = {
	"name" : "nicholas",
	"age" : 29
};
複製代碼

而上面的對象寫成數據的話，就是下面這樣了：

{
	"name": "nicholas ",
	"age": 29
}

# 可到網站 https://www.bejson.com/ 驗證
複製代碼

⚠️ 與JavaScript對象字面量相比，JSON對象又兩個地方不同。首先，沒有聲明變量(JSON中沒有變量的概念)。其次，沒有分號(由於這不是JavaScript語句，因此不須要分號)。留意的是，對象的屬性必須加雙引號(不是單引號哦)，這在JSON中是必須的。

stringify()和parse()

能夠這麼理解：JSON.stringify()是從一個object中解析成JSON數據格式，而JSON.parse()是從一個字符串中解析成JSON數據格式。

var person = {
	name: 'nicholas',
	age: 29
};

var jsonText = JSON.stringify(person);

console.log(jsonText);

// {"name":"nicholas","age":29}
複製代碼

var strPerson = '{"name":"nicholas","age":29}';
var jsonText = JSON.parse(strPerson);

console.log(jsonText); // { name: 'nicholas', age: 29 }
複製代碼

XMLHttpRequest對象

XMLHttpRequest對象用於在後臺與服務器交換數據。它是Ajax技術的核心[p571]。

XMLHttpRequest對象可以使你：

• 在不從新加載頁面的狀況下更新網頁
• 在頁面已加載後從服務器請求數據
• 在頁面已加載後從服務器接收數據
• 在後臺向服務器發送數據

XMLHttpRequest的使用：

# 建立XHR對象 => open()準備發送 => send()傳送數據

// 建立對象，對瀏覽器作兼容
function createXHR(){
	if(typeof XMLHttpRequest != 'undefined'){ // IE7+和其餘瀏覽器支持
		return new XMLHttpRequest();
	}else if(typeof ActiveXObject != 'undefined'){
		if(typeof arguments.callee.activeXString != 'string'){
			var versions = ['MSXML2.XMLHttp.6.0','MSXML2.XMLHttp.3.0','MSXML2.XMLHttp']; // 低版的ie可能遇到三種不一樣版本的XMR對象
			var i , len;
			for(i = 0,len = versions.length; i < len ; i++){
				try{
					new ActiveXObject(version[i]);
					arguments.callee.activeXString = versions[i];
					break;
				}catch (ex){
					// 跳過
				}
			}
		}
		return new ActiveXObject(arguments.callee.activeXString);
	}else{
		throw new Error("No XHR object available.");
	}
}
var xhr = createXHR();

// 準備發送數據
xhr.open("get","path/to/example.txt",false);// 非異步，異步的話第三個參數改成true

// 傳送數據
xhr.send(null); // get方法不須要傳數據

// 判斷狀態嘛，獲取服務器返回的數據
if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
	console.log(xhr.responseText);
}else{
	console.log("Request was nsuccessful : " + xhr.status);
}
複製代碼

跨域解決方案

何爲跨域呢？只要訪問的資源的協議、域名、端口三個不全相同，就能夠說是非同源策略而產生了跨域了，這是狹義的說法。廣義的說法：經過XHR實現Ajax通訊的一個主要限制，來源於跨域的安全策略；默認狀況下,XHR對象只能訪問包含它的頁面位於同一個域中的資源[p582]。注：部分文字和代碼引用自前端常見跨域解決方案（全）

CORS

CORS（Cross-Origin Resource Sharing，跨資源共享）定義了在必須訪問跨資源時，瀏覽器與服務器應該如何溝通。其背後的基本思想，就是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求或響應是應該成功，仍是應該失敗。 複雜的跨域請求應當考慮使用它。

普通跨域請求：只服務端設置Access-Control-Allow-Origin便可，前端無需設置，若是要帶cookie請求：先後端都要設置。

1.前端設置

1.) 原生ajax

function createCORSRequest(method,url){ // 兼容處理，ie8/9須要用到window.XDomainRequest
	var xhr = new XMLHttpRequest();
	// 前端設置是否帶cookie
	xhr.withCredentials = true;
	
	if("withCredentials" in xhr){ // 其餘的用到withCredentials
		xhr.open(method,url,true);
	}else if(typeof XDomainRequest != 'undefined'){
		xhr = new XDomainRequest();
		xhr.open(method , url);
	}else{
		xhr = null;
	}
	
	return xhr;
}

// get請求
var request = createCORSRequest("get","http://www.somewhere-else.com/page/");
if(request){
	request.onload = function(){
		// 對request.responseText 進行處理 
	};
	request.send();
}

// post請求，帶cookie
var requestXhr = createCORSRequest("post","http://www.somewhere-else.com/page/");
requestXhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
requestXhr.send("user=admin");
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};
複製代碼

2.)jquery ajax

上面寫了一大堆原生的，看得頭都有點大了，仍是使用jquery ajax 比較舒服:

$.ajax({
	...
	xhrFields: {
		withCredentials: true // 前端設置是否帶cookie
	},
	crossDomain: true, // 會讓請求頭中包含跨域的額外信息，但不會含cookie
	...
});
複製代碼

3.) vue框架

在vue-resource封裝的ajax組建中加入如下代碼:

Vue.http.options.credentials = true;
複製代碼

2.服務器設置

若後端設置成功，前端瀏覽器控制檯上就不會出現跨域報錯的信息，反之，說明沒有成功。

1.） java後臺

/* * 導入包：import javax.servlet.http.HttpServletResponse; * 接口參數中定義：HttpServletResponse response */
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com");  // 如有端口需寫全（協議+域名+端口）
response.setHeader("Access-Control-Allow-Credentials", "true");
複製代碼

2.) node後臺

var http = require('http');
var server = http.createServer();
var qs = require('querystring');

server.on('request', function(req, res) {
    var postData = '';

    // 數據塊接收中
    req.addListener('data', function(chunk) {
        postData += chunk;
    });

    // 數據接收完畢
    req.addListener('end', function() {
        postData = qs.parse(postData);

        // 跨域後臺設置
        res.writeHead(200, {
            'Access-Control-Allow-Credentials': 'true',     // 後端容許發送Cookie
            'Access-Control-Allow-Origin': 'http://www.domain1.com',    // 容許訪問的域（協議+域名+端口）
            'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'   // HttpOnly:腳本沒法讀取cookie
        });

        res.write(JSON.stringify(postData));
        res.end();
    });
});

server.listen('8080');
console.log('Server is running at port 8080...');
複製代碼

JSONP

JSONP是JSON with padding(填充式JSON或參數式JSON)的簡寫，是應用JSON的一種新方法，在後來的web服務中很是流行。簡單的跨域請求用JSONP便可。

一般爲了減輕web服務器的負載，咱們把js,css,img等靜態資源分離到另外一臺獨立域名的服務器，在html頁面中再經過相應的標籤從不一樣域名下加載靜態資源，而被瀏覽器容許，基於此原理，咱們能夠經過動態建立script，再請求一個帶參網址實現跨域通訊。

1.前端實現

1.）原生實現

<script> var script = document.createElement('script'); script.type = 'text/javascript'; // 傳參並指定回調執行函數爲onBack script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack'; document.head.appendChild(script); // 回調執行函數 function onBack(res){ console.log(JSON.stringify(res)); } </script>
複製代碼

服務器返回以下（返回時即執行全局函數）：

onBack({"status": true,"user":"admin"})
複製代碼

2.）jquery ajax

$.ajax({
	url: 'http://www.domain2.com:8080/login',
	type: 'get',
	dataType: 'jsonp', // 請求方式爲jsonp 
	jsonpCallback: 'onBack', // 自定義回調函數名
	data: {}
});
複製代碼

3.）vue.js

this.$http.jsonp('http://www.domain2.com:8080/login',{
	params: {},
	jsonp: 'onBack '
}).then((res)=>{
	console.log(res);
});
複製代碼

2.後端nodejs代碼的示範：

var qs = require('querystring');
var http = require('http');
var server = http.createServer();

server.on('request',function(req,res){
	var params = qs.parse(req.url.split('?')[1]);
	var fn = params.callback;
	
	// jsonp返回設置
	res.writeHead(200,{"Content-Type":"text/javascript"});
	res.write(fn + '('+JSON.stringify(params)+')');
	
	res.end();
});

server.listen('8080');
console.log('Server is running at port 8080 ...');
複製代碼

⚠️ jsonp缺點：只能實現get一種請求。

WebSocket協議跨域

WebSocket protocol 是 HTML5一種新的協議。它實現了瀏覽器與服務器全雙工通訊，同時容許跨域通信。

原生的WebSocket API使用起來不太方便，示例中使用了socket.io，它很好的封裝了webSocket接口，提供了更簡單、靈活的接口，也對不支持webSocket的瀏覽器提供了向下兼容。

1.前端代碼

<div>user input：<input type="text"></div>
<script src="./socket.io.js"></script>
<script> var socket = io('http://www.domain2.com:8080'); // 鏈接成功處理 socket.on('connect', function() { // 監聽服務端消息 socket.on('message', function(msg) { console.log('data from server: ---> ' + msg); }); // 監聽服務端關閉 socket.on('disconnect', function() { console.log('Server socket has closed.'); }); }); document.getElementsByTagName('input')[0].onblur = function() { socket.send(this.value); }; </script>
複製代碼

2.node socket後臺

var http = require('http');
var socket = require('socket.io');

// 啓http服務
var server = http.createServer(function(req, res) {
    res.writeHead(200, {
        'Content-type': 'text/html'
    });
    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

// 監聽socket鏈接
socket.listen(server).on('connection', function(client) {
    // 接收信息
    client.on('message', function(msg) {
        client.send('hello：' + msg);
        console.log('data from client: ---> ' + msg);
    });

    // 斷開處理
    client.on('disconnect', function() {
        console.log('Client socket has closed.'); 
    });
});
複製代碼

requestAnimationFrame()幀動畫

requestAnimationFrame 建立平滑的動畫[p682]。在此以前都是使用setTimeout或者setInterval實現，requestAnimationFrame與它們相比：

• 不須要時間間隔，會貼切瀏覽器的刷新頻率
• 在切換到另外的頁面時，會中止運行

使用的示範以下：

<div id="num">1</div>
複製代碼

// 兼容瀏覽器
(function(){
    var lastTime = 0;
    var vendors = ['webkit','moz','ms','-o'];
    for(var x = 0;x <vendors.length && !window.requestAnimationFrame; ++x){
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'cancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
    }
    if(!window.requestAnimationFrame){
        window.requestAnimationFrame = function(callback){
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function(){
                callback;
            },timeToCall);
            lastTime = currTime - timeToCall;
            return id;
        }
    }
    if(!window.cancelAnimationFrame){
        window.cancelAnimationFrame = function (id){
            clearTimeout(id);
        }
    }
})();

// 簡單的計數
var num = 1,
	 timer;
fn();
function fn(){
	document.getElementById('num').innerText = ++num;
	timer = requestAnimationFrame(fn);
}
document.onclick = function(){
	cancelAnimationFrame(timer);
}
複製代碼

原文連接請戳這裏