写于2018年11月30日
,发布在掘金上阅读量近一万,现在发布到微信公众号申明原创。相对比较基础的知识,虽然日常开发可能用得比较少,各种源码中有很多call
和apply
,需要掌握。
前言
这是面试官问系列的第三篇,旨在帮助读者提升
JS
基础知识,包含new、call、apply、this、继承
相关知识。面试官问系列
文章如下:感兴趣的读者可以点击阅读。
1.面试官问:能否模拟实现JS的new操作符
2.面试官问:能否模拟实现JS的bind方法
3.面试官问:能否模拟实现JS的call和apply方法
4.面试官问:JS的this指向
5.面试官问:JS的继承
之前写过两篇《面试官问:能否模拟实现JS
的new
操作符》和《面试官问:能否模拟实现JS
的bind
方法》
其中模拟bind
方法时是使用的call
和apply
修改this
指向。但面试官可能问:能否不用call
和apply
来实现呢。意思也就是需要模拟实现call
和apply
的了。
附上之前写文章写过的一段话:已经有很多模拟实现
call
和apply
的文章,为什么自己还要写一遍呢。学习就好比是座大山,人们沿着不同的路登山,分享着自己看到的风景。你不一定能看到别人看到的风景,体会到别人的心情。只有自己去登山,才能看到不一样的风景,体会才更加深刻。
先通过MDN
认识下call
和apply
MDN 文档:Function.prototype.call()
语法
fun.call(thisArg, arg1, arg2, ...)
thisArg
在fun
函数运行时指定的this
值。需要注意的是,指定的this
值并不一定是该函数执行时真正的this
值,如果这个函数处于非严格模式下,则指定为null
和undefined
的this
值会自动指向全局对象(浏览器中就是window
对象),同时值为原始值(数字,字符串,布尔值)的this
会指向该原始值的自动包装对象。
arg1, arg2, ...
指定的参数列表
返回值
返回值是你调用的方法的返回值,若该方法没有返回值,则返回undefined
。
MDN 文档:Function.prototype.apply()
func.apply(thisArg, [argsArray])
thisArg
可选的。在 func
函数运行时使用的 this
值。请注意,this
可能不是该方法看到的实际值:如果这个函数处于非严格模式下,则指定为 null
或 undefined
时会自动替换为指向全局对象,原始值会被包装。
argsArray
可选的。一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 func
函数。如果该参数的值为 null
或 undefined
,则表示不需要传入任何参数。从ECMAScript 5
开始可以使用类数组对象。
返回值
调用有指定this值和参数的函数的结果。直接先看例子1
call
和 apply
的异同
相同点:
1、call
和apply
的第一个参数thisArg
,都是func
运行时指定的this
。而且,this
可能不是该方法看到的实际值:如果这个函数处于非严格模式下,则指定为 null
或 undefined
时会自动替换为指向全局对象,原始值会被包装。
2、都可以只传递一个参数。
不同点:apply
只接收两个参数,第二个参数可以是数组也可以是类数组,其实也可以是对象,后续的参数忽略不计。call
接收第二个及以后一系列的参数。
看两个简单例子1和2**:
// 例子1:浏览器环境 非严格模式下var doSth = function(a, b){console.log(this);console.log([a, b]);
}
doSth.apply(null, [1, 2]); // this是window // [1, 2]
doSth.apply(0, [1, 2]); // this 是 Number(0) // [1, 2]
doSth.apply(true); // this 是 Boolean(true) // [undefined, undefined]
doSth.call(undefined, 1, 2); // this 是 window // [1, 2]
doSth.call('0', 1, {a: 1}); // this 是 String('0') // [1, {a: 1}]
// 例子2:浏览器环境 严格模式下'use strict';
var doSth2 = function(a, b){console.log(this);console.log([a, b]);
}
doSth2.call(0, 1, 2); // this 是 0 // [1, 2]
doSth2.apply('1'); // this 是 '1' // [undefined, undefined]
doSth2.apply(null, [1, 2]); // this 是 null // [1, 2]
typeof
有7
种类型(undefined number string boolean symbol object function
),笔者都验证了一遍:更加验证了相同点第一点,严格模式下,函数的this
值就是call
和apply
的第一个参数thisArg
,非严格模式下,thisArg
值被指定为 null
或 undefined
时this
值会自动替换为指向全局对象,原始值则会被自动包装,也就是new Object()
。
重新认识了call
和apply
会发现:它们作用都是一样的,改变函数里的this
指向为第一个参数thisArg
,如果明确有多少参数,那可以用call
,不明确则可以使用apply
。也就是说完全可以不使用call
,而使用apply
代替。
也就是说,我们只需要模拟实现apply
,call
可以根据参数个数都放在一个数组中,给到apply
即可。
模拟实现 apply
既然准备模拟实现apply
,那先得看看ES5
规范。ES5规范 英文版
,ES5规范 中文版
。apply
的规范下一个就是call
的规范,可以点击打开新标签页去查看,这里摘抄一部分。
Function.prototype.apply (thisArg, argArray)
当以thisArg
和argArray
为参数在一个func
对象上调用apply
方法,采用如下步骤:
1.如果
IsCallable(func)
是false
, 则抛出一个TypeError
异常。
2.如果argArray
是null
或undefined
, 则返回提供thisArg
作为this
值并以空参数列表调用func
的[[Call]]
内部方法的结果。
3.返回提供thisArg
作为this
值并以空参数列表调用func
的[[Call]]
内部方法的结果。
4.如果Type(argArray)
不是Object
, 则抛出一个TypeError
异常。
5~8 略
9.提供thisArg
作为this
值并以argList
作为参数列表,调用func
的[[Call]]
内部方法,返回结果。apply
方法的length
属性是2
。
在外面传入的
thisArg
值会修改并成为this
值。thisArg
是undefined
或null
时它会被替换成全局对象,所有其他值会被应用ToObject
并将结果作为this
值,这是第三版引入的更改。
结合上文和规范,如何将函数里的this
指向第一个参数thisArg
呢,这是一个问题。这时候请出例子3:
// 浏览器环境 非严格模式下var doSth = function(a, b){console.log(this);console.log(this.name);console.log([a, b]);
}
var student = {name: '若川',doSth: doSth,
};
student.doSth(1, 2); // this === student // true // '若川' // [1, 2]
doSth.apply(student, [1, 2]); // this === student // true // '若川' // [1, 2]
可以得出结论1:在对象student
上加一个函数doSth
,再执行这个函数,这个函数里的this
就指向了这个对象。那也就是可以在thisArg
上新增调用函数,执行后删除这个函数即可。知道这些后,我们试着容易实现第一版本:
// 浏览器环境 非严格模式function getGlobalObject(){returnthis;
}
Function.prototype.applyFn = function apply(thisArg, argsArray){ // `apply` 方法的 `length` 属性是 `2`。// 1.如果 `IsCallable(func)` 是 `false`, 则抛出一个 `TypeError` 异常。if(typeofthis !== 'function'){thrownewTypeError(this + ' is not a function');}// 2.如果 argArray 是 null 或 undefined, 则// 返回提供 thisArg 作为 this 值并以空参数列表调用 func 的 [[Call]] 内部方法的结果。if(typeof argsArray === 'undefined' || argsArray === null){argsArray = [];}// 3.如果 Type(argArray) 不是 Object, 则抛出一个 TypeError 异常 .if(argsArray !== newObject(argsArray)){thrownewTypeError('CreateListFromArrayLike called on non-object');}if(typeof thisArg === 'undefined' || thisArg === null){// 在外面传入的 thisArg 值会修改并成为 this 值。// ES3: thisArg 是 undefined 或 null 时它会被替换成全局对象 浏览器里是windowthisArg = getGlobalObject();}// ES3: 所有其他值会被应用 ToObject 并将结果作为 this 值,这是第三版引入的更改。thisArg = newObject(thisArg);var __fn = '__fn';thisArg[__fn] = this;// 9.提供 thisArg 作为 this 值并以 argList 作为参数列表,调用 func 的 [[Call]] 内部方法,返回结果var result = thisArg[__fn](...argsArray);delete thisArg[__fn];return result;
};
实现第一版后,很容易找出两个问题:
[ ] 1.
__fn
同名覆盖问题,thisArg
对象上有__fn
,那就被覆盖了然后被删除了。
针对问题1 解决方案一:采用ES6
Sybmol()
独一无二的。可以本来就是模拟ES3
的方法。如果面试官不允许用呢。解决方案二:自己用Math.random()
模拟实现独一无二的key
。面试时可以直接用生成时间戳即可。
// 生成UUID 通用唯一识别码// 大概生成 这样一串 '18efca2d-6e25-42bf-a636-30b8f9f2de09'function generateUUID(){var i, random;var uuid = '';for (i = 0; i < 32; i++) {random = Math.random() * 16 | 0;if (i === 8 || i === 12 || i === 16 || i === 20) {uuid += '-';}uuid += (i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random)).toString(16);}return uuid;
}
// 简单实现// '__' + new Date().getTime();
如果这个key
万一这对象中还是有,为了保险起见,可以做一次缓存操作。比如如下代码:
var student = {name: '若川',doSth: 'doSth',
};
var originalVal = student.doSth;
var hasOriginalVal = student.hasOwnProperty('doSth');
student.doSth = function(){};
delete student.doSth;
// 如果没有,`originalVal`则为undefined,直接赋值新增了一个undefined,这是不对的,所以需判断一下。if(hasOriginalVal){student.doSth = originalVal;
}
console.log('student:', student); // { name: '若川', doSth: 'doSth' }
[ ] 2.使用了
ES6
扩展符...
解决方案一:采用eval
来执行函数。
eval
把字符串解析成代码执行。
MDN 文档:eval
语法
eval(string)
参数
string
表示JavaScript
表达式,语句或一系列语句的字符串。表达式可以包含变量以及已存在对象的属性。
返回值
执行指定代码之后的返回值。如果返回值为空,返回undefined
解决方案二:但万一面试官不允许用eval
呢,毕竟eval
是魔鬼。可以采用new Function()
来生成执行函数。MDN 文档:Function
语法
newFunction ([arg1[, arg2[, ...argN]],] functionBody)
参数
arg1, arg2, ... argN
被函数使用的参数的名称必须是合法命名的。参数名称是一个有效的JavaScript
标识符的字符串,或者一个用逗号分隔的有效字符串的列表;例如“×”
,“theValue”
,或“A,B”
。
functionBody
一个含有包括函数定义的JavaScript
语句的字符串。
接下来看两个例子:
简单例子:
var sum = newFunction('a', 'b', 'return a + b');
console.log(sum(2, 6));
// 稍微复杂点的例子:var student = {name: '若川',doSth: function(argsArray){console.log(argsArray);console.log(this.name);}
};
// var result = student.doSth(['若川i', 18]);// 用new Function()生成函数并执行返回结果var result = newFunction('return arguments[0][arguments[1]](arguments[2][0], arguments[2][1])')(student, 'doSth', ['若川i', 18]);
// 个数不定// 所以可以写一个函数生成函数代码:function generateFunctionCode(argsArrayLength){var code = 'return arguments[0][arguments[1]](';for(var i = 0; i < argsArrayLength; i++){if(i > 0){code += ',';}code += 'arguments[2][' + i + ']';}code += ')';// return arguments[0][arguments[1]](arg1, arg2, arg3...)return code;
}
你可能不知道在ES3、ES5
中 undefined
是能修改的
可能大部分人不知道。ES5
中虽然在全局作用域下不能修改,但在局部作用域中也是能修改的,不信可以复制以下测试代码在控制台执行下。虽然一般情况下是不会的去修改它。
function test(){varundefined = 3;console.log(undefined); // chrome下也是 3
}
test();
所以判断一个变量a
是不是undefined
,更严谨的方案是typeof a === 'undefined'
或者a === void 0;
这里面用的是void
,void
的作用是计算表达式,始终返回undefined
,也可以这样写void(0)
。更多可以查看韩子迟
的这篇文章:为什么用「void 0」代替「undefined」 解决了这几个问题,比较容易实现如下代码。
使用 new Function()
模拟实现的apply
// 浏览器环境 非严格模式function getGlobalObject(){returnthis;
}
function generateFunctionCode(argsArrayLength){var code = 'return arguments[0][arguments[1]](';for(var i = 0; i < argsArrayLength; i++){if(i > 0){code += ',';}code += 'arguments[2][' + i + ']';}code += ')';// return arguments[0][arguments[1]](arg1, arg2, arg3...)return code;
}
Function.prototype.applyFn = function apply(thisArg, argsArray){ // `apply` 方法的 `length` 属性是 `2`。// 1.如果 `IsCallable(func)` 是 `false`, 则抛出一个 `TypeError` 异常。if(typeofthis !== 'function'){thrownewTypeError(this + ' is not a function');}// 2.如果 argArray 是 null 或 undefined, 则// 返回提供 thisArg 作为 this 值并以空参数列表调用 func 的 [[Call]] 内部方法的结果。if(typeof argsArray === 'undefined' || argsArray === null){argsArray = [];}// 3.如果 Type(argArray) 不是 Object, 则抛出一个 TypeError 异常 .if(argsArray !== newObject(argsArray)){thrownewTypeError('CreateListFromArrayLike called on non-object');}if(typeof thisArg === 'undefined' || thisArg === null){// 在外面传入的 thisArg 值会修改并成为 this 值。// ES3: thisArg 是 undefined 或 null 时它会被替换成全局对象 浏览器里是windowthisArg = getGlobalObject();}// ES3: 所有其他值会被应用 ToObject 并将结果作为 this 值,这是第三版引入的更改。thisArg = newObject(thisArg);var __fn = '__' + newDate().getTime();// 万一还是有 先存储一份,删除后,再恢复该值var originalVal = thisArg[__fn];// 是否有原始值var hasOriginalVal = thisArg.hasOwnProperty(__fn);thisArg[__fn] = this;// 9.提供 `thisArg` 作为 `this` 值并以 `argList` 作为参数列表,调用 `func` 的 `[[Call]]` 内部方法,返回结果。// ES6版// var result = thisArg[__fn](...args);var code = generateFunctionCode(argsArray.length);var result = (newFunction(code))(thisArg, __fn, argsArray);delete thisArg[__fn];if(hasOriginalVal){thisArg[__fn] = originalVal;}return result;
};
利用模拟实现的apply
模拟实现call
Function.prototype.callFn = function call(thisArg){var argsArray = [];var argumentsLength = arguments.length;for(var i = 0; i < argumentsLength - 1; i++){// argsArray.push(arguments[i + 1]);argsArray[i] = arguments[i + 1];}console.log('argsArray:', argsArray);returnthis.applyFn(thisArg, argsArray);
}
// 测试例子var doSth = function (name, age){var type = Object.prototype.toString.call(this);console.log(typeof doSth);console.log(this === firstArg);console.log('type:', type);console.log('this:', this);console.log('args:', [name, age], arguments);return'this--';
};var name = 'window';var student = {name: '若川',age: 18,doSth: 'doSth',__fn: 'doSth',
};
var firstArg = student;
var result = doSth.applyFn(firstArg, [1, {name: '若川i'}]);
var result2 = doSth.callFn(firstArg, 1, {name: '若川i'});
console.log('result:', result);
console.log('result2:', result2);
细心的你会发现注释了这一句argsArray.push(arguments[i + 1]);
,事实上push
方法,内部也有一层循环。所以理论上不使用push
性能会更好些。面试官也可能根据这点来问时间复杂度和空间复杂度的问题。
// 看看V8引擎中的具体实现:function ArrayPush() {var n = TO_UINT32( this.length ); // 被push的对象的lengthvar m = %_ArgumentsLength(); // push的参数个数for (var i = 0; i < m; i++) {this[ i + n ] = %_Arguments( i ); // 复制元素 (1)}this.length = n + m; // 修正length属性的值 (2)returnthis.length;
};
行文至此,就基本结束了,你可能还发现就是写的非严格模式下,thisArg
原始值会包装成对象,添加函数并执行,再删除。而严格模式下还是原始值这个没有实现,而且万一这个对象是冻结对象呢,Object.freeze({})
,是无法在这个对象上添加属性的。所以这个方法只能算是非严格模式下的简版实现。最后来总结一下。
总结
通过MDN
认识call
和apply
,阅读ES5
规范,到模拟实现apply
,再实现call
。
就是使用在对象上添加调用apply
的函数执行,这时的调用函数的this
就指向了这个thisArg
,再返回结果。引出了ES6 Symbol
,ES6
的扩展符...
、eval
、new Function()
,严格模式等。
事实上,现实业务场景不需要去模拟实现call
和apply
,毕竟是ES3
就提供的方法。但面试官可以通过这个面试题考察候选人很多基础知识。如:call
、apply
的使用。ES6 Symbol
,ES6
的扩展符...
,eval
,new Function()
,严格模式,甚至时间复杂度和空间复杂度等。
读者发现有不妥或可改善之处,欢迎指出。另外觉得写得不错,可以点个赞,也是对笔者的一种支持。
// 最终版版 删除注释版,详细注释看文章// 浏览器环境 非严格模式function getGlobalObject(){returnthis;
}
function generateFunctionCode(argsArrayLength){var code = 'return arguments[0][arguments[1]](';for(var i = 0; i < argsArrayLength; i++){if(i > 0){code += ',';}code += 'arguments[2][' + i + ']';}code += ')';return code;
}
Function.prototype.applyFn = function apply(thisArg, argsArray){if(typeofthis !== 'function'){thrownewTypeError(this + ' is not a function');}if(typeof argsArray === 'undefined' || argsArray === null){argsArray = [];}if(argsArray !== newObject(argsArray)){thrownewTypeError('CreateListFromArrayLike called on non-object');}if(typeof thisArg === 'undefined' || thisArg === null){thisArg = getGlobalObject();}thisArg = newObject(thisArg);var __fn = '__' + newDate().getTime();var originalVal = thisArg[__fn];var hasOriginalVal = thisArg.hasOwnProperty(__fn);thisArg[__fn] = this;var code = generateFunctionCode(argsArray.length);var result = (newFunction(code))(thisArg, __fn, argsArray);delete thisArg[__fn];if(hasOriginalVal){thisArg[__fn] = originalVal;}return result;
};
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];}returnthis.applyFn(thisArg, argsArray);
}
学习源码整体架构系列
1.学习 jQuery 源码整体架构,打造属于自己的 js 类库
2.学习 underscore 源码整体架构,打造属于自己的函数式编程类库
3.学习 lodash 源码整体架构,打造属于自己的函数式编程类库
4.学习 sentry 源码整体架构,打造属于自己的前端异常监控SDK
5.学习 vuex 源码整体架构,打造属于自己的状态管理库
6.学习 axios 源码整体架构,打造属于自己的请求库
微信公众号
作者:常以若川为名混迹于江湖。前端路上 | PPT 爱好者 | 所知甚少,唯善学。
博客:https://lxchuan12.cn/posts/
,阅读体验可能更好些。
主要发布
前端 | PPT | 生活 | 效率
相关的文章,长按扫码关注。欢迎加我微信lxchuan12
(注明来源,基本来者不拒),拉您进【前端视野交流群】,长期交流学习~
小提醒:若川视野公众号原创文章合集在菜单栏中间【原创精选】按钮,欢迎点击阅读
由于公众号限制外链,点击阅读原文,或许阅读体验更佳,觉得文章不错,可以点个在看呀^_^另外欢迎留言交流~