循环事件绑定和原型的应用

一、循环事件绑定：

<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;//返回对象的一个实例，完成原型的继承
}