1. Simulation implementation of new

function newFactory(fn,... arguments) { var obj = {}; obj.__proto__ = fn.prototype; const ret = fn.call(obj, ... arguments); return typeof ret === 'object' ? ret : obj; };Copy the code
  1. Create an empty object obj;
  2. Points the implicit stereotype of the newly created empty object to the display stereotype of its constructor.
  3. Use call to redirect this
  4. If no value is returned or a non-object value is returned, obj is returned as the new object; If the return value is a new object, return that object directly.

Validation:

function Person(age, name) {
  this.age = age;
  this.name = name;
  return "new car";
}

var person = newFactory (Person,18, "Tom");
Copy the code

2. Simulation implementation of Call

Function.prototype.callFun = function (context, ... args) { var context = context || window; context.fn = this; const result = context.fn(... args); delete context.fn; return result; };Copy the code
  1. Sets the function as a property of the object
  2. Execute the function
  3. Delete the function

Validation:

const value2 = 2;

const obj2 = {
  value: 1
};

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

console.log(bar.callFun(obj2, 'kevin', 18));
Copy the code

3. Simulation implementation of Apply

Unlike call, apply accepts array parameters.

Function.prototype.apply = function (context, arr) { var context = Object(context) || window; context.fn = this; var result; if (! arr) { result = context.fn(); } else { result = context.fn(... arr); } delete context.fn return result; }Copy the code

Validation:

const value2 = 2;

const obj2 = {
  value: 1
};

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

console.log(bar.apply(obj2, ['kevin', 18]));
Copy the code

4. Simulation implementation of BIND

Simple version:

Function.prototype.bindFun = function(context, ... args){ var context = context || window; context.fn =this; var fBind = function(){ return context.fn(... args); } return fBind; }Copy the code

Perfect version:

Bind returns a function, not an execution result.

Function.prototype.bindFun = function (context,... args) { if (typeof this ! == "function") { throw new Error("Function.prototype.bind - what is trying to be bound is not callable"); } var self = this; var fNOP = function () {}; var fBound = function () { var bindArgs = Array.prototype.slice.call(arguments); return self.apply(this instanceof fNOP ? this : context, args.concat(bindArgs)); } fNOP.prototype = this.prototype; fBound.prototype = new fNOP(); return fBound; }Copy the code
bar.bindFun(obj, 'kevin', 18)()
Copy the code

This point

This refers to the object that last called it.

  • Nested functions do not inherit the pointer to this; they can do so by using the arrow function and saving the this local variable
  • You can also change the direction of this by calling or new

  • JavaScript deep new simulation implementation
  • JavaScript deep simulation of call and apply
  • This points to