JavaScript易错知识点整理


Posted in Javascript onDecember 05, 2016

前言

本文是我学习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);

上方同样利用arguments获取参数,但因test7(1, 2)未执行return中的函数,所以无输出,若执行test7(1, 2)(3, 4)则会输出[3, 4]。

var args = [1, 2];
function test9() {
 console.log(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]。

5.闭包问题

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

上方是一个很常见闭包问题,点击任何div弹出的值总是5,因为当你触发点击事件的时候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传入该函数即可。

6.对象拷贝与赋值

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

上方我们将obj对象赋值给了newObj对象,从而改变newObj的name属性,但是obj对象的name属性也被篡改,这是因为实际上newObj对象获得的只是一个内存地址,而不是真正 的拷贝,所以obj对象被篡改。

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'

上方利用Object.assign()方法进行对象的深拷贝可以避免源对象被篡改的可能。因为Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象,然后返回目标对象。

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

我们也可以使用Object.create()方法进行对象的拷贝,Object.create()方法可以创建一个具有指定原型对象和属性的新对象。

结语

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

以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
Mar 01 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
JS判断页面是否出现滚动条的方法
Jul 17 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
BOM系列第二篇之定时器requestAnimationFrame
Aug 17 Javascript
BootStrapTable服务器分页实例解析
Dec 20 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
JS 对java返回的json格式的数据处理方法
Dec 05 #Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 #Javascript
bootstrap快速制作后台界面
Dec 05 #Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
Dec 04 #Javascript
浅谈js数组和splice的用法
Dec 04 #Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 #Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 #Javascript
You might like
PHP中date()日期函数有关参数整理
2011/07/19 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
javascript知识点收藏
2007/02/22 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
jQuery过滤选择器经典应用
2016/08/18 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
Python实现全角半角转换的方法
2014/08/18 Python
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
教师读书活动心得体会
2016/01/14 职场文书
python异常中else的实例用法
2021/06/15 Python