一、面试高频:apply 与 call 调用模式的区别
apply
和 call
的核心作用一致——改变函数内 this
的指向并立即执行函数,唯一区别是参数传递方式不同:
apply
:第二个参数需以数组形式传入,格式为函数名.apply(this指向, [参数1, 参数2, ...])
- 示例:
test.apply(param, [1, 2, 3]);
- 示例:
call
:第二个及以后参数需以逗号分隔传入,格式为函数名.call(this指向, 参数1, 参数2, ...)
- 示例:
test.call(param, 1, 2, 3);
- 示例:
实际开发中可根据参数是否已存在于数组中选择:若参数是零散值,call
写法更简洁;若参数已在数组里,apply
无需额外拆解。
二、必懂语法:逗号运算符的规则
逗号运算符的核心规则:执行所有用逗号分隔的表达式,最终返回最后一个表达式的结果。
示例:(i -= 2, [true, 'abc'][i]['length'])
中,先执行 i -= 2
(i 从 3 变为 1),再执行 [true, 'abc'][1]['length']
(取数组下标 1 的 ‘abc’,再取其长度 3),最终返回 3。
三、实战编程题:从定义到调用(附完整代码)
以下题目覆盖函数、对象、事件绑定等核心场景,均为面试高频考点,附详细注释和运行逻辑。
01 定义“重复执行函数”:指定次数+执行函数
需求:创建函数,接收“执行次数”和“待执行函数”两个参数,按次数重复执行函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>重复执行函数</title>
</head>
<script>
// 函数定义:a=执行次数,b=待执行函数
function repeatExecute(a, b) {
for (let i = 1; i <= a; i++) {
b(); // 每次循环执行函数b
}
}
// 函数调用:执行3次,每次打印内容
repeatExecute(3, function() {
console.log("第" + i + "次执行函数");
});
</script>
<body></body>
</html>
02 定义“返回函数的函数”:嵌套函数调用
需求:创建函数,其返回值是另一个带打印语句的函数,最终调用并执行打印。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>返回函数的函数</title>
</head>
<script>
// 外层函数:返回一个匿名函数
function getInnerFunc() {
return function() {
console.log("成功调用内层函数的打印语句");
};
}
// 调用方式:外层函数()() → 先执行外层获取内层函数,再执行内层函数
getInnerFunc()();
</script>
<body></body