JavaScript error-prone knowledge point collation

This article is my Learning JavaScript process in the collection and collation of some of the error-prone knowledge points, will be from the scope of variables, type comparison, this point, function parameters, closure problems and object copy and assignment of these 6 aspects of the introduction and interpretation of the easy-to-digest, which also involved some ES6 knowledge points.

JavaScript knowledge points

1. Variable Scope

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

Console.log (a); 2
}

Test ();
The above function scope declares and assigns a, and above the console, so follows the nearest principle output a equals 2.

var a = 1;
function Test2 () {
Console.log (a); Undefined

var a = 2;
}

Test2 ();
Although a is declared and assigned in the function scope above, but under the console, a variable is promoted, the output is declared but not yet assigned, so the output is undefined.

var a = 1;
function Test3 () {
Console.log (a); 1

A = 2;
}

Test3 ();
A in the upper function scope is re-assigned, is not re-declared, and is under the console, so output a in global scope.

Let B = 1;
function Test4 () {
Console.log (b); b is not defined

Let B = 2;
}

Test4 ();
The above function scope uses ES6 's let to re-declare the variable B, and let differs from Var, which does not have the function of variable promotion, so the output error B is not defined.

function Test5 () {
let A = 1;

{
Let A = 2;
}

Console.log (a); 1
}

Test5 ();
In the function scope above, A is declared with a to 1, and a is declared in the block-level scope as 2, because the console is not in the block-level scope within the function, so output 1.

2. Type comparison

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

Console.log (arr = = = ARR2); False
Above two different array comparisons, console is false.

var arr = [],
ARR2 = [];

Console.log (arr = = = ARR2); False
Above two identical array comparisons, because two separate arrays are never equal, so console is false.

var arr = [],
ARR2 = {};

Console.log (typeof (arr) = = = typeof (ARR2)); True
The above uses typeof to compare arrays and objects, because typeof gets null, arrays, and object types are object, so console is true.

var arr = [];

Console.log (arr instanceof Object); True
Console.log (arr instanceof Array); True
Above uses instanceof to determine whether a variable belongs to an instance of an object, because the array is also one of the objects in JavaScript, so two console is true.

3.this Pointing

var obj = {
Name: ' Xiaoming ',
Getname:function () {
Return this.name
}
};

Console.log (Obj.getname ()); ' Xiaoming '
The this in the upper object method points to the object itself, so the output is xiaoming.

var obj = {
MyName: ' Xiaoming ',
Getname:function () {
Return This.myname
}
};

var namefn = Obj.getname;

Console.log (Namefn ()); Undefined
The method in the object is assigned to a variable above, and the this in the method will no longer point to the Obj object, thus pointing to the Window object, so the console is undefined.

var obj = {
MyName: ' Xiaoming ',
Getname:function () {
Return This.myname
}
};

var obj2 = {
MyName: ' Xiaohua '
};

var namefn = Obj.getname;

Console.log (Namefn.apply (OBJ2)); ' Xiaohua '
The above also assigns the method in the Obj object to the variable namefn, searching for the spring net but using the Apply method to point this to the Obj2 object, so the final console is Xiaohua.

4. Function parameters

function Test6 () {
Console.log (Array.prototype.slice.call (arguments)); [1, 2]
}

Test6 (1, 2);
The output array [1, 2] is obtained by using the arguments class array object in the function to get the array of arguments passed into the function.

function Test7 () {
return function () {
Console.log (Array.prototype.slice.call (arguments)); Not implemented to this, no output
}
}

TEST7 (1, 2);
The above also uses arguments to get the parameters, but because Test7 (1, 2) does not execute the function in return, there is no output. The execution of TEST7 (1, 2) (3, 4) will output [3, 4].

var args = [1, 2];

function Test9 () {
Console.log (Array.prototype.slice.call (arguments)); [1, 2, 3, 4]
}

Array.prototype.push.call (args, 3, 4);

Test9 (... args);
The above uses Array.prototype.push.call () to find the spring mesh www.jsgren.com method to insert 3 and 4 into the args array, and use the ES6 extension operator (...). Expands the array and passes in the TEST9, so the console is [1, 2, 3, 4].

5. Closure issues

var elem = document.getelementsbytagname (' div '); If there are 5 div on the page

for (var i = 0; i < elem.length; i++) {
Elem[i].onclick = function () {
alert (i); Always 5
};
}
Above is a very common closure problem, click on any div popup value is always 5, because when you trigger the Click event when the value of I is already 5, can be resolved in the following way:

var elem = document.getelementsbytagname (' div '); If there are 5 div on the page

for (var i = 0; i < elem.length; i++) {
(function (W) {
Elem[w].onclick = function () {
Alert (w); 0,1,2,3,4 in turn
};
}) (i);
}
Encapsulates an immediate execution function outside the binding point-and-click event and passes I to the function.

6. Object Copy and Assignment

var obj = {
Name: ' Xiaoming ',
Age:23
};

var newObj = obj;

Newobj.name = ' Xiaohua ';

Console.log (Obj.name); ' Xiaohua '
Console.log (Newobj.name); ' Xiaohua '
Above we assign the Obj object to the Newobj object, which alters the name property of the newobj, but the name property of the Obj object is also tampered with because the Obj object is actually tampered with because the Newobj object obtains only one memory address instead of a real copy.

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 '
A deep copy of the object using the Object.assign () method above avoids the possibility that the source object could be tampered with. Because the Object.assign () method can copy an enumerable property of any number of source objects to the target object, and then return the target object.

var obj3 = {
Name: ' Xiaoming ',
Age:23
};

var newObj3 = object.create (OBJ3);

Newobj3.name = ' Xiaohua ';

Console.log (Obj3.name); ' Xiaoming '
Console.log (Newobj3.name); ' Xiaohua '
We can also use the Object.create () method to copy objects, and the Object.create () method can create a new object with the specified prototype object and properties.

Conclusion

Learning JavaScript is a lengthy process and cannot be accomplished overnight. I hope this article will introduce some of the content can help students learn JavaScript more in-depth understanding and mastering JavaScript grammar, less detours.

JavaScript error-prone knowledge point collation