JS易错知识点

变量作用域

var a = 1;
function test() {
    var a = 2;
    console.log(a); // 2
}
test();

var a = 1;
function test() {
    console.log(a); // undefined
    var a = 2;
}
test();

var a = 1;
function test() {
    console.log(a); // 1
    a = 2;
}
test();

let b = 1;
function test() {
    console.log(b); // b is not defined
    let b = 2;
}
test();

function test() {
    let a = 1;
    {
        let a = 2;
    }
    console.log(a); // 1
}
test();

类型比较

var arr = [],
    arr2 = [1];
console.log(arr === arr2); // false

var arr = [],
    arr2 = [];
console.log(arr === arr2); // false

var arr = [],
    arr2 = {};
console.log(typeof(arr) === typeof(arr2)); // true

var arr = [];
console.log(arr instanceof Object); // true
console.log(arr instanceof Array); // true

this指向

var obj = {
    name: 'xiaoming',
    getName: function () {
        return this.name
    }
};
console.log(obj.getName());  // 'xiaoming'

var obj = {
    myName: 'xiaoming',
    getName: function () {
        return this.myName
    }
};
var nameFn = obj.getName;
console.log(nameFn()); // undefined

var obj = {
    myName: 'xiaoming',
    getName: function () {
        return this.myName
    }
};
var obj2 = {
    myName: 'xiaohua'
};
var nameFn = obj.getName;
console.log(nameFn.apply(obj2)); // 'xiaohua'

函数参数

function test6() {
    console.log(Array.prototype.slice.call(arguments)); // [1, 2]
}
test6(1, 2);
// 上方利用函数中的arguments类数组对象获取传入函数的参数数组，所以输出数组[1, 2]。

function test7 () {
    return function () {
        console.log(Array.prototype.slice.call(arguments)); // 未执行到此，无输出
    }
}
test7(1, 2);
// 上方同样利用arguments获取参数，但因test7(1, 2)未执行return中的函数，所以无输出。若执行test7(1, 2)(3, 4)则会输出[3, 4]。

var args = [1, 2];
function test9() {
    console.log(Array.prototype.slice.call(arguments)); // [1, 2, 3, 4]
}
Array.prototype.push.call(args, 3, 4);
test9(...args);
// 上方利用Array.prototype.push.call()方法向args数组中插入了3和4，并利用ES6延展操作符(...)将数组展开并传入test9，所以console为[1, 2, 3, 4]。

闭包问题

var elem = document.getElementsByTagName('div'); // 如果页面上有5个div
for(var i = 0; i < elem.length; i++) {
    elem[i].onclick = function () {
        alert(i); // 总是5
    };
}

var elem = document.getElementsByTagName('div'); // 如果页面上有5个div
for(var i = 0; i < elem.length; i++) {
    (function (w) {
        elem[w].onclick = function () {
            alert(w); // 依次为0,1,2,3,4
        };
    })(i);
}
// 在绑定点击事件外部封装一个立即执行函数，并将i传入该函数即可。
// 另外一种方法 var 换成 let

对象拷贝与赋值

var obj = {
    name: 'xiaoming',
    age: 23
};
var newObj = obj;
newObj.name = 'xiaohua';
console.log(obj.name); // 'xiaohua'
console.log(newObj.name); // 'xiaohua'

var obj2 = {
    name: 'xiaoming',
    age: 23
};
var newObj2 = Object.assign({}, obj2, {color: 'blue'});
newObj2.name = 'xiaohua';
console.log(obj2.name); // 'xiaoming'
console.log(newObj2.name); // 'xiaohua'
console.log(newObj2.color); // 'blue'

var obj3 = {
    name: 'xiaoming',
    age: 23
};
var newObj3 = Object.create(obj3);
newObj3.name = 'xiaohua';
console.log(obj3.name); // 'xiaoming'
console.log(newObj3.name); // 'xiaohua'

参考劳卜文章