手写代码实现call/apply/bind

1. 手写call

Function.prototype.myCall = function (context) {
    if(context == null){
    context = window;}context.fn = this;const arg = [...arguments].slice(1);const ret = context.fn(...arg);delete context.fn;return ret;
}

function fn1(a, b) {
    console.log('this : ', this);console.log(a, b);return a + b;
}
const result = fn1.myCall({
    name: 'jal'}, 150, 100);
console.log(result);
this :  {
    name: "jal", fn: ?}
150 100
250

2. 手写apply

Function.prototype.myApply = function (context, arr) {
    if(context == null) {
    context = window;}context.fn = this;let ret;if(arr == null){
    ret = context.fn();}else {
    ret = context.fn(...arr);}delete context.fn;return ret;
}

function fn1(a, b) {
    console.log('this : ', this);console.log(a, b);return a + b;
}
const result = fn1.myApply({
    name: 'cathy'}, [2, 4]);
console.log(result);this :  {
    name: "cathy", fn: ?}
2 4
6

3. 手写bind

Function.prototype.myBind = function (context) {
    if(context == null){
    context = window;}const arg = [...arguments].slice(1);const _this = this;return function F () {
    if(this instanceof F) {
    return _this.call(this, ...arg);}return _this.call(context, ...arg);}
}

function fn1(a, b) {
    console.log('this : ', this);console.log(a, b);return a + b;
}
const fn2 = fn1.myBind({
    name: 'yibo'}, 6, 7);
const result = fn2();
console.log(result);this :  {
    name: "yibo"}
6 7
13