前端知识填坑记（二）：call和apply，bind ，new

前端知识填坑记（一）：浏览器内核，事件委托

call和apply，bind 的模拟实现

JavaScript 之 call和apply，bind 的模拟实现

call

call()方法在使用一个指定的 this值和若干个指定的参数值的前提下调用某个函数或方法。

const foo = {
    value: 1
}
 
function bar() {
    console.log(this.value)
}
 
bar.call(foo) // 1

• call 改变了 this 的指向，指向到 foo
• bar 函数执行了

const foo = {
  value: 1,
  bar: function() {
    console.log(this.value)
  }
}

我们模拟的步骤可以分为：

• 将函数设为对象的属性
• 执行该函数
• 删除该函数

// 第一步
foo.fn = bar
// 第二步
foo.fn()
// 第三步
delete foo.fn

第一版：改变作用域

Function.prototype.call = function (con) {
    const context = con || window
    // 首先要调用获取 call 的函数，可以用 this 获取
    context.fn = this 
    context.fn()
    delete context.fn
  }
  const foo = {
    value: 1
  }

  function bar() {
    console.log(this.value)
  }
  bar.call(foo)

第二版：实现传参

Function.prototype.call1 = function (con) {
    // 首先要调用获取 call 的函数，可以用 this 获取
    const context = con ||　window
    let args = []
    for (let i = 1, len = arguments.length; i < len; i++) {
      args.push('arguments[' + i + ']');
    }
    context.fn = this
    const result = eval('context.fn(' + args + ')')
    delete context.fn
    return result
  }
  const foo = {value: 1}

  function bar(name, age) {
    console.log(name)
    console.log(age)
    console.log(this.value)
  }

  bar.call1(foo, 'kevin', 18)

apply

apply()方法在使用一个指定的 this值和指定的参数数组的前提下调用某个函数或方法。

Function.prototype.apply = function(con, arr) {
    const context = con || window
    context.fn = this
    let result
    if(!arr) {
      result = context.fn()
    } else {
      const args = []
      for(let i = 0,len = arr.length; i < len; i++) {
        args.push(arr[ i ])
      }
      result = eval('context.fn('+ args +')')
    }
    delete context.fn
    return result
  }

bind

bind()方法会创建一个新函数。当这个新函数被调用时，bind()的第一个参数将作为它运行时的this，之后的一序列参数将会在传递的实参前传入作为它的参数。

const foo = {
    value: 1
  }
  function bar(name, age) {
    console.log(this.value)
    console.log(name)
    console.log(age)
  }

  let bindFoo = bar.bind(foo, 'daisy')
  bindFoo('18')

函数需要传name 和age 两个参数，竟然还可以在bind的时候，只传一个name，在执行返回的函数的时候，再传另一个参数 age!

Function.prototype.bind1 = function (con) {
    const self = this
    // 获取bind1函数从第二个参数到最后一个参数
    let args = Array.prototype.slice.call(arguments, 1)

    return function () {
      // 这个时候的arguments是指bind返回的函数传入的参数
      const bindArgs = Array.prototype.slice.call(arguments)
      s1elf.apply(context, args.concat(bindArgs))
    }
  }

构造函数效果的模拟实现

一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的this值被忽略，同时调用时的参数被提供给模拟函数。

当bind返回的函数作为构造函数的时候，bind时指定的this值会失效，但传入的参数依然生效。

const value = 2
  const foo = {
    value: 1
  }

  function bar(name, age) {
    this.habit = 'shopping'
    console.log(this.value);
    console.log(name)
    console.log(age)
  }

  bar.prototype.friend = 'kevin'
  const bindFoo = bar.bind(foo, 'daisy')
  const obj = new bindFoo('18')
  // undefined
  // daisy
  // 18
  console.log(obj.habit)
  console.log(obj.friend)
  // shopping
  // kevin

尽管在全局和 foo中都声明了value值，最后依然返回了undefind，说明绑定的this失效了，这个时候的this已经指向了obj。

Function.prototype.bind2 = function (context) {
    const self = this;
    const args = Array.prototype.slice.call(arguments, 1)
    const fBound = function () {
      const bindArgs = Array.prototype.slice.call(arguments)
      // 当作为构造函数时，this 指向实例，此时结果为 true，将绑定函数的 this 指向该实例，可以让实例获得来自绑定函数的值
      // 以上面的是 demo 为例，如果改成 `this instanceof fBound ? null : context`，实例只是一个空对象，将 null 改成 this ，实例会具有 habit 属性
      // 当作为普通函数时，this 指向 window，此时结果为 false，将绑定函数的 this 指向 context
      self.apply(this instanceof fBound ? this : context, args.concat(bindArgs))
    }
    // 修改返回函数的 prototype 为绑定函数的 prototype，实例就可以继承绑定函数的原型中的值
    fBound.prototype = this.prototype
    return fBound;
  }

构造函数效果的优化实现

但是在这个写法中，我们直接将fBound.prototype = this.prototype，我们直接修改 fBound.prototype的时候，也会直接修改绑定函数的prototype。这个时候，我们可以通过一个空函数来进行中转：

Function.prototype.bind2 = function (context) {

    if (typeof this !== "function") {
      throw new Error("Function.prototype.bind - what is trying to be bound is not callable")
    }

    const self = this
    const args = Array.prototype.slice.call(arguments, 1)

    const fNOP = function () {}

    const fBound = function () {
      const bindArgs = Array.prototype.slice.call(arguments)
      self.apply(this instanceof fNOP ? this : context, args.concat(bindArgs))
    }

    fNOP.prototype = this.prototype
    fBound.prototype = new fNOP()
    return fBound
  }

new

JavaScript深入之new的模拟实现

new运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一。

因为new是关键字，所以无法像bind 函数一样直接覆盖，所以我们写一个函数，命名为objectFactory，来模拟new的效果。用的时候是这样的：

第一版

function objectFactory() {

    const obj = new Object()
    const Constructor = [].shift.call(arguments)
    obj.__proto__ = Constructor.prototype
    Constructor.apply(obj, arguments)
    return obj
}

在这一版中，我们：

• 用new Object()的方式新建了一个对象 obj
• 取出第一个参数，就是我们要传入的构造函数。此外因为shift 会修改原数组，所以arguments 会被去除第一个参数
• 将obj的原型指向构造函数，这样obj 就可以访问到构造函数原型中的属性
• 使用apply，改变构造函数this 的指向到新建的对象，这样obj就可以访问到构造函数中的属性
• 返回obj

function Person(name, age) {
    this.name = name
    this.age = age
    this.habit = 'Games'
  }

  Person.prototype.strength = 60
  Person.prototype.sayYourName = function () {
    console.log('I am ' + this.name)
  }

  function objectFactory() {
    const obj = new Object()
    const Constructor = [].shift.call(arguments) // Person
    // arguments 除去了第一个参数（构造函数）后的参数
    obj.__proto__ = Constructor.prototype
    Constructor.apply(obj, arguments)
    return obj;
  }

  const person = objectFactory(Person, 'Kevin', '18')

  console.log(person.name) // Kevin
  console.log(person.habit) // Games
  console.log(person.strength) // 60

  person.sayYourName() // I am Kevin

返回值效果实现

接下来我们再来看一种情况，假如构造函数有返回值，举个例子：

function Person(name, age) {
    this.strength = 60;
    this.age = age;

    return {
        name: name,
        habit: 'Games'
    }
}

const person = new Person('Kevin', '18');

console.log(person.name) // Kevin
console.log(person.habit) // Games
console.log(person.strength) // undefined
console.log(person.age) // undefined

在这里我们是返回了一个对象，假如我们只是返回一个基本类型的值呢？

function Person (name, age) {
    this.strength = 60;
    this.age = age;

    return 'handsome boy';
  }

  const person = new Person('Kevin', '18');

  console.log(person.name) // undefined
  console.log(person.habit) // undefined
  console.log(person.strength) // 60
  console.log(person.age) // 18

第二版

function objectFactory() {

    const obj = new Object()
    const Constructor = [].shift.call(arguments)

    obj.__proto__ = Constructor.prototype
    const ret = Constructor.apply(obj, arguments)

    return typeof ret === 'object' ? ret : obj

  }

前端知识填坑记（三）：setTimeout，arguments