前端思考日记（2021/1/23）

前端思考日记（2021/1/23）

写下自己的思考是个好习惯，可以总结自己的学习和智慧，巩固知识，也可以让自己不犯同样错误。希望自己可以坚持下来。

手写 bind、call、apply

bind、call、apply的主要效果就是改变this指向

this是指向调用者的

我们想要改变this指向只要改变函数的调用者即可

bind

const newFunc = func.bind(cur,…paras) 的效果是把函数的this固定指向cur

也就是说 newFunc 的this固定指向cur

function func1 (a, b, c) {
  console.log(this, a, b, c);
}

Function.prototype.myBind = function (cur, ...paras) {
  const syb = Symbol('func')
  cur[syb] = this
  Object.defineProperty(cur, syb, {
    enumerable: false
  })
  return (...p) => { cur[syb](...paras, ...p) }
}
func1.call({ name: 'call' }, 1, 2, 3) // { name: 'call' } 1 2 3
func1.myCall({ name: 'mycall' }, 1, 2, 3) // { name: 'mycall' } 1 2 3

call、apply

call 和 bind 的区别在于call是立即执行的

call 和 apply 的区别在于指定参数时 call 是分开的，apply 是要求为一个数组

Function.prototype.myCall = function (cur, ...paras) {
  const syb = Symbol('func')
  cur[syb] = this
  Object.defineProperty(cur, syb, {
    enumerable: false
  })
  cur[syb](...paras)
}

Function.prototype.myApply = function (cur, paras) {
  const syb = Symbol('func')
  cur[syb] = this
  Object.defineProperty(cur, syb, {
    enumerable: false
  })
  cur[syb](...paras)
}

func1.call({ name: 'call' }, 1, 2, 3) // { name: 'call' } 1 2 3
func1.myCall({ name: 'mycall' }, 1, 2, 3) // { name: 'mycall' } 1 2 3

func1.apply({ name: 'apply' }, [1, 2, 3]) // { name: 'apply' } 1 2 3
func1.myApply({ name: 'myapply' }, [1, 2, 3]) // { name: 'myapply' } 1 2 3