原生js实现call、apply以及bind方法的功能

    技术2024-01-21  105

    1.call()方法

    Function.prototype.newCall = function(context){ // 1 判断context是否为object,如果是object就代表可能是Object 或者 null,如果不是就赋值一个空对象 if (typeof context === 'object') { context = context || window // context 如果是null就会赋值为window } else { context = Object.create(null) } // 2 在context下挂载一个函数,函数所在的key随机生成,防止context上已有同名key var fn = +new Date() + '' + Math.random() // 用时间戳+随机数拼接成一个随机字符串作为一个新的key context[fn] = this // 3 newCall如果还有其他的参数传入也要考虑用到 var args = [] for(var i = 1; i < arguments.length; i++) { args.push('arguments['+ i + ']') } // 4 重点在这里,执行context[fn]这个函数,只能用eval,因为newCall的入参参数不确定 var result = eval('context[fn]('+args+')') // args是一个数组,但是当它和字符串相加时自动调用内部的toString方法转成字符串 delete context[fn] // 用完后从context上删除这个函数 // 5 返回结果 return result }

    2. apply()方法

    Function.prototype.newApply = function(context){ if (typeof context === 'object') { context = context || window } else { context = Object.create(null) } var fn = +new Date() + '' + Math.random() context[fn] = this // 敲黑板!!! var args = null if(arguments[1]){ args = [] for(var i = 0; i < arguments[1].length; i++) { args.push('arguments[1]['+ i + ']') } } var result = eval('context[fn]('+args+')') delete context[fn] return result }

    3.bind()方法

    Function.prototype.newBind = function(context){ if (typeof context === 'object') { context = context || window } else { context = Object.create(null) } var args = [] for(var i = 1; i < arguments.length; i++) { args.push(arguments[i]) } var fn = +new Date() + '' + Math.random() context[fn] = this // 重点这里包个function形成闭包 return function(){ var result = eval('context[fn]('+args+')') delete context[fn] return result } }

    总结:三种方法中前两种都是调用函数并改变this指向,而最后一种只改变this指向;前两种的区别为参数的接收形式,第一种的多个参数直接传递,第二种的参数放在数组中传递,因此多处理数组相关。

    Processed: 0.009, SQL: 9