JavaScript error-prone knowledge point collation

Source: Internet
Author: User
Tags closure shallow copy variable scope

Objective

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 point 1. Variable scope
var a = 1; function Test () {    var a = 2;     // 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 () {    //  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 () {    //  1    = 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 () {    //  b    is not defined = 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 () {    = 1;    {        = 2;    }     // 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 = [],    = [1//  false

Above two different array comparisons, console is false.

var arr = [],    =//  false

Above two identical array comparisons, because two separate arrays are never equal, so console is false.

var arr = [],    = {};console.log (typeoftypeof//  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 =instanceof//  trueinstanceof// 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 = {    ' xiaoming ',    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 = {     ' xiaoming ',     function  () {         return  This. MyName     var 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 = {     ' xiaoming ',    function  () {         return  this. MyName    var obj2 = {     ' Xiaohua 'var namefn =//  ' Xiaohua '

The above also assigns the method in the Obj object to the variable namefn, but it points to the Obj2 object through the Apply method, so the final console is Xiaohua.

4. Function parameters
function Test6 () {    //  [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 () {    returnfunction  () {        //  not executed 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, 2function  test9 () {     //  [1, 2, 3, 4]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 issues
var //  for (var i = 0; i < elem.length; i++) {    function  () {          c10>//    };}

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 //  for (var i = 0; i < elem.length; i++) {     (function  (w) {          function  () {            //        };     }) (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 = {     ' xiaoming ',     var newObj == ' Xiaohua '  ////  ' 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 = {     ' xiaoming ',    var newObj2 = Object.assign ({}, Obj2, {color: ' blue '= ' Xiaohua '/ ///

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. But Object.assign () is only a one-level attribute copy, more than a shallow copy of the deep copy of a layer, when used, but also pay attention to this problem.

var =     {' xiaoming ',    obj3  };   var newObj3 = object.create (obj3);   = ' Xiaohua ';   //  //  ' 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.

Reference

Reprint Address: HTTP://WWW.JIANSHU.COM/P/1C77853D4F01

JavaScript error-prone knowledge point collation

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.