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

持續(xù)不斷更新。。。

vue props | Primitive vs Reference Types

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

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

number string boolean這三種原始類型都有對應(yīng)的包裝類型。

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

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

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

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

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

new string（）
new number（）

當(dāng)完成這樣的訪問以后，這個臨時的包裝對象會被銷毀掉，所以在去訪問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 運算符會返回一個字符串，非常適合函數(shù)對象和基本類型的判斷

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

左操作數(shù)是個對象，如果不是直接返回false
右操作數(shù)必須是函數(shù)對象或者函數(shù)構(gòu)造器，如果不是會拋出type error
大概原理：instanceof會判斷左操作數(shù)上的對象的原型鏈上是否有右邊這個構(gòu)造函數(shù)的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()方法不能檢測非原生構(gòu)造函數(shù)的構(gòu)造函數(shù)名。因此，開發(fā)人員定義的任何構(gòu)造函數(shù)都將返回[object Object]。有些javascript庫會包含類似代碼：

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

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

實例1

js 中對象是引用傳遞, 基礎(chǔ)類型是值傳遞, 通過將基礎(chǔ)類型包裝 (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()得到一個構(gòu)造器的實例
obj.x 從構(gòu)造器的prototype屬性上拿到x
obj.hasOwnProperty("x")判斷這個屬性到底是這個對象上的還是對象的原型鏈上的
通過__proto__可以拿到對象的原型，這里這個x是屬于對象原型上的屬性

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

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

這個方法標(biāo)準(zhǔn)瀏覽器都可以得到 123 而IE6-8則依然是 1

ps: 不推薦使用eval()

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

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

函數(shù)在不同的調(diào)用下this指向是不一樣的

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

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

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

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

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

通過bind()方法可以改變函數(shù)運行時候里面對應(yīng)的this，這里的this再綁定module對象以后，再調(diào)用 結(jié)果就是81了

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

一般函數(shù)

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

outer();//30

對于一般的函數(shù)，當(dāng)函數(shù)結(jié)束調(diào)用之后，它的局部變量就可以被釋放了，具體釋放要取決于垃圾回收的機(jī)制

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

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

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

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

img 對象經(jīng)常用于進(jìn)行數(shù)據(jù)上報，如下所示：
var report = function( src ){
    var img = new Image();
    img.src = src;
};
report( "http://xxx.com/getUserInfo" );
但是通過查詢后臺的記錄我們得知，因為一些低版本瀏覽器的實現(xiàn)存在 bug，在這些瀏覽器
下使用 report 函數(shù)進(jìn)行數(shù)據(jù)上報會丟失 30%左右的數(shù)據(jù)，也就是說， report 函數(shù)并不是每一次
都成功發(fā)起了 HTTP 請求。丟失數(shù)據(jù)的原因是 img 是 report 函數(shù)中的局部變量，當(dāng) report 函數(shù)的
調(diào)用結(jié)束后， img 局部變量隨即被銷毀，而此時或許還沒來得及發(fā)出 HTTP 請求，所以此次請求
就會丟失掉。
現(xiàn)在我們把 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   

比如實現(xiàn)柯里化和反柯里化

for循環(huán)問題
解決方法
更多解決方法

Function.prototype.bind()

react中this的應(yīng)用

這里的bind()是es5中的api

JS 原型與原型鏈

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

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

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

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

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中的幾種繼承實現(xiàn)

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

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

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

js中的淺拷貝和深拷貝

下面是一個簡單的淺復(fù)制實現(xiàn)：

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;
}

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

導(dǎo)致的結(jié)果就是：

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

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

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

結(jié)果如下面的示意圖所示：

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

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

這幾篇文章是要看一看的
Javascript 面向?qū)ο缶幊蹋ㄒ唬悍庋b
Javascript面向?qū)ο缶幊蹋ǘ簶?gòu)造函數(shù)的繼承
Javascript面向?qū)ο缶幊蹋ㄈ悍菢?gòu)造函數(shù)的繼承

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

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

我們在實現(xiàn)繼承的時候經(jīng)常要調(diào)用子類的方法

這里可以看看 jQuery

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

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

e.target.value
JavaScript 常用方法總結(jié)
面試的信心來源于過硬的基礎(chǔ)

參考

《JavaScript高級程序設(shè)計》
《你所不知道的JavaScript》
http://www.cnblogs.com/wangfu...
JavaScript深入淺出
js知識點思維導(dǎo)圖
《js經(jīng)典實例》
javascript 總結(jié)（那些剪不斷理還亂的關(guān)系）