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

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

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

函數被調用時，會創建一個活動記錄，這個也稱作執行上下文，這個記錄包含了函數在哪里被調用（調用棧）、函數調用方式、傳入的參數等信息，而this就是執行上下文的一個屬性，函數調用時會被用到。

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

└── 硬綁定，函數bar中強制綁定（顯示綁定）綁定foo在obj中執行

├── 包裹函數

├── 輔助函數（bind基本實現原理，下面有詳細實現）

new綁定，過程如下（發生在構造函數調用時）：
1、創建（或者說構造）一個新對象  
2、這個新對象會被執行[[Porototype]]連接  
3、這個新對象會被綁定到函數調用的this  
4、如果函數沒有返回其他的對象，那么new表達式的函數調用會自動返回新對象

規則優先級：默認綁定 < 隱式綁定 < 顯式綁定 < new綁定

☆☆☆☆☆☆ 輔助函數與bind函數的實現 ☆☆☆☆☆☆

    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時,說明返回的fBound被當做new的構造函數調用
          // 關鍵代碼，如果是new調用，就是使用新創建的this替換硬綁定的this，說明了new綁定優先級大于硬綁定
          return fToBind.apply(this instanceof fBound
                 ? this
                 : oThis,
                 // 獲取調用時(fBound)的傳參.bind 返回的函數入參往往是這么傳遞的
                 aArgs.concat(Array.prototype.slice.call(arguments)));
        };

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

    return fBound;
  };
}

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

null/undefined作為this的綁定對象傳入call、apply，使用的是默認綁定規則。

上述對硬綁定的介紹，會強制把this強制綁定到指定的對象上，防止了函數調用應用默認綁定規則，但是造成的問題就是，不夠靈活，使用不了隱式綁定和顯式綁定來修改this，于此同時，軟綁定便出現了。

if (!Function.prototype.softBind) {
    Function.prototype.softBind = function(obj) {
        var fn = this;
        // 捕獲所有curried參數
        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
內置對象（也是內置函數）： String、Number、Boolean、Object、Function、Array、Date、RegExp、Error

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

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

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

ES6可計算屬性名：

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

記住，函數永遠不屬于一個對象，只是一個引用，只是函數的this，會因為隱性綁定，在上下文做一層綁定而已。

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

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

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

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

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

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

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

Object.getOwnPropertyNames，遍歷對象自身的屬性

Object.getOwnPropertySymbol，遍歷對象自身Symbol類型屬性

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

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

對象常量，writable:false | configuable:false

禁止擴展，Object.preventExtensions(obj)

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

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

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

Object.hasOwnProperty，只會檢查對象

問題：myObject.hasOwnProperty()可能會報錯，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被訪問的對象請求一個迭代器對象，然后通過.next()方法遍歷所有返回來的值
數組內置有@@iterator，所以可以直接使用for...of。
使用內置@@iterator遍歷數組：

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

普通對象不含有@@iterator，無法使用for...of，可以進行改造，

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 }

個人博客地址