极客观点
项目管理
HarmonyOS
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js之防抖.js"></script>
</head>
<body>
<div id="container">0</div>
</body>
</html>
js
function debounce3(func, wait) {
var timeout;
return function() {
var context = this;
var args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function() {
func.apply(context, args);
}, wait);
}
}
window.onload = function() {
var count = 1;
var container = document.getElementById("container");
function getUserAction(e) {
container.innerHTML = count++;
console.log(e, this);
}
container.onmousemove = debounce3(getUserAction, 1000);
};
问题1：为什么 var context = this;中的this指向的是<div id="container">0</div>?
问题2：为什么 var args = arguments;可以接收到鼠标对象？如果不把arguments参数传递回来，getUserAction 中的e就是undefined?
this指向宿主对象，你这里的宿主对象是container，所以onmousemove的this就是container，而本质上，onmousemove就是debounce3(debounce3所返回的函数)，又由于debounce3内部手动绑定了getUserAction函数this的指向，所以这里也指向containerarguments代表的是当前函数所有接受到的参数，这个参数你如果直接在func.apply(context, arguments);中使用的话，这个arguments指的是setTimeout的那个回调函数接受到的参数，很显然是undefined个人看法，有误轻喷。