new, call, apply, bind模拟实现

一：模拟new的实现

我们首先看一下new的使用

function aninmal (name, actions) {
    this.name = name
    this.actions = actions
    this.sayName = function () {
        console.log('myname :>> ', this.name) 
    }
}
let cat = new aninmal('cat', ['eat', 'cat-walk'])

我们分析一下，new 一个对象之后，返回的是什么，以及它的内部做了哪些操作？

• 一个继承aninmal的对象cat被创建
• cat.__proto__ === aninmal.prototype
• 需要执行构造函数aninmal，并将this 指向新创建的对象实例cat
• 返回被一个新对象
  • 如果构造函数没有显示返回，怎返回this
  • 如果构造函数显式的返回值，返回的是基本类型， 如 number，string，boolean, 则返回的还是this, 注意返回null,也是返回this
  • 如果构造函数显式返回的是对象，如 {name: 1}, 则返回这个对象{name: 1}

通过以上分析，我们来实现一个MNew来模拟以上实现

    function isObject (obj) {
        return (typeof obj === 'object' && typeof obj !== null) || typeof obj === 'function'
    }
    function MNew () {
        // this
        let o = new Object()
        // 获取构造函数
        let FunctionConstructor = Array.prototype.shift.call(arguments)
        // this对象指向构造函数的对象
        o.__proto__ = FunctionConstructor.prototype
        // 需要执行构造函数aninmal，并将this 指向新创建的对象实例cat
        let obj = FunctionConstructor.apply(o, arguments)
        return isObject(obj) ? obj : o
    }

我们来一个简单的例子测试一下MNew

function parent (name, gender) {
    this.name = name
    this.gender = gender
    // return null
    // function _dd () {
    //     console.log('hellow')
    // }
    // return _dd
    // 默认return this
}

let aa = mNew(parent, 'rose', 'female')
console.log(aa)

let cc = new parent('jack', 'male')
console.log(cc) 

二： 模拟call实现

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。 -MDN

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
    // this是当前 Food 的实例，继承于Product
  Product.call(this, name, price);
  this.category = 'food';
}

console.log(new Food('cheese', 5).name);
// expected output: "cheese"

我们分析下，如何实现一个call

• Product函数执行了
• Product函数里的this被绑定了call的第一个参数
• Product的入参是call第一个之后的参数

// 有一点值得我们思考： 在没有依赖call,apply,bind的情况下，如果修改this指向
// 这里利用对象方法的形式： 把 Product 作为 call 第一个参数this的属性，如果通过 this.Product的方法调用，那么 Product里this就被绑定了call的this
Function.prototype.call = function (context, ...args) {
    let context = context || window
    // context 是 被绑定的this
    // this 是被call 调用的方法 
    let context.fn = this
    // 被绑定的this
    let res = context.fn(...args)
    delete context.fn
    return res
}

我们写一个简单的例子测试下：

function bb(params) {
    this.bb = 123
    console.log('params==>', params) // 456
    return this
}
let obj = {aa: 456}
let cc = bb.call(obj, 456) // {aa: 345, bb: 123}

三：apply 模拟的实现

我们既然实现了call的实现，那么 apply实现起来就简单多了

apply() 方法调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。- MDN

通过MDN的定义，我们发现，call和 apply 唯一的区别就是，第二个参数的形式不同

fn.call(obj, p1, p2, p3)
fn.apply(obj, [p1, p2, p3])

同样，我们分析，下如何实现一个apply，还是以Product这个例子来说明

• Product函数执行了
• Product函数里的this被绑定了apply的第一个参数
• Product的入参是apply第一个之后的参数的数组，内部会把数组拆开

Function.prototype.apply = function (this, args) {
    let context = this || window
    context.fn = this
    let res = context.fn(...args)
    delete context.fn
    return res
}

同样，拿刚才的例子测试下

function bb(a, b, c) {
    this.bb = 123
    console.log('params==>', a, b, c) // 3,4,5
    return this
}
let obj = {aa: 456}
let cc = bb.apply(obj, [3,4,5]) // {aa: 345, bb: 123}

四：接下来，我们来实现bind

bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。 -MDN

先来2个简单的例子

function rose (gender, hobby) {
    this.gender = gender
    this.hobby = hobby
    console.log('name==>', this.name)
    return this
}
let jack = {
    name : 'jack'
}

let extendRose = rose.bind(jack, 'female',  ['swimming', 'football'])
console.log(extendRose())  
// { name: 'jack', gender: 'female', hobby: [ 'swimming', 'football' ] }


let extendRose = rose.bind(jack, 'female',  ['swimming', 'football'])
let person = new extendRose()  
console.log(person)
// 值得注意的是： 通过构造函数返回，this仍然是rose的实例
// name==> undefined： rose 当前 name没有赋值
// rose { gender: 'female', hobby: [ 'swimming', 'football' ] }

let name = 'jack'
function getPerson (gender) {
    console.log(this.name)
    console.log('gender===>', gender)
}
let obj = {
    name: 'rose'
}
let person = getPerson.bind(obj, 'male')
person()
// 输出: 参数被带入了被bind的新函数
// rose 成功被绑定为obj
// gender===> male

通过以上的例子，我们来分析一下如何模拟一个bind，我们结合rose,jack例子来说明

• rose.bind(jack, b, c) 返回一个新的函数extendRose，函数的this指向 jack, 内置参数是 b, c
• extendRose 如果是通过new来调用的，则实例对象仍是rose的实例， this指向rose的实例。

接下来，我们来实现一个bind

Function.prototype.bind = function (context, ...bindArgs) {
    // 不是函数绑定直接报错
    if (typeof this !== 'function') {
        throw new Error('this must be a function')
    }
    // 调用函数
    let fn = this
    let fbound = function(...args) {
        args = [...bindArgs, ...args]
        // 看下面的关键点，来理解这一句代码
        return fn.apply(this instanceof fn ? this : context, args)
    }
    // this 是当前被绑定的函数
    // 关键点：this 有原型对象，返回的函数不能丢失this原型链对象上的属性
    if (this.prototype) {
        fbound.prototype = Object.create(this.prototype)
    }
    return fbound
}