JavaScript usage detailed __javascript usage detailed

Brief Introduction

JavaScript Secret Garden is a constantly updated document that focuses on some of the quirky uses of JavaScript. Beginners can learn more about the language features of JavaScript by giving advice on how to avoid common bugs, difficult problems to discover, and performance problems and bad practices.

JavaScript Secret Garden is not used to teach you JavaScript. To better understand the content of this article, you need to learn the basics of JavaScript in advance. There are a series of great JavaScript Learning wizards in the Mozilla Developer Network.

Translator Note: The ES5 mentioned in the article is abbreviated to ECMAScript 5, is the next version of the ECMAScript standard language, is under development. JavaScript is a dialect of this standard language.
Object object usage and properties

All variables in JavaScript are objects except for two exceptions null and undefined.

False.tostring ()//' false '
[1,2,3].tostring ();//' 1,2,3 '

Functionfoo () {}
Foo.bar = 1;
foo.bar;//1

A common misconception is that the literal value of a number (literal) is not an object. This is because of an error in the JavaScript parser, which attempts to resolve the point operator as part of the floating-point number face value.

2.toString ();//Error: SyntaxError

There are many workarounds to make the literal value of a number look like an object.

2..toString ();//The second point can be resolved normally
2.toString ()//Note the space before the dot number
(2). toString ();//2 is calculated first

object as a data type

JavaScript objects can be used as hash tables, primarily to hold the corresponding relationship between named keys and values.

Use the literal syntax of an object-{}-to create a simple object. This newly created object inherits from Object.prototype and does not have any custom attributes.

var foo ={};//an empty object

A new object that has a custom attribute ' test ' with a value of 12

Access Properties

There are two ways to access the properties of an object, the dot operator, or the bracket operator.

var foo ={name: ' Kitten '}
foo.name;//Kitten
foo[' name '];//kitten

varget= ' name ';
foo[get];//Kitten

foo.1234;//SyntaxError
foo[' 1234 '];//works

The two syntaxes are equivalent, but the bracket operator is still valid in the following two cases-dynamic setting Property-property name is not a valid variable name (translator Note: For example, the attribute name contains a space, or the property name is JS keyword)

Translator Note: In the JSLint grammar Detection Tool, the point operator is the recommended practice. Delete attribute

The only way to delete a property is by using the delete operator, setting the property to undefined or null and not actually deleting the attribute, but simply removing the association of the property and the value.

var obj ={
Bar:1,
Foo:2,
Baz:3
};
Obj.bar =undefined;
Obj.foo =null;
Delete Obj.baz;

for (var i in obj) {
if (Obj.hasownproperty (i)) {
Console.log (i, ' + obj[i]);
}
}

The output above has bar undefined and foo null-only Baz is actually deleted, so it disappears from the output. syntax for property names

var test ={
' Case ': ' I am a keyword so I must to be notated as a string ',
Delete: ' I am a keyword too so me '//error: SyntaxError
};

The property name of an object can be declared using a string or a normal character. However, due to another error design of the JavaScript parser, the second declaration method above throws a syntaxerror error before ECMAScript 5.

The reason for this error is that delete is a key word in the JavaScript language; Therefore, in order to function properly under a lower version of the JavaScript engine, the string literal declaration method must be used. prototypes

JavaScript does not contain the traditional class inheritance model, but rather uses the Prototypal prototype model.

Although this is often referred to as the shortcoming of JavaScript, a prototype based inheritance model is more powerful than traditional class inheritance. It is easy to implement the traditional class inheritance model, but it is much more difficult to implement prototype inheritance in JavaScript. (It is for example fairly trivial to build a classic model "top of it" while the other way around was a far more difficul T task.)

Since JavaScript is the only widely used language based on prototype inheritance, it takes time to understand the differences between the two inheritance patterns.

The first difference is that JavaScript uses the inheritance of the prototype chain.

Note: simple use of Bar.prototype = Foo.prototype will result in two objects sharing the same prototype. Therefore, changing the prototype of any object will affect the prototype of another object, which in most cases is not the result of hope.

 Functionfoo () {
     this.value =42; 
} 
 Foo.prototype ={
     method:function () {} 
}; 
 
 Functionbar () {} 
 
//Setting Bar's prototype property to the instance object of Foo 
 Bar.prototype =newfoo (); 
 Bar.prototype.foo = ' Hello world '; 
 
//fix Bar.prototype.constructor for Bar itself 
 Bar.prototype.constructor =bar 
 
 var test =newbar ()//Create a new instance of Bar 
 
//prototype chain 
 Test [instance of bar] 
     Bar.prototype [instance of Foo] 
   & nbsp     {foo: ' Hello World '} 
         Foo.prototype 
           &NBS P {method: ...}; 
             Object.prototype 
                 {tostring:.../* etc. */}; 
 

In the example above, the test object inherits from Bar.prototype and Foo.prototype, so it can access the prototype method methods of Foo. It also has access to the Foo instance property value that is defined on the prototype. Note that new bar () will not create a new instance of Foo, but rather reuse that instance on its prototype, so all Bar instances share the same Value property.

Note: do not use Bar.prototype = foo, because this does not execute Foo's prototype, but points to function foo. So the prototype chain will go back to Function.prototype rather than foo.prototype, so that method will not be on the prototype chain of Bar. Property Lookup

When you look up an object's properties, JavaScript traverses the prototype chain up until it finds a property of the given name.

To the top of the prototype chain-that is, Object.prototype-but the specified attribute is still not found, and the undefined is returned.