媒介
本文是我进修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的语法，少走弯路。
本文为劳卜原创文章，迎接关注我的微信民众号：前端呼啦圈（Love-FED），来这里聊点关于前端的事变。
转载请说明来自——微信民众号：前端呼啦圈（Love-FED）
