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
}
複製代碼