最近在写一个简单的jq的id元素获取的实现,在使用push遇到了点小麻烦。感觉push和push.call实现都可以,但是push无法实现。
代码大致意思是:通过封装了的循环函数去获取id元素,在循环函数中实现改变元素样式。封装时,为了函数中能够使用数组中的数据,使用函数的call方法借用了上下文,然后执行获取元素的函数,是用正则匹配id选择器字符,将获取到的dom节点追加到数组results中。问题出在了这里!追加的过程使用push直接追加不能实现,使用push.call()可以实现。以下是代码截图。
使用push时,打开控制台会显示错误this.style is undefined,div颜色无效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 30px;
border: 1px solid red;
margin: 10px 0;
}
</style>
</head>
<body>
<div id="dv"></div>
</body>
<script>
var getId = function(id,results){
results = results || [];
var rquickExpr = /^(?:#([\w-]+))$/,
m = rquickExpr.exec(id);
if(m){
if(m[1]){
results.push.call(results,document.getElementById(m[1]));
// results.push(results,document.getElementById(m[1]));
return results;
}
}
};
var each = function(arr,fn){
for(var i = 0 ; i < arr.length;i++){
if(fn.call(arr[i]) === false){//借用上下文,fn的this指向数组中的元素
break;
}
}
};
each(getId('#dv'),function(){
this.style.backgroundColor = 'pink';
});
</script>
</html>