标签：selector 自身 one 作用 作用域 pre node 数组 补全
一、循环事件绑定：
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var node = document.querySelectorAll(‘ul li‘);
for(var i = 0, len = node.length; i < len; i++){
node[i].addEventListener(‘click‘,function(){
alert(‘click‘ + i);
})
}
</script>
这样绑定能否成功呢？发现不能，每次点击都会是5，因为触发事件的时候循环已经完了。其本质就是js没有局部作用域的概念，那么如何实现呢？
1、采用闭包：
var node = document.querySelectorAll(‘ul li‘);
for(var i = 0, len = node.length; i < len; i++){
(function(node,index){
node.addEventListener(‘click‘,function(){
alert(‘click‘ + index);
})
})(node[i],i);
}
2、采用新增索引值，对初学者更好理解一些
var node = document.querySelectorAll(‘ul li‘);
for(var i = 0, len = node.length; i < len; i++){
node[i].index = i;//新增属性值
node[i].onclick = function(){
alert(‘click‘ + this.index);
}
}
3、采用new关键字
var node = document.querySelectorAll(‘ul li‘);
function Fn(num){
this.fn = function(){
alert(‘click‘ + num);
}
}
for(var i = 0, len = node.length; i < len; i++){
var f = new Fn(i);
node[i].onclick = f.fn;
}
4、采用ES5的forEach()方法
var node = document.querySelectorAll(‘ul li‘);
//注：NodeList.prototype.forEach并非所有浏览器都支持，所以在IE需要slice把node形成一个真正的数组
[].slice.call(node).forEach(function(node,index){
node.addEventListener(‘click‘,function(){
alert(‘click‘ + index);
})
})
5、采用ES6块级作用域变量声明let
var node = document.querySelectorAll(‘ul li‘);
for(let i = 0, len = node.length; i < len; i++){
node[i].addEventListener(‘click‘,function(){
alert(‘click‘ + i);
})
}
6、思考：如果列表项达到100项或者更多怎么办呢？
采用事件代理。
二、原型的应用：
function clone(obj){
//实现下面的结果，去补全clone函数
}
var a = {name:‘a‘};
var b = clone(a);
console.log(b.name);//a
a.name = ‘a1‘;
console.log(b.name);//a1
b.name = ‘b‘;
console.log(a.name);//a1
a.name = ‘a2‘;
console.log(b.name);//b
其实说到底就是原型的应用的问题：
function clone(obj){
return Object.create(obj);//返回一个对象，其原型为参数obj对象
}
1、2呢，就是b对象里面无name属性，所以需要往原型链上查找，那么就取的都是原型a上的name属性；
3、4呢，当b对象有了自己的name属性，查找就查找自身找到name属性就不会往原型上去查找了。
Object.create方法就是类似于下面代码：
function clone(obj){
var ret = {};
ret.__proto__ = obj;//ret对象的原型指向obj
return ret;
}
但是__proto__并不是规范，避免使用。所以对于低本版，下面代码比较好
function clone(obj){
function Noop(){};//创建一个空构造函数，函数原型指向obj
Noop.prototype = obj;
return new Noop;//返回对象的一个实例，完成原型的继承
}
标签：selector 自身 one 作用 作用域 pre node 数组 补全
原文地址：http://www.cnblogs.com/goloving/p/7259728.html
