JavaScript error-prone knowledge point finishing _javascript skills

Objective

This article is my Learning JavaScript process of collection and collation of some error-prone knowledge points, this paper introduces and explains the 6 aspects of variable scope, type comparison, this point, function parameter, closure problem and object copy and assignment, which also involves some ES6 knowledge points.

JavaScript knowledge points

1. Variable Scope

var a = 1;
function test () {
 var a = 2;
 Console.log (a); 2
}
test ();

The top of the function scope declares and assigns a and is above the console, so following the nearest principle output a equals 2.

var a = 1;
function Test2 () {
 console.log (a);//undefined
 var a = 2;
}
Test2 ();

The above function scope declares and assigns a, but is under the console, a variable is promoted, the output is declared but not yet assigned, so the output "undefined".

var a = 1;
function Test3 () {
 console.log (a);//1
 a = 2;
}
Test3 ();

The above function scope A is assigned a value, is not declared, and is under the console, so output a in the global scope.

Let B = 1;
function test4 () {
 console.log (b);//b is isn't defined let
 b = 2;
}
Test4 ();

The above function scope uses the ES6 let to declare the variable B, and let differs from Var, which does not exist the function of the variable elevation, so the output error "B is not defined".

function Test5 () {let
 a = 1;
 {Let
  a = 2;
 }
 Console.log (a); 1
}
test5 ();

The function scope above uses let to declare a 1 and declare a 2 in the block-level scope, because the console is not in the block-level scope of the function, so output is 1.

2. Type comparison

var arr = [],
 arr2 = [1];
Console.log (arr = = = ARR2); False

Two different array comparisons above, the console is false.

var arr = [],
 arr2 = [];
Console.log (arr = = = ARR2); False

The top two identical array comparisons, because the array is more than false to the array, so the console is false.

var arr = [],
 arr2 = {};
Console.log (typeof (arr) = = typeof (ARR2)); True

Use typeof to compare arrays and objects, because the console is true because typeof gets null, the array, and the type of the object is object.

var arr = [];
Console.log (arr instanceof Object); True
console.log (arr instanceof Array);//True

Above, use 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 all 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 above object method points to the object itself, so the output "xiaoming".

var obj = {
 myname: ' xiaoming ',
 getname:function () {return
  this.myname
 }
};
var namefn = obj.getname;
Console.log (Namefn ()); Undefined

To assign a variable to a method in the object, the this in the method will no longer point to the Obj object to point 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, but by using the Apply method the This is pointed to the Obj2 object, so the console is ' Xiaohua '.

4. Function parameters

function Test6 () {
 console.log (arguments);//[1, 2]
}
test6 (1, 2);

The arguments object in the function is used to get the parameter array of the Passed-in function, so the output array [1, 2].

function Test7 () {return
 function () {
  console.log (arguments);//not executed to this, no output
 }
}
test7 (1, 2);

The above also takes advantage of arguments to get the parameters, but because Test7 (1, 2) does not perform the function in return, there is no output, and the execution of TEST7 (1, 2) (3, 4) outputs [3, 4].

var args = [1, 2];
function Test9 () {
 console.log (arguments);//[1, 2, 3, 4]
}
Array.prototype.push.call (args, 3, 4);
Test9 (... args);

Above, the Array.prototype.push.call () method is used to insert 3 and 4 into the args array, and the ES6 extension operator (...) is used. Expands the array and passes in the TEST9, so the console is [1, 2, 3, 4].

5. Closure problem

var elem = document.getelementsbytagname (' div '); If there are 5 div for on the page
(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 pop-up value is always 5, because when you trigger the Click event when I value is already 5, you can use the following way to solve:

var elem = document.getelementsbytagname (' div '); If there are 5 div for on the page
(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 of a binding-point-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 to change the Name property of the newobj, but the name property of the Obj object is tampered with, because actually the Newobj object gets a memory address instead of a real copy, so the Obj object is tampered with.

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 can prevent the source object from being tampered with. Because the Object.assign () method can copy the enumerable properties of any number of source objects themselves to the target object, and then return to 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 objects and properties.

Conclusion

Learning JavaScript is a long process and cannot be accomplished overnight. I hope this article introduces a few of the content can help learn JavaScript students more in-depth understanding and mastery of JavaScript grammar, less detours.

The above is the entire content of this article, I hope to help you, but also hope that a lot of support cloud Habitat community!