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

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

vue props | Primitive vs Reference Types

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

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

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

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

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

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

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

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

new string（）
new number（）

當(dāng)完成這樣的訪問(wèn)以后，這個(gè)臨時(shí)的包裝對(duì)象會(huì)被銷毀掉，所以在去訪問(wèn)a.t值是undefined

判斷對(duì)象為 null 或者 undefined

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

判斷對(duì)象是否有某個(gè)屬性

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

檢測(cè)類型的方法有很多：

typeof

instanceof

Object.prototype.toString

constructor

duck type

typeof 運(yùn)算符會(huì)返回一個(gè)字符串，非常適合函數(shù)對(duì)象和基本類型的判斷

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

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

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

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

實(shí)例1

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

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

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

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

ps: 不推薦使用eval()

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

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

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

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

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

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

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

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

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

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

一般函數(shù)

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

outer();//30

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

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

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

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

（延長(zhǎng)局部變量的生命周期，封裝私有變量）

img 對(duì)象經(jīng)常用于進(jìn)行數(shù)據(jù)上報(bào)，如下所示：
var report = function( src ){
    var img = new Image();
    img.src = src;
};
report( "http://xxx.com/getUserInfo" );
但是通過(guò)查詢后臺(tái)的記錄我們得知，因?yàn)橐恍┑桶姹緸g覽器的實(shí)現(xiàn)存在 bug，在這些瀏覽器
下使用 report 函數(shù)進(jìn)行數(shù)據(jù)上報(bào)會(huì)丟失 30%左右的數(shù)據(jù)，也就是說(shuō)， report 函數(shù)并不是每一次
都成功發(fā)起了 HTTP 請(qǐng)求。丟失數(shù)據(jù)的原因是 img 是 report 函數(shù)中的局部變量，當(dāng) report 函數(shù)的
調(diào)用結(jié)束后， img 局部變量隨即被銷毀，而此時(shí)或許還沒(méi)來(lái)得及發(fā)出 HTTP 請(qǐng)求，所以此次請(qǐng)求
就會(huì)丟失掉。
現(xiàn)在我們把 img 變量用閉包封閉起來(lái)，便能解決請(qǐng)求丟失的問(wèn)題：
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   

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

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

Function.prototype.bind()

react中this的應(yīng)用

這里的bind()是es5中的api

JS 原型與原型鏈

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

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

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

Student.prototype = Object.create(Person.prototype);//創(chuàng)建一個(gè)空對(duì)象，并且對(duì)象的原型指向Person.prototype 這樣既保證可以繼承Person.prototype上的方法，Student.prototype又有自己的空的對(duì)象  自己的修改不會(huì)影響原型鏈上的內(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中的幾種繼承實(shí)現(xiàn)

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

js中深復(fù)制和淺復(fù)制只針對(duì)像 Object, Array 這樣的復(fù)雜對(duì)象的。簡(jiǎn)單來(lái)說(shuō)，淺復(fù)制只復(fù)制一層對(duì)象的屬性，而深復(fù)制則遞歸復(fù)制了所有層級(jí)。

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

js中的淺拷貝和深拷貝

下面是一個(gè)簡(jiǎn)單的淺復(fù)制實(shí)現(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;
}

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

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

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

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

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

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

需要注意的是，如果對(duì)象比較大，層級(jí)也比較多，深復(fù)制會(huì)帶來(lái)性能上的問(wèn)題。在遇到需要采用深復(fù)制的場(chǎng)景時(shí)，可以考慮有沒(méi)有其他替代的方案。在實(shí)際的應(yīng)用場(chǎ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可以看作是一個(gè)語(yǔ)法糖，讓對(duì)象原型的寫法更加清晰。

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

我們?cè)趯?shí)現(xiàn)繼承的時(shí)候經(jīng)常要調(diào)用子類的方法

這里可以看看 jQuery

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

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

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

參考

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