JavaScript易错知识点整理

Posted qianboy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript易错知识点整理相关的知识,希望对你有一定的参考价值。

1.变量作用域

var a = 1;
function test() {
    var a = 2;

    console.log(a); // 2
}

test();

上方的函数作用域中声明并赋值了a,且在console之上,所以遵循就近原则输出a等于2。

var a = 1;
function test2() {
    console.log(a); // undefined

    var a = 2;
}

test2();

上方的函数作用域中虽然声明并赋值了a,但位于console之下,a变量被提升,输出时已声明但尚未被赋值,所以输出“undefined”。

var a = 1;
function test3() {
    console.log(a); // 1

    a = 2;
}

test3();

上方的函数作用域中a被重新赋值,未被重新声明,且位于console之下,所以输出全局作用域中的a。

变量提升这个概念,只适用于声明变量的语句,而变量赋值的语句并不能被提前(如果执行语句可以随意调换顺序,其破坏性可想而知)

我们习惯将‘var a = 3’看做一条声明。其实这里两条语句的简写,‘var a’和‘a = 3’,并且其实这两条语句是两个不同类型的语句,是由两个不同的组件完成的。前一句是在编译阶段执行,后一句是在运行阶段执行

所以,不管’var a’写在哪里,都会在代码本身被执行之前处理。这一过程很像是代码的一个移动过程,所以被大家称为“变量提升”。

2.类型比较

var arr = [],
    arr2 = [1];

console.log(arr === arr2); // false

上方两个不同的数组比较,console为false。

var arr = [],
    arr2 = [];

console.log(arr === arr2); // false

上方两个相同的数组比较,console为false。

原因:

因为两个单独的数组永不相等

var arr = [],
    arr2 = {};

console.log(typeof(arr) === typeof(arr2)); // true

上方利用typeof比较数组和对象,因为typeof获取NULL、数组、对象的类型都为object,所以console为true

var arr = [];

console.log(arr instanceof Object); // true
console.log(arr instanceof Array); // true

上方利用instanceof判断一个变量是否属于某个对象的实例,因为在javascript中数组也是对象的一种,所以两个console都为true。

3.this指向

移步本人博客

http://www.cnblogs.com/QianBoy/p/7599202.html

4.闭包问题

var elem = document.getElementsByTagName(‘div‘); // 如果页面上有5个div

for(var i = 0; i < elem.length; i++) {
    elem[i].onclick = function () {
        alert(i); // 总是5
    };
}

上方是一个很常见闭包问题,点击任何div弹出的值总是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);
}

结语

学习JavaScript是一个漫长的过程,不能一蹴而就。希望本文介绍的几点内容能够帮助学习JavaScript的同学更加深入的了解和掌握JavaScript的语法,少走弯路。

以上是关于JavaScript易错知识点整理的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript易错知识点整理

JavaScript 易错知识点整理

JavaScript易错知识点整理

JavaScript易错知识点整理

JavaScript易错知识点整理

JavaScript易错知识点整理