JavaScript Advanced Note __web

Note: Reference sources with no title but pages are referred to as the sixth edition of the JavaScript Authority guide, and other references have title or URL annotations.
One, easy to produce misunderstanding knowledge point record
1, [] = =! []
All objects are converted to True (P52), and the array is an object, so an empty array [] converts to a Boolean value to be true. An empty array is 0 when converted to a number. Therefore, the left digit ([]) = 0.
“!” Operator first converts the operand to a Boolean value, then the Boolean value is P81, so the right type is! Boolean ([]) =!true=false
for = =, if a value is false, convert it to 0 and compare it (p75)
So the above equation is 0==0 and the result is true

2, translation error: Sixth edition P75 (found that many people's books have this problem, should not be a book problem, if not please ignore)

The strict equality operator "= = =" First evaluates the value of its operand, then compares the two values, and the comparison process does not have any type conversions:
• If two value types are not the same, they are not equal.
• If all two values are null or are undefined, they are not equal.

After testing, two null and two undefined were found to be congruent. The original text reads as follows:

The strict equality operator = = evaluates its operands, and then compares the two
Values as follows, performing no type conversion:
· If the two values have different types, they are not equal.

· If Both values are null or both values are undefined, they are.

· If Both values are the Boolean value TRUE or both are the Boolean value false, they are.

3. An array index can be either a number or a character

object is the basic data type of JavaScript. object is a composite value. It aggregates many values (raw values or other objects) together. These values can be accessed by name. Objects can also be considered unordered collections of attributes, each of which has a name/value. Property names are strings, so we can think of objects as mappings from string to value. (P118). An array is the number of pages in an object. Using square brackets to access an array element is like using square brackets to access an object's properties. JavaScript converts the specified numeric index value to a string--index value 1 becomes "1" (P146)

4, javascript:void (0) effective principle
Void is a first-level operator, which appears before the operand, and the operand can be of any type. The operands are calculated as usual, but the computed results are ignored and returned to undefined (P89)
Since void ignores the results and returns to undefined, why not write undefined directly? The answer is simple, undefined is not a reserved word (reserved word), it's just a property of a global object that can be overridden in a lower version of IE. Even if it is not in IE, it can be overridden in a local scope.

Following the URL with a javascript: protocol qualifier is another way of embedding JavaScript code into the client. This particular protocol type specifies that the URL content is arbitrary, and that this string is JavaScript code that is run by the JavaScript interpreter and is treated as a single line of code, which means that the statements must be separated by semicolons, and the annotation//must be replaced with/* *. The ' resource ' that Javascript:url can recognize is the return value converted to string execution code . If the code returns to undefined, then the resource is not content. Javascript:url can be used anywhere you can use a regular URL (P318)

5. If the Data property is not configurable, you cannot change his writable from false to true, but can be modified from true to False

6. Note that once the object is converted to an extension, it can no longer be converted back to the extensible.
The objects that have been closed cannot be solved. (P140)

7, to determine whether the object is an array, and why the instanceof operator can not be considered as a reliable method of array detection reasons.
①, Object.prototype.toString.call (someval). Slice (8,-1) Determine object type
The class property of an object is a string that represents the type information of the object.

[Object class]

So to get the object's class, you can call the object's ToString () method, and then extract the string from the 8th to the penultimate position of the string that has been returned. But the tricky thing is that many object-inherited ToString () methods override the Function.call () method that must be called indirectly in order to invoke the correct ToString () version. (P139)

② in ECMAScript5, you can use the Array.isarray () function to detect whether an array (P160)

The problem with ③ using instanceof is that there may be multiple windows or forms in the Web browser. Each window has its own JavaScript environment, with its own global object. Also, each global object has its own set of constructors. Therefore, an object in a form will not be an instance of a constructor in another form. Confusion compensation occurs between forms, but this problem is sufficient to demonstrate that the instanceof operator is not considered a reliable method of array detection. (P161)

8, the syntax of the array direct quantity allows the optional end of the comma, so [,,] only two elements rather than three

9, function recursion
If a function definition expression contains a name, the local scope of the function will contain a name bound to the function object, in effect, the name of the function will become a local variable within the function. Typically, a function defined in an expression does not require a name, which makes the code that defines them more compact. (P167)

If the function declaration does not contain a name, it uses the callee property of the Parameter object to invoke itself. In a non strict mode, the ECMAScript Standard specification stipulates that the callee attribute refers to the function currently executing.

10. The value of the invocation context (this) is the global object, according to the ECMASCRIPT3 and ECMASCRIPT5 rules for function invocation. In strict mode, however, the invocation context is undefied. Functions called as functions do not normally use the This keyword. However, this keyword can be used to determine the current strict mode. (P169)
An important difference between a method call and a function call: the invocation context. A property access expression consists of two parts: an object and a property name. In a function expression like this (O.M), object o becomes the function invocation context. The function body can invoke the object using the keyword this. (P170)

11. Method Chain : When the return value of the method is an object, the object can also invoke its method. This method calls the sequence (usually called "Chain" or ' cascade '). Each invocation result is part of another expression. When the method does not need to return a value, it is best to return this directly, if this is the way in the design API (each method returns this), the API can be used for ' chained call ' style programming, in which you specify only the object you want to invoke at once. The rest of the methods can be invoked based on this. (P171)

12, Closure principle
Each time a JavaScript function is invoked, a new object is created to hold the local variable, and the object is added to the scope chain. When the function returns, the object of the bound variable is removed from the scope chain. If no nested function exists and no other reference points to the bound object, it is reclaimed as garbage. If you define a nested function, each nested function corresponds to a scope chain, and the scope chain points to a variable bound object . However, if these nested function objects are saved externally, they will also be garbage collected as the variable bound objects that they point to. But if the function defines a nested function and returns it as a return value or is stored in a property somewhere, then there is an external reference to the nested function. It will not be garbage collected, and the variable bound object it points to will not be garbage collected. (P184)
scope Chain: The scope chain is a list of objects or lists that define the variables that the code ' acts on '. When JavaScript needs to find the value of a variable x (variable resolution), he will start looking from the first object in the chain, and if the object has a property named X, it will use the property directly, if there is no property named X in the first object, JavaScript continues to look for the next object on the chain. If the second object still does not have a property named X, it continues to find the next object, and so on. If no object on the scope chain contains an attribute x, it is long assumed that there is no X on the scope chain of the code, and a reference error exception is eventually burst. (P59)

13. Understanding the Prototype
Any JavaScript function can automatically have a prototype property as a constructor (except for the function returned by Function.bind () in ECMAScript5). The value of this property is an object that contains the only property constructor that cannot be enumerated. The value of the constructor property is a function object. (P205)
Whenever you create a new function, you create a prototype attribute for the function based on a specific set of rules, which points to the prototype object of the function. By default, all prototype objects automatically get a constructor property, which is a pointer to a function that contains a prototype property. Take the previous example and Person.prototype.construtor point to person. With this constructor, we can also add other properties and methods.
After a custom constructor is created, its prototype pair defaults to the constructor property, and the other methods are inherited from object. When the constructor is called to create a new instance, the interior of the instance contains a pointer (internal property) that points to the stereotype object of the constructor. ECMA-262 5th Edition Explorer this pointer is called [[Prototype]]. Although there is no standard way to access [[Prototype] in scripts, Firfox, Safair, and chrome support one attribute on each object _-_proto_ In other cities and counties, this property is completely invisible to the script. However, the really important point to be clear is that the connection exists between the instance and the stereotype object of the constructor, not between the instance and the constructor. (JavaScript Advanced Programming, Third edition P148)

14, ECMASCRIPT3 specification, a regular expression of the direct volume will be executed to it when the conversion to a Regrxp object, the same code represents the regular expression of the direct amount of each operation returns the same object
The ECMASCRIPT5 specification does the opposite, and each operation of the regular expression direct amount represented by the same code returns the new object . (P254)

15, change the const declaration of simple Type data will error, and change the const declaration of conforming data type can be successful.
Const actually guarantees that the value of a variable cannot be changed, but that the memory address that the variable points to must not be altered. For a simple type of data (numeric, String, Boolean), the value is saved to the memory address that the variable points to, and is therefore equivalent to a constant. But for composite types of data (mainly objects and arrays), the variable points to the memory address, save only a pointer, const can only guarantee that the pointer is fixed, as it points to the data structure is not variable, it is completely out of control.
If you really want to freeze objects, you should use the Object.freeze method. (Author of "ECMAScript 6": Nanyi)

Ii. Summary of key points
1, Regular expression
① character class: A character class is formed by putting the direct amount string into square brackets separately. A character class can match any character he contains, so the regular expression/[a,b,c]/matches any of the letters ' a ', ' B ', ' C '. In addition, you can define a negative character class by using a ' ^ ' character, he matches all characters not contained in square brackets, defines a negative character class, takes a ' ^ ' symbol as the first character of the left parenthesis, and the regular expression/[^abc]/matches all characters except ' A ', ' B ', ' C '. (P256)
② repeat: Repeating character syntax for regular expressions

character	Match
{N,m}	Matches the previous item at least n times, but not more than m times
{N,}	Matches n times or more times before
N	Match n times before
?	Match the previous 0 or one time
+	Match the previous one or more times
*	Match the previous 0 or more times

③ selection: Character ' | ' The character that is used to split the selection. For example,/ab|cd|ef/can match ' AB ', ' CD ', ' EF '. Note that the selection is attempted to match the order from left to right.
④ grouping: Parentheses in regular expressions have multiple functions, one of which is to combine individual items into a subexpression so that the items within the cell can be treated as ' |, ', ', ', ', ', ' + ', and so on, as in the case of individual units.
In regular expressions, another function of parentheses is to define the self-contained module in the complete pattern. When a regular expression succeeds in matching the target string, the part that matches the child pattern in the target can be drawn from the destination.
③ references: Another use of parenthesized expressions is to allow the preceding subexpression to be referenced in the back of the same regular expression. This is done by adding one or more digits after the character ' \ '. This number specifies the parenthesized word expression, and \3 refers to the third parenthesized word expression. Note that because a word expression can nest another word expression, its position is the position of the left parenthesis that participates in the count.
④ Specify a match location
⑤ modifier

character	meaning
I	Performing a case-insensitive match
G	Performs a global match in which all matches are found, rather than after the first one is stopped
M	Multiple-line matching pattern, ^ matches the beginning of a line and the beginning of a string, $ matches the end of a line, and the end of a string

2. Events
① Event Classification: device-dependent input events: Some events are directly related to specific input devices, such as the mouse and keyboard. Standalone and device input events: Some input events are not directly related to specific input devices. For example, the Click event indicates activation of the connection, a button or other document element that is typically implemented with a mouse click, but can also implement user interface events through gestures on a keyboard or touch-aware device: User interface events are more advanced events, often appearing on HTML form elements that define the Web application user interface. Includes the text input and focus time to get the keyboard focal point, the change time when the user changes the display value of the form element, and the submit event when the user clicks the ' Submit ' button in the form. State Change events: Some of the time is not a user activity but a network or browser interaction trigger, used to indicate a life cycle or related state changes. The Load event occurs on the Window object when the document is fully loaded, which is probably the most common type of event. Specific API events: HTML5 and the associated specifications define a large number of Web APIs that have their own event types. Drag-and-drop APIs. Timers and error handlers

The

② Registration event handler sets the JavaScript object property to be an event handler: By convention, the name of the event handler property is composed of ' on ' followed by the event name. such as Onclick,onchange,onload,onmouseover, Note that these property names are case-sensitive, all lowercase, that is, the event type is composed of multiple words (for example, Readstatechange) Set HTML tags as event handlers: The document element event handler properties that are used for setting can also be replaced with the corresponding HTML tag properties, If so, the property value should be a JavaScript code string. This code should be the function body of the handler, not the complete function declaration. AddEventListener (): Addeventlisener () accepts three parameters, the first is the event type to register the handler, the event type is a string, but it should not contain the prefix ' on ' for setting the event handler properties. The second parameter is the function that should be called when an event of the specified type occurs. The last argument is a Boolean value, which is usually passed false to this parameter. If you wear Truw, the function registers as a replenishment event handler and calls at different scheduling stages of the event. Attachevent ():
1>, because the IE event model does not support event capture, attachevent () and detachevent () require only two parameters : event type and handler function
The first parameter of the 2>, ie method uses the event handler property name with the ' on ' prefix, not the event type without a prefix.
3>, attachevent () allows the same event handler function to register more than once . When a specific event occurs, the number of calls to the registration function is the same as the number of registrations

3, XMLHttpRequest
The ① browser defines their APIs on the XMLHttpRequest class. Each strength of this class represents a separate request/response pair, and the object's properties and methods allow you to specify request details and extract response data.
② you may be able to reuse an existing xmlhttprequest, but note that this will terminate any requests that were pending through the object. (P487)
③ an HTTP request consists of 4 parts: HTTP request method or ' action ' being requested URL an optional request header collection an optional request body

The HTTP response returned by the ④ server consists of three parts: a number and a text composed of a state code a response header set response body
⑤ Order: Each part of the HTTP request has a specified order, the request method and the URL arrive first, then the request header, and finally the request body.
⑥ Get a response
The Staus and Staustext properties return an HTTP status code as a number and as text. These properties hold standard HTTP values. Use getResponseHeader () and Getallresponseheader () to query the response headers. The corresponding subject can obtain the text form from the ResponseText attribute, and obtain the document form from the Responsexml attribute.
⑦ to be notified of the readiness of the response, J listens for the ReadyStateChange event on the XMLHttpRequest object. To understand this event type, you must understand the readystate attribute. The ReadyState property is an integer that specifies the state of the HTTP 0:open () that has not been invoked 1:open () has been invoked 2: Receive header 3: receive the corresponding Principal 4: Response complete

4. Web Storage: The difference between Localstorage and Sessionstorage is that storage has a different validity period and scope. ①localstorage stored data is permanent. Sessionstorage is valid for a different period, and once the window or tab is permanently closed, all data stored through Sessionstorage is deleted. The scope of the ②localstorage is limited to the document source level. As with Localstorage, the scope of Sessionstorage is also limited to the document source, and not only that, sessionstorage scope is also limited to the window, if the homologous document is rendered in different browser tabs, Then they have their own sessionstorage data, which they cannot share.

5, Htmlapi

① Geography: Navigator.geolocation
② History Management Hashilu by: Use Location.hash and Hashchange events. The hash property sets the fragment identifier for the URL, usually the ID used to specify a portion of the document to scroll to. However, Location.hash does not necessarily have to be set to an element ID: It can be set to any string. If the application state can be encoded as a string, the string can be used as a fragment identifier. (p663) History routing: Using the history and Pushstate () methods and Popstate events. HTML5 introduces the History.pushstate () and History.replacestate () methods, which allow you to add and modify history entries, respectively. These methods are usually used in conjunction with Window.onpopstate.
Whenever a history entry that is active is changed, the Popstate event is triggered on the corresponding Window object. If the history entry that is currently active is created by the History.pushstate () method, or modified by the History.replacestate () method, the State property of the Popstate event object contains a copy of the state object of the history entry. The
Call to History.pushstate () or history.replacestate () does not trigger the Popstate event.
When a Web page is loaded, browsers have different manifestations of whether the Popstate event triggers, and Chrome and Safari trigger the Popstate event, which Firefox does not.
Reference: Https://developer.mozilla.org/zh-CN/docs/Web/API/History_API
③ cross-domain message delivery
④worker Object
⑤ typed arrays and Arraybuffer
⑥blob
⑦ file system APIs

Third, learning experience
1, on the part of the prototype builder, feel Little Red book than the Rhino book more detailed explanation, but the basic part of the words Rhino Book interpretation is very clear and easy to understand.
2, about the book section 18.3 (P508) based on the server push event Comet event, after practice found that in fact, every 3s to the server to make a data request
3, in practice PostMessage found a problem:
window.open ( method returns a reference to the open window, but must be opened successfully to return a reference, or null if blocked by the browser (pop-up for security blocking a window that is not clicked by a user).