Shulou(Shulou.com)06/02 Report--

What are the common JavaScript error-prone knowledge points? in view of this problem, this article introduces the corresponding analysis and solutions in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

Preface

I will introduce and explain some error-prone knowledge points collected and sorted out in the process of learning JavaScript from six aspects: variable scope, type comparison, this pointing, function parameters, closure problem and object copy and assignment, including some knowledge points of ES6.

JavaScript knowledge points

1. Variable scope

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

The function scope above declares and assigns a, and is above console, so the output an is equal to 2 according to the nearest principle.

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

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

Var a = 1; function test3 () {console.log (a); / / 1 a = 2;} test3 ()

The an in the function scope above is reassigned, not redeclared, and is under console, so output an in the global scope.

Let b = 1; function test4 () {console.log (b); / / b is not defined let b = 2;} test4 ()

The function scope above uses the let of ES6 to redeclare the variable b, while let does not have the function of variable promotion, which is different from var, 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 declares an as 1 with let and an as 2 in the block-level scope, because console is not in the block-level scope within the function, so output 1.

two。 Type comparison

Var arr = [], arr2 = [1]; console.log (arr = arr2); / / false

Comparing the two different arrays above, console is false.

Var arr = [], arr2 = []; console.log (arr = arr2); / / false

Compare the two same arrays above, because two separate arrays are never equal, so console is false.

Var arr = [], arr2 = {}; console.log (typeof (arr) = typeof (arr2)); / / true

Above, use typeof to compare arrays and objects, because typeof gets NULL, array, and object are all of type object, so console is true.

Var arr = []; console.log (arr instanceof Object); / / true console.log (arr instanceof Array); / / true

The above uses instanceof to determine whether a variable belongs to an instance of an object, because an array is also a kind of object in JavaScript, so both console are true.

3.this points to

Var obj = {name: 'xiaoming', getName: function () {return this.name}}; console.log (obj.getName ()); / /' xiaoming'

The this in the object method above points to the object itself, so output "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, but points the this to the obj2 object through the apply method, so the final console is' xiaohua'.

4. Function parameter

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

The above uses the arguments object in the function to get the parameter array of the incoming function, so the output array [1, 2].

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

The above also uses arguments to get parameters, but because test7 (1,2) does not execute the function in return, there is no output. If test7 (1,2) (3,4) is executed, it will output [3,4].

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

The above inserts 3 and 4 into the args array using the Array.prototype.push.call () method, and uses the ES6 extension operator (…). Expand the array and pass in 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; iTunes +) {elem.onclick = function () {eleme (I); / / always 5};}

At the top is a very common closure problem. Clicking on any div pop-up value is always 5, because when you trigger the click event, the value of I is already 5, which can be solved in the following ways:

Var elem = document.getElementsByTagName ('div'); / / if there are 5 div for on the page (var I = 0; I < elem.length; itemized +) {(function (w) {elem.onclick = function () {alert (w); / / in order of 0Magol 1, 2, 3, 4};}) (I);}

Encapsulate an immediate execution function outside the binding click event and pass I into 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, thus changing the name property of the newObj, but the name property of the obj object is also tampered with, because the newObj object actually gets a memory address, not an actual 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'

Using the Object.assign () method to make a deep copy of the object above can avoid the possibility of the source object being tampered with. Because the Object.assign () method can copy the enumerable properties 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 the object, and the Object.create () method can create a new object with the specified prototype object and properties.

On the common JavaScript fallible knowledge points refers to which questions to share the answers here, I hope the above content can be of some help to you, if you still have a lot of doubts to be solved, you can follow the industry information channel to learn more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.