今日手写

2021-11-17

js中的改变this指向函数 apply bind call

手写之前先看看call,apply,bind的使用和效果

const Person = {
    name: 'wuyupei',
    age: 20
}

function foo(a, b) {
    console.log(a,b);
    console.log(this.age);
}

// foo.call(Person,10, 30)
// foo.apply(Person, [10,30])
// foo.bind(Person,10)(20)
//结果 10 30 20

手写

call函数

Function.prototype.myCall = function (obj, ...args) {
     obj = obj || window
     // this此时是函数 暂时把它保存到obj对象上
     obj.fn = this
     // 这样调用 把fn里面的this隐式绑定到obj里面
     obj.fn(...args)
     // 删除多余属性
     delete obj.fn
}
foo.myCall(Person, 10, 50)

apply函数

Function.prototype.myApply = function (obj, args) {
    obj = obj || window
    // this此时是函数 暂时把它保存到obj对象上
    obj.fn = this
    // 这样调用 把fn里面的this隐式绑定到obj里面
    obj.fn(...args)
    // 删除多余属性
    delete obj.fn
}
foo.myApply(Person, [10, 50])

bind函数

Function.prototype.myBind = function(obj,...arg1) {
    obj = obj || window
    fn = this
    return function(...arg2) {
        return fn.call(obj,...arg1, ...arg2)
    }
}

let bar =  foo.myBind(Person, 10)
bar(30)

apply, call, bind函数还有一些细节,这里只是做一个简单的实现可以达到相同的效果,并没有对边界值进行分析

bind完整版(bind之后的函数当作构造函数,有点晕)

//bind完整版
      Function.prototype.Mybind = function (obj, ...args) {
          obj = obj || window

          // Symbol是唯一的，防止重名key
          const fn = Symbol()
          obj[fn] = this
          const _this = this

          const res = function (...innerArgs) {
              console.log(this, _this)  // window foo
              // 如果被bind执行的函数
              if (this instanceof _this) {
                  console.log(this);
                  this[fn] = _this
                  this[fn](...[...args, ...innerArgs])
                  delete this[fn]
              } else {
                  obj[fn](...[...args, ...innerArgs])
                  delete obj[fn]
              }
          }
          console.log(this);
          res.prototype = Object.create(this.prototype)
          return res
      }
      let bar =  foo.Mybind(Person, 10)
      bar(30)
      var b = new bar()

// 关于bind的一道题 :

请手写实现 ES5 中 Function 原型的 bind（即手写下面代码块中的myBind）方法，使得以下程序最后能输出 'success'。

function Animal(name, color) {
  this.name = name;
  this.color = color;
}
Animal.prototype.say = function () {
  return `I'm a ${this.color} ${this.name}`;
};
const Cat = Animal.myBind(null, 'cat');
const cat = new Cat('white');
if (cat.say() === 'I\'m a white cat' &&
  cat instanceof Cat && cat instanceof Animal) {
  console.log('success');
}

开始吧,兄弟~ 其实也不难:

function Animate(name, color) {
    console.log(name,color);
    this.name = name
    this.color = color
}

Animate.prototype.say = function () {
    console.log(this);
    console.log(`I'm a ${this.color} ${this.name}`);
    return `I'm a ${this.color} ${this.name}`
}

Function.prototype.myBind = function (target, ...args) {
    // this -> Animate函数   fn -> Animate函数
    const _fn = this

    const fn = function (...innerargs) {
        console.log(this);
        if (this instanceof _fn) {
            _fn.call(this,...args, ...innerargs)
        } else {
            _fn.call(target, ...args, ...innerargs)
        }
    }

    // 把构造函数的prototype执行_fn fn 此时fn已经是_fn的实例了
    fn.prototype = _fn.prototype
    // bind最终返回出的函数
    return fn
}
//把bind后返回的函数当作一个构造函数处理
const Cat = Animate.myBind(null, 'car')

const cat = new Cat('white') //   相当于new 上面的fn 而上面fn.prototype = _fn.prototype _fn又是Animate

if (cat.say() === `I'm a white car` && cat instanceof Cat && cat instanceof Animate) {
    console.log('success');
}

//正常使用
const p = Animate.myBind({name:'dog', color:"oo"},'person')
p('boy')