老生常谈,call apply bind new的使用及原理

122 阅读1分钟

call bind apply new在我们日常开发过程中经常用到,下面我们来看下使用及原理


我们先创建demo,用于测试

var ceshiFn = function(a, b){
    console.log(this);
    console.log(this.name);
    console.log([a, b]);
}
var obj = {
    name: '名字',
};

一、Function.prototype.apply()

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

引用mdn官方定义解释

image.png

apply的基本使用

ceshiFn.apply(obj, [1, 2]);

apply的原理实现

从基本使用方法中我们不难发现

var obj = {
    name: '名字',
    ceshiFn: ceshiFn
};
obj.ceshiFn(1, 2);

由此我们可以写出一版

Function.prototype.apply2 = function apply2(thisArg, argsArray){
    thisArg = new Object(thisArg);
    var __fn = '__fn';
    thisArg[__fn] = this;
    var result = thisArg[__fn](...argsArray);
    delete thisArg[__fn];
    return result;
}

二、Function.prototype.call()

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

引用mdn官方定义解释

image.png

call的基本使用

ceshiFn.call(obj, 1, 2)

call的原理实现

通过apply的实现,我们不难得出call的实现

Function.prototype.callFn = function call(thisArg){
   var argsArray = [];
   var argumentsLength = arguments.length;
   for(var i = 0; i < argumentsLength - 1; i++){
       argsArray[i] = arguments[i + 1];
   }
   return this.applyFn(thisArg, argsArray);
}