function.bind(thisArg[, arg1[, arg2[, ...]]])

function fn(a) {
    console.log(this, a)
}
const fn1 = fn.bind({x: 100}); // fn1是一個(gè)函數(shù)，但是并沒(méi)有立即執(zhí)行
fn1(); // {x:100} 100
console.log(fn === fn1); // false，bind返回的是一個(gè)新的函數(shù)

const fn = (a) => {
    console.log(this, a);
}
const fn1 = fn.bind({x: 100}, 100); // 返回一個(gè)新的函數(shù)fn1，不會(huì)執(zhí)行
fn1(); // window，100 箭頭函數(shù)通過(guò)bind返回的函數(shù)無(wú)法修改其this指向

const fn = (a) => {
    console.log(this, a);
}
const fn1 = fn.bind(); // 未綁定
const fn2 = fn.bind(null); // 綁定null
const fn3 = fn.bind(undefined); // 綁定undefined
fn1(); // 綁定到執(zhí)行作用域，默認(rèn)為window
fn2(); // 綁定到執(zhí)行作用域，默認(rèn)為window
fn3(); // 綁定到執(zhí)行作用域，默認(rèn)為window

function.call(thisArg, arg1, arg2, ...)
function.apply(thisArg, argsArray)

function fn(a, b) {
    console.log(this, a, b);
}
fn.call({x: 100}, 10, 20); // {x: 100} 10 20
fn.apply({x: 100}, [10, 20]); // {x: 100} 10 20

const fn = (a, b) => {
    console.log(this, a, b);
}
fn.call({x: 100}, 10, 20); // Window 10 20
fn.apply({x: 100}, [10, 20]); // Window 10 20

// 通過(guò)原型鏈注冊(cè)方法
// context：傳遞的上下文this；bindArgs表示需要綁定的額外參數(shù)
Function.prototype.newBind = function (context, ...bindArgs) {
    const self = this; // 當(dāng)前調(diào)用bind的函數(shù)對(duì)象

    // 返回的函數(shù)本身也是可以再傳入?yún)?shù)的
    return function (...args) {
        // 拼接參數(shù)
        const newArgs = bindArgs.concat(args);
        return self.apply(context, newArgs)
    }
}
function fn(a,b) {
    console.log(this, a, b);
}
const fn1 = fn.newBind({x: 100}, 10);
fn1(20); // {x: 100} 10 20

function fn(a, b) {
    console.log(this, a, b);
}
fn.call({x: 100}, 10, 20); // {x: 100} 10 20
fn.apply({x: 100}, [10, 20]); // {x: 100} 10 20

let obj = {
    key: 'key',
    getKey: () => {
        return this.key;
    },
    getKey2() {
        return this.key;
    }
};
obj.getKey(); // this指向window，返回值取決于window中是否有對(duì)應(yīng)的屬性
obj.getKey2(); // this指向obj，返回 'key'

Function.prototype.newCall = function(context, ...args) {
    if (context == null) context = globalThis; // 如果傳入的上下文是null或者undefined，則使用全局globalThis，一般指向的就是window
    if (typeof context !== 'object') context = new Object(context); // 如果是原始類型（數(shù)字、字符串、布爾值等），則使用其包裝類型

    const fnKey = Symbol(); // 使用Symbol可確保key值不會(huì)重復(fù)，避免屬性覆蓋
    context[fnKey] = this; // this指向的是當(dāng)前調(diào)用newCall的函數(shù)

    console.log(context[fnKey]); // 打印當(dāng)前函數(shù)以及上下文this
    console.log(context);

    const res = context[fnKey](...args); // 執(zhí)行函數(shù)，函數(shù)的this指向?yàn)閏ontext
    delete context[fnKey]; // 刪除fn，防止污染

    return res; // 返回結(jié)果
}
fn.newCall({x: 100}, 10, 20); // {x: 100} 10 20
function fn(a,b) {
    console.log(this, a, b);
}

Function.prototype.newCall = function(context, args) {
    if (context == null) context = globalThis; // 如果傳入的上下文是null或者undefined，則使用全局globalThis，一般指向的就是window
    if (typeof context !== 'object') context = new Object(context); // 如果是原始類型（數(shù)字、字符串、布爾值等），則使用其包裝類型

    const fnKey = Symbol(); // 使用Symbol可確保key值不會(huì)重復(fù)，避免屬性覆蓋
    context[fnKey] = this; // this指向的是當(dāng)前調(diào)用newCall的函數(shù)

    console.log(context[fnKey]); // 打印當(dāng)前函數(shù)以及上下文this
    console.log(context);

    const res = context[fnKey](...args); // 執(zhí)行函數(shù)，函數(shù)的this指向?yàn)閏ontext
    delete context[fnKey]; // 刪除fn，防止污染

    return res; // 返回結(jié)果
}
fn.newCall({x: 100}, 10, 20); // {x: 100} 10 20
function fn(a,b) {
    console.log(this, a, b);
}