单独实现call,bind,apply,new,instanceof

call的实现

// 首先 context 为可选参数，如果不传的话默认上下文为 window
// 接下来给 context 创建一个 fn 属性，并将值设置为需要调用的函数
// 因为 call 可以传入多个参数作为调用函数的参数，所以需要将参数剥离出来
// 然后调用函数并将对象上的函数删除

Function.prototype.myCall = function (content) {
  if (typeof this !== "function") {
    throw new TypeError("Error");
  }
  content = content || window;
  let args = [].slice.call(arguments, 1);
  content.fn = this;
  const result = content.fn(...args);
  delete content.fn;
  return result;
};

apply

Function.prototype.myApply = function (content) {
  if (typeof this !== "function") {
    throw new TypeError("Error");
  }
  content = content || window;
  content.fn = this;
  let = result;
  if (arguments[1]) {
    result = content.fn(...arguments[1]);
  } else {
    result = content.fn();
  }
  delete content.fn;
  return result;
};

bind()函数会创建一个新的绑定函数（bound function，BF）。绑定函数是一个 exotic function object（怪异函数对象，ECMAScript 2015 中的术语），它包装了原函数对象。调用绑定函数通常会导致执行包装函数。绑定函数具有以下内部属性：

[[BoundTargetFunction]]- 包装的函数对象
[[BoundThis]]- 在调用包装函数时始终作为this值传递的值。
[[BoundArguments]]- 列表，在对包装函数做任何调用都会优先用列表元素填充参数列表。
[[Call]]- 执行与此对象关联的代码。通过函数调用表达式调用。内部方法的参数是一个this值和一个包含通过调用表达式传递给函数的参数的列表。

当调用绑定函数时，它调用[[BoundTargetFunction]]上的内部方法[[Call]]，就像这样Call(boundThis,args)。其中，boundThis是[[BoundThis]]，args是[[BoundArguments]]加上通过函数调用传入的参数列表。绑定函数也可以使用new运算符构造，它会表现为目标函数已经被构建完毕了似的。提供的this值会被忽略，但前置参数仍会提供给模拟函数。

bind返回了一个函数，对于函数来说有两种方式调用，一种是直接调用，一种是通过new的方式，我们先来说直接调用的方式
对于直接调用来说，这里选择了apply的方式实现，但是对于参数需要注意以下情况：因为bind可以实现类似这样的代码f.bind(obj, 1)(2)，所以我们需要将两边的参数拼接起来，于是就有了这样的实现args.concat(...arguments)
最后来说通过new的方式，在之前的章节中我们学习过如何判断this，对于new的情况来说，不会被任何方式改变this，所以对于这种情况我们需要忽略传入的this(即bind的第一个参数)

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

Function.prototype.myBind = function (content) {
if (typeof this !== "function") {
throw new TypeError("Error");
}
content = content || window;
const that = this;
let args = [].slice.call(arguments, 1);
return function F() {
if (this instanceof F) {
  return new that(...args, ...arguments);
}
return that.apply(content, args.concat(...arguments));
};
};

new


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

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

var person = new Otaku('Kevin', '18');

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

```javascript
// 注意：当new的构造函数有返回内容且内容为一个对象时。实例只会继承返回对象的属性。下面做了判断。
function create() {
  let obj = {};
  let con = [].shift.call(arguments);
  obj.__proto__ = con.prototype;
  let result = con.apply(obj, arguments);
  return result instanceof Object ? result : obj;
}

instanceof

function myInstanceof (left, right) {
    const prototype = right.prototype
    let left = left.__proto__
    while(true){
        if(left===undefined || left===null){
            return false
        }
        if(left === prototype){
            return true
        }
        left = left.__proto__
    }
}

Silencer-1984 / Summary-of-front-end-work

单独实现call,bind,apply,new,instanceof #12