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 相关文章推荐
关于COOKIE个数与大小的问题
Jan 17 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 Javascript
jquery中的$(document).ready()使用小结
Feb 14 Javascript
js创建表单元素并使用submit进行提交
Aug 14 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
Javascript原型链的原理详解
Jan 05 Javascript
原生js实现省市区三级联动代码分享
Feb 12 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
微信小程序用户盒子、宫格列表的实现
Jul 01 Javascript
js+canvas绘制图形验证码
Sep 21 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单例模式与工厂模式详解
2017/08/29 PHP
PHP使用递归按层级查找数据的方法
2019/11/10 PHP
js 深拷贝函数
2008/12/04 Javascript
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
javascript函数中的arguments参数
2010/08/01 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
raphael.js绘制中国地图 地图绘制方法
2014/02/12 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
js+html制作简单验证码
2017/02/16 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
vue实现百度搜索功能
2020/12/28 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
python3爬取各类天气信息
2018/02/24 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
大型营销活动计划书
2014/04/28 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
2014年工会工作总结
2014/11/12 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
python多线程方法详解
2022/01/18 Python
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android