Javascript learning book recommended_javascript skills

Written by Aaron Gustafson, translated by Li Songfeng, Li Yawen and others. I feel it is definitely a book worth reading. Interested friends can take a look. The following is a collection of common JavaScript pitfalls and object concepts that I extracted from them. Hope it can be of some help to everyone.

Ø Common traps in Javascript syntax

² Case sensitivity

² There is actually no special difference between single quotes and double quotes. I only really knew this after reading this book. Although I had written the string form of '' when writing programs before, I never realized beforehand that "Oh, it turns out that this is also possible."

In addition, in most cases, '' is used to represent strings, because the XHTML specification requires that all XHTML attribute values ​​​​are enclosed in "". This will provide clarity when mixing code.

² Line break, don’t ignore this. Because if you use a carriage return to do a line break in a string, I'm sorry, the browser will tell you that I don't recognize your string. Because it will automatically convert the carriage return into ";" But in order to solve this problem, fortunately it provides an escape character as a replacement. As shown below:

var='

A list

1. 
   
   

'

Some people will say that you can use a plus sign, I know this. Use the plus sign as a string operator. It is estimated that the bottom layer has reloaded the number (?!).

² Optional semicolons and braces

If you don’t believe me, let me tell you it’s okay. It can be said that this JavaScript is quite smart. But like the author of the aforementioned book, I think it’s better for us as programmers to be more disciplined.

² Overloading

Sometimes you may have a whim and make a JavaScript overloaded function, and you will find that only the last one can run at this time, and the previous ones have not been accepted. Chance. What is the reason for this?

It turns out that the previous so-and-so has been replaced by the later one. This is commonly referred to as coverage. A further step is that the program only references the last function with the same name in the scope chain.

² Anonymous function

I have to say that this guy is very useful.

² Scope resolution and closure

I believe everyone is familiar with this scope, because every programming language has such a concept.

The scope chain is used to describe a path along which the value of a variable (or the method to be used when a function is called) can be determined.

A closure is A concept related to scope, which refers to the fact that an inner function can still access the properties of its outer function even after the outer function has completed execution and terminated. When a variable or method is referenced, JavaScript will parse along the scope chain formed by the execution path of the object, looking for the most recently defined value of the variable. Once found, that value is used.

² Iterable object

Don’t doubt that if this is not used well, errors may occur. If you don’t believe it, just look at this example:

var all=document.getElementsByTagName('*');

for(i in all){

//For all[i ] element to operate.

}

Since the values ​​returned will be equal to length, item and namedItem respectively, this may cause unexpected errors in the code.

Something needs to be done at this time. Use hasOwnProperty for property filtering. This function returns true when the object's properties or methods are non-inherited. The method is as follows:

var all=document.getElementsByTagName('*');

for(i in all){

if(!all.hasOwnProperty(i)) {continue;}

//Operation on all[i] elements.

}

² Function calls and references.

Note, this is different, the call will be executed, and the reference will only give a copy to the variable (it seems like this can be understood, right?)

Look at this:

var foo=exampleFunction();

var foo=exampleFunction;

The two sentence patterns are different. The former one executes the function exampleFunction and assigns the return value to the variable foo, while the latter one assigns the reference of the function exampleFunction to foo.

Ø Javascript object

I believe everyone knows the concepts of properties and methods. Let's talk about the objects in JavaScript and their mysterious meanings (it's like martial arts).

1. Inheritance

The inheritance of Javascript makes me feel strange, but after thinking about it, it still makes sense. And it’s still the same idea as the others. In fact, javascript just performs a copy operation. Without further ado, let’s look at an example and I believe everyone will understand.

//Create an instance of person object

var person={};

person.getName=function(){……};

person.getAge=function(){……};

//Create an instance of employee object

var employee={};

employee.getTitle=function( ){……};

enployee.getSalary=function(){……};
//Inherit the method from the person object

employee.getName=person.getName;

employ.getAge=person.getAge;

2. Create your own object

There are two ways to create your own object:

The first way :var myObject =new Object();

The second type: var myObject={};//is the abbreviation of the first type. In fact, it has been used above.

3. Create a constructor

First type: function myConstructor(a){

//Code

}

No Surprised, imagine that there are objects everywhere in the javascript mentioned above, although it is a bit exaggerated. This function is an object at a time.

The second type:

Perhaps smart readers have already guessed that they are the other two types of function definitions:

var myConstructor=function(a){};

Let’s also write the third one together: var myConstructor=new Function('a',/*some code*/);

But for this method, it will cause performance problem, so it is more appropriate to use function.

Finally, give me an example from the book:

function myConstructor(message){

alert(message);

this.myMessage=message;

}

var myObject =new myConstructor('Instantiating myObject!');

4. Add static method

var myObject={};

//Add attribute

myObject.name=”Jeff”;

//Add method

myObject.alertName=function(){

alert(this.name);

}

//Execution method

myObject.alertName();

I believe everyone can understand it , no more.

5. Want to add public methods to the prototype

The way to add public methods is to use prototype. Note that the prototype here is not the js library.

//Create constructor

function myConstructor(message){

alert(message);

this.myMessage=message;

}

//Add a public method

myConstructor.prototype.clearMessage=function(string){

this.myMessage ='' string;

}

One thing to mention here is that all variables starting with var in the constructor are all private variables. Those that are not added with . and prototype but written directly into the constructor are private functions.

6. Finally, let me mention object literals

Object literals are very helpful for code reconstruction and redundancy reduction. So if possible it is best to use this

. Look at the following example:

var myObject={

propertyA:'value',

propertyB :'value',

methodA:function(){}

}

I have to agree with the author, this method is very elegant.

How about it? Do you have some basic understanding of objects and traps in Javascript? Hope this article is helpful to you.