【前端面试题】手写bind、call、apply

函数的重要性不多说了,经常使用函数肯定会用到this这个关键字。this指针是面向对象设计中的一项重要概念,它表示当前运行的对象。在实现对象的方法时,可以使用this指针来获得该对象自身的引用,JavaScript 中的 this 指针是一个动态的变量,一个方法内的this指针并不是始终指向定义该方法的对象的。

平时开发,改变函数this指向,会用到bind、call、apply这三种函数对象自带的方法,端午节虽然出去玩了,但还是抽空试着写了一下,实现同样的功能,先简单了解下这三个方法的特点。

  • bind
    1、第一个参数是函数的this指向,undefined || null 时指向 window
    2、第一个之后的参数就是对应函数的形参
    3、函数不会默认调用
  • call
    1、同bind第一条
    2、同bind第二条
    3、函数会默认调用
  • apply
    1、同bind第一条
    2、共接收两个参数,第二个参数是个数组,其内容依次是对应函数的形参
    3、同call第三条

开搞,开搞(忽略严格模式…)

function fun(a,b,c){
   console.log(this, a, b, c, 'ok,我要给你点赞')
   return this
}
// 我的bind
Function.prototype.myBind = function(context) {
	if (context === undefined || context === null) context = window;

   let myBind = Symbol('myBind');
   let argus = Array.from(arguments).filter((v, k) => k!==0 );

   if (typeof context == 'string' || typeof context == 'number') {
      const _this = new context.constructor(context);
       _this[myBind] = this;
      return function(){
           let result = _this[myBind](...argus)
           delete _this[myBind]
           return result
          }
   	   }

      context[myBind] = this;
      return function(){
          let result = context[myBind](...argus)
          delete context[myBind]
          return result
      }
}

// call 
Function.prototype.myCall = function(context) {
	if (context === undefined || context === null) context = window;

    let myCall = Symbol('myCall');
 	let argus = Array.from(arguments).filter((v, k) => k!==0 );

    if (typeof context == 'string' || typeof context == 'number') {
         const _this = new context.constructor(context);
          _this[myCall] = this;
          let result = _this[myCall](...argus)
          delete _this[myCall]
   	      return result
     }
     context[myCall] = this;
     let result = context[myCall](...argus)
     delete context[myCall]
     return result
}

// apply
Function.prototype.myApply = function(context) {
	if (context === undefined || context === null) context = window;

	let myApply = Symbol('myApply');
	let argus = arguments[1];

	if (typeof context == 'string' || typeof context == 'number') {
          const _this = new context.constructor(context);
          _this[myApply] = this;
          let result = _this[myApply](...argus)
          delete _this[myApply]
          return result
     }
     context[myApply] = this;
     let result = context[myApply](...argus)
     delete context[myApply]
     return result
}

前端小菜鸟,哪里写的不对,还请各位大佬快快指出,非常感谢。
转载请注明出处,端午节写的呢,谢谢。
【前端面试题】手写bind、call、apply_第1张图片

你可能感兴趣的:(封装原生的一些方法)