call,apply和bind原生实现

call实现

Function.prototype.newCall = function (context, ...parameter) {
   if (typeof context === 'object' || typeof context === 'function') {
     context = context || window
   } else {
     context = Object.create(null) // 创建一个空对象
   }
   context.fn = this;
   let result = context.fn(...parameter);
   delete context.fn;
   return result
 }
 
 let person = {
   name: 'zww'
 }
 function sayHi(age, sex) {
   console.log(this.name, age, sex)
 }
 sayHi.newCall(person, 22, '男')

apply实现

Function.prototype.newApply = function (context, paramter) {
  if (typeof context === 'object' || typeof context === 'function') {
     context = context || window
   } else {
     context = Object.create(null) // 创建一个空对象
   }
   context.fn = this;
   let result = context.fn(...paramter);
   delete context.fn
   return result
 }
 
 let person = {
   name: 'zww'
 }
 function sayHi(age, sex) {
   console.log(this.name, age, sex)
 }
 sayHi.newApply(person, [22, '男'])

bind 的实现对比其他两个函数略微地复杂了一点,因为 bind 需要返回一个函数,需要判断一些边界问题。bind 返回了一个函数,对于函数来说有两种方式调用,一种是直接调用,一种是通过 new 的方式。对于 new 的情况来说,不会被任何方式改变 this,所以对于这种情况我们需要忽略传入的 this。

Function.prototype.newBind = function (context, ...innerArgs) {
  if (typeof context === 'object' || typeof context === 'function') {
     context = context || window
   } else {
     context = Object.create(null)
   }
   var _this = this
   return function F(...finallyArgs) {
     if (this instanceof F) { // new 的方式调用
       return new _this(...innerArgs, ...finallyArgs)
     }
     return _this.call(context, ...innerArgs, ...finallyArgs)
   }
 }
 
let person = {
  name: 'zww'
 }
 function sayHi(age, sex) {
   console.log(this.name, age, sex)
 }

 let personSayHi = sayHi.newBind(person, 22)
 new personSayHi('男')
发布了3 篇原创文章 · 获赞 0 · 访问量 91
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览