js new call apply bind的底层实现

new

1. 以 Object.protoype 为原型创建一个新对象

2. 以新对象为 this，执行函数的 [[call]]

3. 如果 [[call]] 的返回值是对象，那么，返回这个对象，否则返回第一步创建的新对象

?

1 2 3 4 5

function myNew(fn, ...args) {   const obj = Object.create(fn.prototype);   const ret = fn.call(obj, ...args);   return ret instanceof Object ? ret : obj; }

 

call

实际上就是把方法挂在对象上，执行然后删除

?

1 2 3 4 5 6 7 8 9 10

Function.prototype.myCall = function(context, ...args) {     if (typeof this !== 'function') {         throw new TypeError('this is not a function')     }     context = context || window;     context.fn = this;     const ret = context.fn(...args);     delete context.fn;     return ret }

例子：fn.call(null,10,20,30);

 

apply

原理和call一样

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Function.prototype.myApply = function (context, arg) {     if (typeof this !== 'function') {         throw new TypeError('this is not a function')     }     context = context || window;     context.fn = this;     let ret;     if (arg) {         ret = context.fn(...args);     } else {         ret = context.fn();     }     delete context.fn;     return ret }

 例子：fn.apply(null,[10,20,30]); 

 

bind

bind原理就是封一层闭包

?

1 2 3 4 5 6 7 8 9 10

function.prototype.myBind = function (context, ...bindArgs) {     if (typeof this !== 'function') {         throw new TypeError('this is not a function');     }     const _this = this;     return function Fn(...execArgs) {         const args = bindArgs.concat(execArgs);         return _this.call(this instanceof Fn ? this : context, ...args);     } }

例子：fn.bind(opp,10,20)

 

可以形象的描述为：超人有飞的能力，我借用下超人会飞的能力，我也会飞了。