摘要：詞法熟悉語法的開發(fā)者，箭頭函數(shù)在涉及綁定時(shí)的行為和普通函數(shù)的行為完全不一致。被忽略的作為的綁定對(duì)象傳入，使用的是默認(rèn)綁定規(guī)則。使用內(nèi)置遍歷數(shù)組返回迭代器函數(shù)普通對(duì)象不含有，無法使用，可以進(jìn)行改造，個(gè)人博客地址

熟悉ES6語法的開發(fā)者，箭頭函數(shù)在涉及this綁定時(shí)的行為和普通函數(shù)的行為完全不一致。跟普通this綁定規(guī)則不一樣，它使用了當(dāng)前的詞法作用域覆蓋了this本來的值。

this理解成指向函數(shù)本身，函數(shù)對(duì)象的屬性(Fun.X)不是this.X 【X】
this指向函數(shù)的作用域 【X】
this是運(yùn)行時(shí)進(jìn)行綁定的，而不是編寫時(shí)綁定的，它的執(zhí)行上下文取決于函數(shù)調(diào)用時(shí)的各種條件，this的綁定和函數(shù)聲明的位置沒有任何關(guān)系，只取決于函數(shù)的調(diào)用方式（調(diào)用位置），具有動(dòng)態(tài)性，簡單地說，函數(shù)執(zhí)行過程中的調(diào)用位置決定了this的綁定對(duì)象。

函數(shù)被調(diào)用時(shí)，會(huì)創(chuàng)建一個(gè)活動(dòng)記錄，這個(gè)也稱作執(zhí)行上下文，這個(gè)記錄包含了函數(shù)在哪里被調(diào)用（調(diào)用棧）、函數(shù)調(diào)用方式、傳入的參數(shù)等信息，而this就是執(zhí)行上下文的一個(gè)屬性，函數(shù)調(diào)用時(shí)會(huì)被用到。

默認(rèn)綁定，this指向全局對(duì)象（嚴(yán)格模式，不允許使用）
隱式綁定，會(huì)把函數(shù)調(diào)用的this綁定到所在的上下文對(duì)象，對(duì)于隱式綁定，常常伴隨著隱式丟失的問題，函數(shù)別名、傳入回調(diào)函數(shù)、函數(shù)傳入內(nèi)置函數(shù)均會(huì)造成此問題
顯式綁定，就是常見call、apply方法，仍無法解決綁定丟失問題，但有個(gè)變種方法，叫做硬綁定

└── 硬綁定，函數(shù)bar中強(qiáng)制綁定（顯示綁定）綁定foo在obj中執(zhí)行

├── 包裹函數(shù)

├── 輔助函數(shù)（bind基本實(shí)現(xiàn)原理，下面有詳細(xì)實(shí)現(xiàn)）

new綁定，過程如下（發(fā)生在構(gòu)造函數(shù)調(diào)用時(shí)）：
1、創(chuàng)建（或者說構(gòu)造）一個(gè)新對(duì)象  
2、這個(gè)新對(duì)象會(huì)被執(zhí)行[[Porototype]]連接  
3、這個(gè)新對(duì)象會(huì)被綁定到函數(shù)調(diào)用的this  
4、如果函數(shù)沒有返回其他的對(duì)象，那么new表達(dá)式的函數(shù)調(diào)用會(huì)自動(dòng)返回新對(duì)象

規(guī)則優(yōu)先級(jí)：默認(rèn)綁定 < 隱式綁定 < 顯式綁定 < new綁定

☆☆☆☆☆☆ 輔助函數(shù)與bind函數(shù)的實(shí)現(xiàn) ☆☆☆☆☆☆

    function bind(fn, obj) {
        return function() {
            fn.apply(obj, arguments);
        }
    }

摘自MDN:

if (!Function.prototype.bind) {
  Function.prototype.bind = function(oThis) {
    if (typeof this !== "function") {
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
    }

    var aArgs   = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP    = function() {},
        fBound  = function() {
          // this instanceof fBound === true時(shí),說明返回的fBound被當(dāng)做new的構(gòu)造函數(shù)調(diào)用
          // 關(guān)鍵代碼，如果是new調(diào)用，就是使用新創(chuàng)建的this替換硬綁定的this，說明了new綁定優(yōu)先級(jí)大于硬綁定
          return fToBind.apply(this instanceof fBound
                 ? this
                 : oThis,
                 // 獲取調(diào)用時(shí)(fBound)的傳參.bind 返回的函數(shù)入?yún)⑼沁@么傳遞的
                 aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    // 維護(hù)原型關(guān)系
    if (this.prototype) {
      fNOP.prototype = this.prototype; 
    }
    // 下行的代碼使fBound.prototype是fNOP的實(shí)例,因此
    // 返回的fBound若作為new的構(gòu)造函數(shù),new生成的新對(duì)象作為this傳入fBound,新對(duì)象的__proto__就是fNOP的實(shí)例
    fBound.prototype = new fNOP();

    return fBound;
  };
}

bind輔助函數(shù)修改改變this的同時(shí)，可以使用Object.create(null)，如.call/.apply(Object.create(null), ...argument)，這樣可以有效防止修改全局對(duì)象。

null/undefined作為this的綁定對(duì)象傳入call、apply，使用的是默認(rèn)綁定規(guī)則。

上述對(duì)硬綁定的介紹，會(huì)強(qiáng)制把this強(qiáng)制綁定到指定的對(duì)象上，防止了函數(shù)調(diào)用應(yīng)用默認(rèn)綁定規(guī)則，但是造成的問題就是，不夠靈活，使用不了隱式綁定和顯式綁定來修改this，于此同時(shí)，軟綁定便出現(xiàn)了。

if (!Function.prototype.softBind) {
    Function.prototype.softBind = function(obj) {
        var fn = this;
        // 捕獲所有curried參數(shù)
        var curried = [].slice.call(arguments, 1);
        var bound = function() {
            return fn.apply(
                (!this || this === (window || global)) ? obj : this,
                curried.concat.apply(curried, arguments)
            );
        }
        bound.prototype = Object.create(fn.prototype);
        return bound;
    }
}

軟綁定DEMO:

function foo() {
    console.log("name:" + this.name);
}
var obj = { name: "obj" };
var obj2 = { name: "obj2" };
var obj3 = { name: "obj3" };
var fooBj = foo.softBind(obj);
fooBj(); // name: obj
obj2.foo = foo.softBind(obj2);
obj2.foo(); // name: obj2
fooBj.call(obj3); // name: obj3
setTimeout(obj2.foo, 10); // name: obj

基本類型：string、number、boolean、null、undefined、object
內(nèi)置對(duì)象（也是內(nèi)置函數(shù)）： String、Number、Boolean、Object、Function、Array、Date、RegExp、Error

日常開發(fā)，大家可能會(huì)有疑問，比如var a = "i am string"中a變量，它可以使用a.length、a.charAt(0)等屬性和方法。它本來是一個(gè)字符串，為什么會(huì)有類似對(duì)象的特性呢，這里會(huì)涉及到一個(gè)基本包裝對(duì)象，可以怎么理解這樣的一個(gè)概念性知識(shí)，一瞬間的引用類型，用完即毀，真正的引用類型會(huì)一直存在內(nèi)存中，而基本包裝對(duì)象只會(huì)存在一瞬間。

衍生方法：typeof、instanceof、Object.prototype.toString.call

對(duì)象的內(nèi)容是由一些存儲(chǔ)在特定命名位置的值組成的，叫做屬性（指針），有兩種訪問方式，myObject["a"]、myObject.a，對(duì)象屬性同時(shí)也是無序的。

ES6可計(jì)算屬性名：

const prefix = "a";
const myObject = {
    [prefix + "bar"]: "xxxx"
}

記住，函數(shù)永遠(yuǎn)不屬于一個(gè)對(duì)象，只是一個(gè)引用，只是函數(shù)的this，會(huì)因?yàn)殡[性綁定，在上下文做一層綁定而已。

深復(fù)制，JSON.parse(JSON.stringify(obj))

淺復(fù)制，Object.assign(...)，會(huì)遍歷一個(gè)或多個(gè)源對(duì)象的所有可枚舉的自由鍵到目標(biāo)對(duì)象，源對(duì)象的一些特性（如writable）不會(huì)被復(fù)制

屬性描述符，即writable、configuable、enumerable、value
獲得屬性描述符，Object.getOwnPropertyDescriptor(myObject, "a")
設(shè)置屬性描述符，Object.defineProperty(myObject, "a", {...})
configuable配置為false，不能使用delete關(guān)鍵字
enumerable控制屬性是否可枚舉

訪問描述符，（Getter/Setter）,可以改寫默認(rèn)的value，

var myObject = {
    get a() {
        return 2;
    }
}
myObject.a // 2
Object.defineProperty(myObject, "b", {
    get: function() {
        return this.a * 2 // 指向當(dāng)前對(duì)象
    }
});
myObject.b // 4

for...in，遍歷對(duì)象自身及原型上可枚舉的屬性

Object.keys()，遍歷對(duì)象自身可枚舉的屬性

Object.getOwnPropertyNames，遍歷對(duì)象自身的屬性

Object.getOwnPropertySymbol，遍歷對(duì)象自身Symbol類型屬性

Reflect.ownkeys，遍歷對(duì)象自身的屬性（包含不可枚舉屬性，Symbol類型屬性）

如果你希望對(duì)象屬性或是對(duì)象是不可改變，可以通過配置對(duì)象的屬性描述符來實(shí)現(xiàn)，但是這種不可變是一種淺不可變，如果對(duì)象中屬性的引用是對(duì)象、數(shù)組、函數(shù)，那么它們是可變的，實(shí)現(xiàn)方式有如下：

對(duì)象常量，writable:false | configuable:false

禁止擴(kuò)展，Object.preventExtensions(obj)

密封，Object.seal(obj)調(diào)用禁止擴(kuò)展，且不能重新配置，及刪除屬性，及configuable:false

凍結(jié)，Object.freeze(obj)，在密封的基礎(chǔ)上將writable:false

in操作符，檢查屬性是否存在對(duì)象里或是[[Prototype]]原型鏈上

Object.hasOwnProperty，只會(huì)檢查對(duì)象

問題：myObject.hasOwnProperty()可能會(huì)報(bào)錯(cuò)，myObject可能是Object.create(null)生成不帶[[Prototype]]原型鏈，而Object.hasOwnProperty是由[[Prototype]]委托，所以可以這樣，Object.prototype.hasOwnProperty.call(myObject, "a")

有坑：

4 in [2,4,6] // false
4 in [2,2,6,8,0] // true

判斷是否可枚舉 myObject.propertyIsEnumerable("a")

for...of被訪問的對(duì)象請(qǐng)求一個(gè)迭代器對(duì)象，然后通過.next()方法遍歷所有返回來的值
數(shù)組內(nèi)置有@@iterator，所以可以直接使用for...of。
使用內(nèi)置@@iterator遍歷數(shù)組：

var myArray = [1,2,3];
var it = myArray[Symbol.iterator](); // 返回迭代器函數(shù)
it.next(); // { value: 1, done: false }
it.next(); // { value: 2, done: false }
it.next(); // { value: 3, done: false }
it.next(); // { done: true }

普通對(duì)象不含有@@iterator，無法使用for...of，可以進(jìn)行改造，

var myObject = { a: 2, b: 3 };
Object.defineProperty(myObject, Symbol.iterator, {
    enumerable: false,
    writable: false,
    configuabale: false,
    value: function() {
        var o = this;
        var idx = 0;
        var ks = Object.keys(o);
        return {
            next: function() {
                return {
                    value: o[ks[idx++]],
                    done: (idx > ks.length)
                };
            }
        }
    }
});
vat it = myObject[Symbol.iterator]();
it.next(); // { value: 2, done: false }
it.next(); // { value: 3, done: false }
it.next(); // { done: true }

個(gè)人博客地址