JavaScript易错知识点整理

本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一些ES6的知识点。

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。

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

上方函数作用域中使用了ES6的let重新声明了变量b,而let不同于var其不存在变量提升的功能,所以输出报错“b is not defined”。

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

上方的函数作用域中用let声明了a为1,并在块级作用域中声明了a为2,因为console并不在函数内的块级作用域中,所以输出1。

2.类型比较 var arr = [], arr2 = [1]; console.log(arr === arr2); // false

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

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

上方两个相同的数组比较,因为数组与数组比较恒为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指向 var obj = { name: 'xiaoming', getName: function () { return this.name } }; console.log(obj.getName()); // 'xiaoming'

上方对象方法中的this指向对象本身,所以输出”xiaoming”。

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

上方将对象中的方法赋值给了一个变量,此时方法中的this也将不再指向obj对象,从而指向window对象,所以console为”undefined”。

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

上方同样将obj对象中的方法赋值给了变量nameFn,但是通过apply方法将this指向了obj2对象,所以最终console为’xiaohua’。

4.函数参数 function test6() { console.log(arguments); // [1, 2] } test6(1, 2);

上方利用函数中的arguments对象获取传入函数的参数数组,所以输出数组[1, 2]。

function test7 () { return function () { console.log(arguments); // 未执行到此,无输出 } } test7(1, 2);

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/2235806b4b0b4f19746d1f01af4806a4.html