关于JS那些容易被你忽略的那些点（3）

demo eleven

不知道你前面的理解的怎么样了。现在你来判断下下面代码的输出

for (var i = 0; i < 5; i++) {
var btn = document.createElement('button');
btn.appendChild(document.createTextNode('Button ' + i));
btn.addEventListener('click', function(){ console.log(i); });
document.body.appendChild(btn);
}

很眼熟对不对，没错，稍微改下就能完成想要实现的功能了

for (var i = 0; i < 5; i++) {
var btn = document.createElement('button');
btn.appendChild(document.createTextNode('Button ' + i));
(function(i){
btn.addEventListener('click', function(){ console.log(i); });
})(i);
document.body.appendChild(btn);
}

你自己再控制台可以试一试，看是不是实现功能了

demo twelve

那么再来判断下下面这段代码

var arr1 = "john".split(''); j o h n
var arr2 = arr1.reverse(); n h o j
var arr3 = "jones".split(''); j o n e s
arr2.push(arr3);
console.log("array 1: length=" + arr1.length + " last=" + arr1.slice(-1));
console.log("array 2: length=" + arr2.length + " last=" + arr2.slice(-1));

有两个要点，第一个是reverse()方法会将原数组改变，即arr1会变成n h o j
另外一个要点是类似以a = [0,1,2,3] , b = a这种形式的，如果改变b的值会使a的值也改变但是如果重新给b赋值则b的值不会进行改变

var a = [10,11,12]
var b = a;
b.push(55);
console.log(b);
console.log(a);

那如果是下面这种情况呢

var a = [10,11,12]
var b = a;
b = [1,2,5,8]
console.log(b);
console.log(a);

运行一下答案就很明显了

demo thirteen

直接上代码

console.log(1 +  "2" + "2");
console.log(1 +  +"2" + "2");
console.log(1 +  -"1" + "2");
console.log(+"1" +  "1" + "2");
console.log( "A" - "B" + "2");
console.log( "A" - "B" + 2);

记住几条规则
1.在数字字符串前面有“ + ”、“ - ”号的，运算过程中会将其转换为数字
2.对于无法运算的字符串，会返回NaN

demo fourteen

直接贴代码

for(var i = 0; i < 5; i++) {
(function(i) {
setTimeout(function() {
console.log(i);
}, i*1000);
})(i)
}

这道题之前提到过，但是由于上次只解决了一直输出5的问题，而忽略了另外一个问题。
这道题的原本目的是让每执行一次延时时间+1S，但是运行后会发现间隔一直只有一秒。
这是因为for循环执行很快，每次循环几乎是同时执行，所以导致了你觉得每次延时只有一秒钟

demo fifteen

var hero = {
_name: 'John Doe',
getSecretIdentity: function (){
return this._name;
}
};

var stoleSecretIdentity = hero.getSecretIdentity;

console.log(stoleSecretIdentity());
console.log(hero.getSecretIdentity());

执行后结果并不是我们想要的。
这是因为stoleSecretIdentity的执行环境是全局，而getSecretIdentity的执行环境是hero，咱们可以这样进行修改

var hero = {
_name: 'John Doe',
getSecretIdentity: function (){
return this._name;
}
};

var stoleSecretIdentity = hero.getSecretIdentity;

console.log(stoleSecretIdentity.call(hero));
console.log(hero.getSecretIdentity());