手写源码系列:原生js实现call方法

转载 tinolee 2020/3/26 11:31:18

call语法

func.call(thisArg, arg1, arg2, ...)

参数

  • thiaArg

    必选的。在 func 函数运行时使用的 this 值。请注意,this可能不是该方法看到的实际值:如果这个函数处于非严格模式下,则指定为 null 或 undefined 时会自动替换为指向全局对象,原始值会被包装。

  • arg1, arg2, ...

    指定的参数列表。

返回值

  • func函数的返回值,如果func没有返回值,则返回undefined

描述

1. call() 允许为不同的对象分配和调用属于一个对象的函数/方法 (func)
2. call() 提供新的 this 值给当前调用的函数/方法 (func)
复制代码

ECMAScript5.1

15.3.4.4 Function.prototype.call (thisArg [ , arg1 [ , arg2, … ] ] )

当以 thisArg 和可选的 arg1, arg2 等等作为参数在一个 func 对象上调用 call 方法,采用如下步骤:

1. 如果 IsCallable(func) 是 false, 则抛出一个 TypeError 异常。
2. 令 argList 为一个空列表。
3. 如果调用这个方法的参数多余一个,则从 arg1 开始以从左到右的顺序将每个参数
    插入为 argList 的最后一个元素。
4. 提供 thisArg 作为 this 值并以 argList 作为参数列表,调用 func 的 [[Call]] 内部方法
    ,返回结果。

call 方法的 length 属性是 1。

注:在外面传入的 thisArg 值会修改并成为 this 值。
thisArg 是 undefined 或 null 时它会被替换成全局对象,
所有其他值会被应用 ToObject 并将结果作为 this 值,这是第三版引入的更改。
复制代码

从最简单的例子出发

var tObj = {
    name:'tino'
}
function func(){
    console.log('this:',this)
    console.log('name:',this.name)
}

func.call(tObj);
// this: {name: "tino"}
// name: tino

复制代码

此时的func绑定函数做了执行操作,并且内部this指向了tObj对象

问题一:怎么通过call函数执行绑定函数func,并且将func内部this指向绑定对象

var tObj = {
    name:'tino',
    func:function(){
        console.log('this:',this)
    }
}
tObj.func()
//this: {name: "tino", func: ƒ}
复制代码

有没有发现,此时的func的this指向的是tObj对象; 也就是说,在绑定对象上创建一个内部函数,这个内部函数的执行会将this指向绑定对象tObj,那也就是我们可以将绑定函数func设置为绑定对象的内部函数,即: tObj.__func = func;

那现在我们来用callFunc函数做实现:

Function.prototype.callFunc = function(target) {
    target.__func = this; //this为绑定函数
    target.__func();
    //不能给绑定对象本身添加属性,可以delete删除这个添加的属性
    delete target.__func;
}

//测试
var tObj = {
    name: 'tino'
}

function func() {
    console.log('this:', this)
    console.log('name:', this.name)
}

func.callFunc(tObj)

// this: {name: "tino", __func: ƒ}
// name: tino
复制代码

问题二:怎么通过call传递给定参数给绑定函数并执行

var tObj = {
    name: 'tino'
}

function func(arg1, arg2) {
    console.log('this:', this)
    console.log('name:', this.name)
    console.log('arg1:', arg1)
    console.log('arg2:', arg2)
}

func.call(tObj, 'arg1', 'arg2');
//this: {name: "tino"}
//name: tino
//arg1: arg1
//arg2: arg2
复制代码

绑定函数func调用call函数,传入tObj,arg1,arg2三个参数,执行时可在func参数列表中获取到,但是不能确保参数的数量,可以通过函数的Arguments对象获取到所有的参数即Arguments[0]、Arguments[1]、Arguments[2]...;

var argList = [];
for(var i = 0;i<arguments.length;i++>){
    argList[i] = 'arguments['+(i + 1)+']';
}
复制代码

argList参数数组有了,现在我们应该怎么去传入__func中执行呢?

target.__func(...argList);

好像是可以的哦,但是是es6的方法,还是尽量模拟es3的吧,

eval('target.__func(' + argList + ')')

Function.prototype.callFunc = function(target) {
    target.__func = this; //this为绑定函数
    var argList = [];
    for (var i = 0, len = arguments.length; i < len; i++) {
        argList[i] = 'arguments[' + (i + 1) + ']';
    }
    // target.__func(...argList);
    eval('target.__func(' + argList + ')')
    delete target.__func
}
//测试
var tObj = {
    name: 'tino'
}

function func(arg1, arg2) {
    console.log('this:', this)
    console.log('name:', this.name)
    console.log('arg1:', arg1)
    console.log('arg2:', arg2)
}

func.callFunc(tObj, "tinolee", 2);
//this: {name: "tino", __func: ƒ}
//name: tino
//arg1: arg1
//arg2: arg2
复制代码

OK,参数传入测试通过,但是eval似乎不太受欢迎哪,但是还有一个Function构造函数可以来生成执行函数

new Function ([arg1[, arg2[, ...argN]],] functionBody)

// MDN的例子是这样的:
const sum = new Function('a', 'b', 'return a + b');
console.log(sum(2, 6));
复制代码

那我们应该怎么去设计一个tObj绑定对象执行内部函数__func,并传入参数的执行函数呢?

以上面测试例子为例:我们传入了arg1,arg2两个参数,那么在tObj的__func下怎么传入执行呢?Function构造函数如下:

new Function([[Expression]])(tObj,__func,argList)

构造函数表达式应该是这样

[[Expression]]
{
    return tObj.__func(argList[0],argList[1],argList[2]...)
}
复制代码

通过argments对象来解析不定参数

argment[0] -> tObj

argment[1] -> __func

argment[2] -> argList

那么构造函数表达式应该是这样

[[Expression]]
{
    return argment[0][argment[1]](argment[2][0],argment[2][1],argment[2][2]...)
}
复制代码

封装出一个生成表达式函数

function callExecuteExpression(argList) {
    var expression = 'return arguments[0][arguments[1]]('
    for (var i = 0, len = argList.length; i < len; i++) {
        i > 0 ?
            expression += ',arguments[2][' + i + ']' :
            expression += 'arguments[2][' + i + ']'
    }
    expression += ')'
    return expression
}
复制代码

现在构造函数可以这样书写

var expression = callExecuteExpression(argList)
new Function(expression)(tObj,__func,argList)
复制代码
Function.prototype.callFunc = function(target) {
    target.__func = this; //this为绑定函数
    var argList = [];
    for (var i = 0, len = arguments.length; i < len; i++) {
        argList[i] = arguments[i + 1];
    }
    // target.__func(...argList);
    //eval('target.__func(' + argList + ')')
    var expression = callExecuteExpression(argList)
    new Function(expression)(target, '__func', argList)
    delete target.__func
}
//测试
var tObj = {
    name: 'tino'
}

function func(arg1, arg2) {
    console.log('this:', this)
    console.log('name:', this.name)
    console.log('arg1:', arg1)
    console.log('arg2:', arg2)
}

func.callFunc(tObj, "tinolee", 2);
//this: {name: "tino", __func: ƒ}
//name: tino
//arg1: tinolee
//arg2: 2
复制代码

但是,还是有问题,也就是创建的内部函数__func可能在tObj中已经存在,所以需要做进一步处理

最简单的就是通过时间戳(new Date().getTime())作为唯一标识来创建内部函数__func,当然Sybmol()的唯一性也是可以的,只是还是上面说的尽量用es3来折磨自己吧。

var __func = '__'+new Date().getTime()

Function.prototype.callFunc = function(target) {
    var argList = [];
    for (var i = 0, len = arguments.length; i < len; i++) {
        argList[i] = arguments[i + 1];
    }

    var __func = '__' + new Date().getTime();
    //还可以进一步做暂存
    var ownFunc = target[__func];
    var hasOwnFunc = target.hasOwnProperty(__func);
    target[__func] = this; //this为绑定函数
    // target.__func(...argList);
    //eval('target.__func(' + argList + ')')
    var expression = callExecuteExpression(argList)
    new Function(expression)(target, __func, argList)
    delete target[__func]
    if (hasOwnFunc) {
        target[__func] = ownFunc;
    }
}
var tObj = {
    name: 'tino'
}

function func(arg1, arg2) {
    console.log('this:', this)
    console.log('name:', this.name)
    console.log('arg1:', arg1)
    console.log('arg2:', arg2)
}

func.callFunc(tObj, "tinolee", 2);
//this: {name: "tino", __1585152978563: ƒ}
//name: tino
//arg1: tinolee
//arg2: 2
复制代码

OK,测试通过; 接下来我们来依照ECMAScript5.1规范来完善下封装的函数

最终代码

function globalThis() {
    return this;
}

function callExecuteExpression(argList) {
    var expression = 'return arguments[0][arguments[1]]('
    for (var i = 0, len = argList.length; i < len; i++) {
        i > 0 ?
            expression += ',arguments[2][' + i + ']' :
            expression += 'arguments[2][' + i + ']'
    }
    expression += ')'
    return expression
}
Function.prototype.callFunc = function(target) {
    //this为绑定函数func
    //15.3.4.4.1
    if (typeof this !== 'function') {
        throw new TypeError(this + ' is not a function');
    }
    //thisArg 是 undefined 或 null 时它会被替换成全局对象
    if (typeof target === 'undefined' || target === null) {
        target = globalThis();
    }
    //所有其他值会被应用 ToObject 并将结果作为 this 值
    target = new Object(target);
    var argList = [];
    for (var i = 0, len = arguments.length; i < len; i++) {
        argList[i] = arguments[i + 1];
    }
    var __func = '__' + new Date().getTime();
    //还可以进一步做暂存
    var ownFunc = target[__func];
    var hasOwnFunc = target.hasOwnProperty(__func);
    target[__func] = this; //this为绑定函数
    // target.__func(...argList);
    //eval('target.__func(' + argList + ')')
    var expression = callExecuteExpression(argList)
    new Function(expression)(target, __func, argList)
    delete target[__func]
    if (hasOwnFunc) {
        target[__func] = ownFunc;
    }
}

console.log(Function.prototype.callFunc.length)
// 1
var tObj = {
    name: 'tino'
}

function func(arg1, arg2, arg3) {
    console.log('this:', this)
    console.log('name:', this.name)
    console.log('arg1:', arg1)
    console.log('arg2:', arg2)
}
func.callFunc(tObj, "tinolee", 2, 4);
//原生call此处的this打印是没有__1585152978563这个属性的,还没思考好这步改怎么解决
//this: {name: "tino", __1585152978563: ƒ}
//name: tino
//arg1: tinolee
//arg2: 2
复制代码

学习借鉴了大佬们的思路,记录下自己学习的过程,希望能帮到需要的人, 最后感谢大佬们的分享

参考链接

ECMAScript5.1中文版 + ECMAScript3 + ECMAScript(合集)

Function - JavaScript | MDN

JavaScript深入之call和apply的模拟实现

面试官问:能否模拟实现JS的call和apply方法

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[手写源码系列:原生js实现call方法]http://www.zyiz.net/tech/detail-121684.html

上一篇:解决vue 在ios微信“复制链接”功能问题

下一篇:Go 每日一库之 sjson

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    扫一扫关注最新编程教程