摘要：當多個事件觸發的時候，會把異步事件依次的放入里等同步事件執行完之后，再去隊列里一個個執行拾遺常用方法總結面試的信心來源于過硬的基礎參考高級程序設計你所不知道的深入淺出知識點思維導圖經典實例總結那些剪不斷理還亂的關系

持續不斷更新。。。

vue props | Primitive vs Reference Types

基本類型和字面值相等，對象實例和字面值不相等(可用于快速區分基本類型和對象實例)

看著這篇
https://github.com/mqyqingfen...

number string boolean這三種原始類型都有對應的包裝類型。

str 是個基本類型 是個字符串類型 strObj是個對象類型，并且這個對象類型實際上是string類型對應的包裝類

str是一個基本類型，它不是對象，所以不應該有屬性和方法，那么我想訪問這個基本類型的字符串，它的長度是多少

這就有些奇怪了，它是一個基本類型，怎么會有這樣一個.length屬性

我們嘗試給它像屬性一樣賦值,賦值是成功的,但是str.t卻是undefined

實際上，javascript中有一個隱藏的機制，當string number boolean這三個基本類型被嘗試用對象一樣使用的時候，比如訪問它的length屬性或者給它增加一些屬性，當做這樣的操作時候，javascript會將這些基本類型轉化為對應的包裝類型對象相當于

new string（）
new number（）

當完成這樣的訪問以后，這個臨時的包裝對象會被銷毀掉，所以在去訪問a.t值是undefined

判斷對象為 null 或者 undefined

// `null == undefined` 為true
if (variable == null) {
    // code
}

判斷對象是否有某個屬性

if(myObj.hasOwnProperty("")){
    alert("yes, i have that property");
}
// 或者
if("" in myObj) {
    alert("yes, i have that property");
}

檢測類型的方法有很多：

typeof

instanceof

Object.prototype.toString

constructor

duck type

typeof 運算符會返回一個字符串，非常適合函數對象和基本類型的判斷

常用 instanceof ,它是基于原型鏈判斷的一個操作符
instanceof

左操作數是個對象，如果不是直接返回false
右操作數必須是函數對象或者函數構造器，如果不是會拋出type error
大概原理：instanceof會判斷左操作數上的對象的原型鏈上是否有右邊這個構造函數的prototype屬性

function isArray(value) {
 return Object.prototype.toString.call(value) == "[object Array]";
}

function isFunction(value) {
 return Object.prototype.toString.call(value) == "[object Function]";
}

function isRegExp(value) {
  return Object.prototype.toString.call(value) == "[object RegExp]";
}

Object的toString()方法不能檢測非原生構造函數的構造函數名。因此，開發人員定義的任何構造函數都將返回[object Object]。有些javascript庫會包含類似代碼：

var isNativeJSON = window.JSON && Object.prototype.toString.call(JSON) == "[Object JSON]"

在web開發中能夠區分原生非原生javascript對象非常重要。只有這樣才能確切知道某個對象到底有哪些功能。

實例1

js 中對象是引用傳遞, 基礎類型是值傳遞, 通過將基礎類型包裝 (boxing) 可以以引用的方式傳遞

var a = 3;
a = a * 2;
console.log(a); // a = 6

var b = 1, c =2, d = 3;
var arr1 = [b,c,d];
arr1.forEach((item)=>{
    item = item * 2;
});
console.log(arr1); //arr1 = [1,2,3];

var arr2 = [{a:1},{a:2},{a:3}];
arr2.forEach((item)=>{
    item.a = item.a*2;
});
console.log(arr2); //arr2 = [{a:2},{a:4},{a:6}]

function changeStuff(a, b, c)
{
  a = a * 10;
  b.item = "changed";
  c = {item: "changed"};
}

var num = 10;
var obj1 = {item: "unchanged"};
var obj2 = {item: "unchanged"};

changeStuff(num, obj1, obj2);

console.log(num);
console.log(obj1.item);    
console.log(obj2.item);
//10
//changed
//unchanged

var obj = new Foo()得到一個構造器的實例
obj.x 從構造器的prototype屬性上拿到x
obj.hasOwnProperty("x")判斷這個屬性到底是這個對象上的還是對象的原型鏈上的
通過__proto__可以拿到對象的原型，這里這個x是屬于對象原型上的屬性

注意：es6之前沒有塊級作用域，有全局作用域和函數作用域，還有eval()作用域

這個代碼得到的是 1 而不是 123
如果想讓 eval 執行的代碼是全局的，那么有幾種方法。

這個方法標準瀏覽器都可以得到 123 而IE6-8則依然是 1

ps: 不推薦使用eval()

函數的返回值是依賴return語句的，如果沒有return語句會在代碼執行完后返回undefined，這是一般的函數調用
如果是作為構造器，然后外部使用new調用，構造器如果沒有return語句或者return的是基本類型的話，會將this作為返回

JavaScript this
this它本身代表函數運行時自生成的一個內部對象，只能在函數內部使用 ，隨著函數使用場合的不同，this的值會發生變化。
但是有個總原則:
this指的是調用函數的那個對象

函數在不同的調用下this指向是不一樣的

調用函數對象的apply/call/bind等方法，其作用是改變函數的調用對象，他們的第一個參數就表示改變后的 調用這個函數的對象，this指的就是這第一個參數
bind()方法是es5提供的，所以ie9+才有

arguments是一個類數組的對象，之所以說類數組，是它的原型并不是array.prototype 所以它沒有join() slice()這些數組對象才有的方法
嚴格模式下 arguments.callee是禁止使用的

call()第一個參數傳的是想作為this的對象，像上面這樣如果不是對象，會轉成對象，所以這里的100會被轉換成對應的包裝類 Number(100)

通過對象.屬性名這種調用方式(moule.getX()),如果沒有bind影響 這里會返回81

我們把moule.getX這樣的函數對象賦值給getX變量，這樣調用this會指向全局對象 所以這里返回9

通過bind()方法可以改變函數運行時候里面對應的this，這里的this再綁定module對象以后，再調用 結果就是81了

bind有函數柯里化功能
函數柯里化：把一個函數拆分成多個單元

一般函數

function outer () {
  var localVal = 30;
  return localVal;
}

outer();//30

對于一般的函數，當函數結束調用之后，它的局部變量就可以被釋放了，具體釋放要取決于垃圾回收的機制

function outer () {
  var localVal = 30;
  return  function () {
    return localVal;
  }
}

var func = outer();
func();  //30

對于一般函數，函數調用返回的時候，局部變量localval就會被釋放了，對于下面這種閉包，localVal是不能被釋放的。因為調用outer()以后返回的是一個匿名函數，這個匿名函數里面仍然可以訪問外面局部變量 localVal.這種機制就有了閉包的另一個重要的應用場景：讓變量值始終保持在內存里（詳情往下看）

（延長局部變量的生命周期，封裝私有變量）

img 對象經常用于進行數據上報，如下所示：
var report = function( src ){
    var img = new Image();
    img.src = src;
};
report( "http://xxx.com/getUserInfo" );
但是通過查詢后臺的記錄我們得知，因為一些低版本瀏覽器的實現存在 bug，在這些瀏覽器
下使用 report 函數進行數據上報會丟失 30%左右的數據，也就是說， report 函數并不是每一次
都成功發起了 HTTP 請求。丟失數據的原因是 img 是 report 函數中的局部變量，當 report 函數的
調用結束后， img 局部變量隨即被銷毀，而此時或許還沒來得及發出 HTTP 請求，所以此次請求
就會丟失掉。
現在我們把 img 變量用閉包封閉起來，便能解決請求丟失的問題：
var report = (function(){
    var imgs = [];
    return function( src ){
        var img = new Image();
        imgs.push( img );
        img.src = src;
    }
})();

function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000   

比如實現柯里化和反柯里化

for循環問題
解決方法
更多解決方法

Function.prototype.bind()

react中this的應用

這里的bind()是es5中的api

JS 原型與原型鏈

function Person() {}
function Student() {}

Stduent.prototype = Person.prototype;//這種是錯誤的，這樣改變Student的同時也改變了Person。比如student 會學習一個學科，但是并不是人也會，所以我們不能在改寫student的時候把person也改掉

Student.prototype = new Person(); //我們new Person的時候得到了一個Person的實例，且這個實例是指向Person.prototype 
// var o = new Person 則 o.__proto__ = Person.prototype 
//上面這種調用了Person構造函數實現了繼承。但是就是因為調用了構造函數

Student.prototype = Object.create(Person.prototype);//創建一個空對象，并且對象的原型指向Person.prototype 這樣既保證可以繼承Person.prototype上的方法，Student.prototype又有自己的空的對象  自己的修改不會影響原型鏈上的內容
//利用了原型鏈寫 不向上查找的特性

Student.prototype.constructor = Student;

 
function Person() { this.x = 1; }



function Student() { Person.apply(this); this.y = 2; }



var s = new Student();

s.x;

s.y;

call()

js中的幾種繼承實現

本質上:簡單的來說就是，在有指針的情況下，淺拷貝只是增加了一個指針指向已經存在的內存，而深拷貝就是增加一個指針并且申請一個新的內存，使這個增加的指針指向這個新的內存，采用深拷貝的情況下，釋放內存的時候就不會出現在淺拷貝時重復釋放同一內存的錯誤！

js中深復制和淺復制只針對像 Object, Array 這樣的復雜對象的。簡單來說，淺復制只復制一層對象的屬性，而深復制則遞歸復制了所有層級。

What is the most efficient way to deep clone an object in JavaScript?

js中的淺拷貝和深拷貝

下面是一個簡單的淺復制實現：

var obj = { a:1, arr: [2,3] };
var shadowObj = shadowCopy(obj);

function shadowCopy(src) {
  var dst = {};
  for (var prop in src) {
    if (src.hasOwnProperty(prop)) {
      dst[prop] = src[prop];
    }
  }
  return dst;
}

因為淺復制只會將對象的各個屬性進行依次復制，并不會進行遞歸復制，而 JavaScript 存儲對象都是存地址的，所以淺復制會導致 obj.arr 和 shadowObj.arr 指向同一塊內存地址，大概的示意圖如下。

導致的結果就是：

shadowObj.arr[1] = 5;
obj.arr[1]   // = 5

而深復制則不同，它不僅將原對象的各個屬性逐個復制出去，而且將原對象各個屬性所包含的對象也依次采用深復制的方法遞歸復制到新對象上。這就不會存在上面 obj 和 shadowObj 的 arr 屬性指向同一個對象的問題。

var obj = { a:1, arr: [1,2] };
var obj2 = deepCopy(obj);

結果如下面的示意圖所示：

需要注意的是，如果對象比較大，層級也比較多，深復制會帶來性能上的問題。在遇到需要采用深復制的場景時，可以考慮有沒有其他替代的方案。在實際的應用場景中，也是淺復制更為常用。

更多可以看這幾篇文章
http://www.cnblogs.com/racyil...
http://www.cnblogs.com/guorui...
http://jerryzou.com/posts/div...

這幾篇文章是要看一看的
Javascript 面向對象編程（一）：封裝
Javascript面向對象編程（二）：構造函數的繼承
Javascript面向對象編程（三）：非構造函數的繼承

class可以看作是一個語法糖，讓對象原型的寫法更加清晰。

在java中我們可以通過參數的類型的區別或者數量的區別，讓同樣一個函數名可以根據不同的參數列表的情況來調用相應的函數。
但在javascript中由于是弱類型的，沒有直接的機制實現參數的重載。javacript中函數參數類型是不確定的傳入的參數個數也是任意的，可以通過判斷實際傳入的參數的個數來做模擬的重載

我們在實現繼承的時候經常要調用子類的方法

這里可以看看 jQuery

JS單線程指的是js主引擎單線程，但是瀏覽器是多線程的，瀏覽器里面可能包含UI渲染，HTTP請求，用戶點擊等線程。當多個事件觸發的時候，JS會把異步事件依次的放入eventloop里等同步事件執行完之后，再去隊列里一個個執行event

https://segmentfault.com/a/11...

e.target.value
JavaScript 常用方法總結
面試的信心來源于過硬的基礎

參考

《JavaScript高級程序設計》
《你所不知道的JavaScript》
http://www.cnblogs.com/wangfu...
JavaScript深入淺出
js知識點思維導圖
《js經典實例》
javascript 總結（那些剪不斷理還亂的關系）