JavaScript之call, apply, bind, new的实现

call

1. call 的实现, 一个一个传参

var foo = {
  val: 1
}

function bar() {
  console.log(this.val)
}

bar.call(foo) // 1

// 思路
var foo = {
  var: 1,
  bar: function() {
    console.log(this.val)
  }
}

foo.bar() // 1


// 第一版
Function.prototype.call = function(ctx) {
  const context = ctx ? ctx : window
  context.fn = this // foo.bar
  context.fn()
  delete context.fn
}

// 第二版，加参数

Function.prototype.call = function(ctx) {
  const context = ctx ? ctx : window
  context.fn = this
  let args = []
  for (var i = 1; i < arguments.length; i++) {
    // es6
    // args.push(arguments[i])
    // eval
    args.push('arguments[' + i + ']')
  }

  // es6
  // context.fn(...args)
  // eval
  const res = eval('context.fn( ' + args + ')')

  delete context.fn

  return res
}

复制代码

apply

2. apply 的实现 数组传参 思路，和apply雷同，只是处理参数的方式不一样而已

Function.prototype.apply = function(ctx, arr) {
  const context = ctx ? ctx : window
  context.fn = this
  let res
  if (!arr) {
    return context.fn()
  } else {
    let args = []
    for (var i = 0; i < arr.length; i++) {
      // 这里同样有两种写法，就不按个贴了
      args.push(arr[i])
    }

    res = context.fn(...args)
  }

  delete context.fn
  return res
}
复制代码

bind

3. bind 的实现 说明： bing的返回函数是一个函数 例外： 1) 返回的函数也可以进行传参 2) 当实例是通过返回函数new出来的时候，this会失效，但是参数还是照样生效

// 第一版

Function.prototype.bind = function(ctx) {
  const self = this

  return function() {
    return self.call(ctx)
  }
}

// 添加参数处理，先不管返回函数传参的情况
Function.prototype.bind = function(ctx) {
  const self = this
  // 从第二个开始取
  const args = Array.prototype.slice.call(arguments, 1) // typeof Array
  return function() {
    return self.apply(ctx, args)
  }
}

// 处理返回函数传参
Function.prototype.bind = function(ctx) {
  const self = this
  // 从第二个开始取
  const args1 = Array.prototype.slice.call(arguments, 1)
  return function() {
    const args2 = Array.prototype.slice.call(arguments)
    return self.apply(ctx, args1.contact(args2))
  }
}

// 处理new的情况，同时保留参数的引用
Function.prototype.bind = function(ctx) {
  const self = this
  // 从第二个开始取
  const args1 = Array.prototype.slice.call(arguments, 1)
  const resFn = function() {
    const args2 = Array.prototype.slice.call(arguments)
    return self.apply(this instanceof resFn ? this : cxt, args1.contact(args2))
  }
  resFn.prototype = this.prototype

  return resFn
}

// 优化
Function.prototype.bind = function(ctx) {
  if (typeof this !== 'function') {
    throw new Error('The caller shou be a function!!!')
  }
  const self = this
  // 从第二个开始取
  const args1 = Array.prototype.slice.call(arguments, 1)
  const resFn = function() {
    const args2 = Array.prototype.slice.call(arguments)
    return self.apply(this instanceof resFn ? this : cxt, args1.contact(args2))
  }

  return resFn
}
复制代码

new

4. new 关键字的实现 思路： new出来的对象，可以访问构造函数中的变量、方法和实例原型上的变量、方法。 可以新建一个对象，该对象的_proto_ 指向实例原型， 这个就可以访问原型上的变量、方法 该变对象的this指向，使其能访问构造函数的变量和对象

function createNew() {
  let obj = new Object()

  // constructor 是构造函数
  let constructor = [].shift.call(arguments)
  // constructor.prototype 是实例原型
  obj.__proto__ = constructor.prototype
  // 改变this指向
  constructor.apply(obj, arguments)

  return obj
}

// 问题： 当有返回值的时候
  1） 返回值为字符串
  2） 返回值为对象

第一种情况：
function test(name, age) {
  this.name = name
  this.age = age

  return 'test'
}

const obj = new test('len', 23)

console.log(obj.name) // undefined
console.log(obj.age) // undefined

第二种情况：

function test(name, age) {
  this.name = name
  this.age = age

  return {
    name,
    age
  }
}

const obj = new test('len', 23)

console.log(obj.name) // len
console.log(obj.age) // 23

改进：
function createNew() {
  let obj = new Object()
  
  let constructor = [].shift.call(arguments)
  
  obj.__proto__ = constructor.prototype

  const res = constructor.apply(obj, arguments)

  return typeof res === 'object' ? res : obj
}
复制代码