Javascript deep parsing notes - Moment For Technology

According to the notes of js course organized by Teacher Ono Mori from Station B

The history of JS

Five Major Browser kernels

Browser history and JS birth

ECMA

A programming language

Javascript

ECMAscript
DOM
BOM

The value of JS

cycle

Type conversion

typeof

Typeof returns values that are strings

Display type conversion

Number

Strings are NaN

parseInt

To an integer

True,null,undefined,NaN all have the same result:

The second parameter:

parseFloat

string

Boolean

Undefined null NaN “” 0 :false All others are true

Implicit type conversion

Undefined and null are neither greater than, less than, or equal to 0

but

isNaN

TRUE FALSE FALSE TRUE FALSE TRUE

function

Function attributes

length:

Prototype: is not enumerable and therefore cannot be found with for-in

The arguments parameter

Perform:

test(1)

Function parameter default value

recursive

precompiled

Implied global variable

Ao-activation Object Active object, function context

Execution Result:

Case Study:

Output function

Go-global Object Global context

Case 1:

Results: 1, 6, 6

Case 2:

Result Output 2

Case 3:

2 undefined undefined 4

The scope chain

Generates the function’s scope chain when it is defined, and generates its own AO just before the function executes

Analysis of the function

When a function is defined

The moment before function A is executed

B function is defined

The moment before b is executed

After function B is executed

At the end of function A

Closure based

define

When an inner function is returned to the outside and saved, closures are bound to result, and the original chain of scope will not be released. Excessive closures can result in memory leaks, or slow loading.

Analysis of the function

Example: A closure returns two functions

Patients with a

Example 2

Example: Closure returns an object

Execute the function IIFE immediately

Automatic execution and release immediately after execution

IIFE : immediately-invoked function expression

writing

//1. Whatever is wrapped in parentheses eventually becomes an expression
//2. Execute the function immediately without the function name. It doesn't matter whether you write or not, because the function is executed immediately.
(function() {... }) () (function() {... } ())/ / the W3C recommendations

// Function declarations become expressions: + -! | | &&
1 && function test() {
    console.log(1)
}()
Copy the code

Immediate functions are usually preceded by a semicolon to prevent concatenation from an error

The interview questions

Note: Here the second function parenthesis is considered an expression, so the second function is not executed

Comma operator

A classic case

What is the result of running the following code?

Analysis:

Solution 1: Use immediate execution functions

Solution 2: Use external parameter transmission

Solution 3: Use immediate functions to pass parameters (important)

Each time the value of I is different, the immediate function will get a different parameter j, so each time the function is passed to the array with a different value of j.

The interview questions 1

The result is that clicking each I prints a 5

Workaround: Use immediate execution functions

The interview questions 2

Resolution:

If has a function in parentheses, so it must not be false(null,undefined,0,false), regardless of whether the function is an empty function, so the statement inside if executes
(function b() {}) typeof(b) = undefined
A = 10 + undefined becomes the string ’10undefined’

The ginseng

(function(a,b) {
	console.log(a+b)
}(3.5))
Copy the code

Get the return value

var x = (function(a,b) {
	return a + b
}(3.5))
Copy the code

Topic:

object

Method for deleting objects:

Create an object

Custom constructors

Standard writing:

Analogous to a VUE instance

The constructor

The constructor’s this pointer

The principle of analyzing

I’m not going to write it the equivalent of new

Modify the constructor

A wrapper class

new Number

new String

Pay attention to

Both of these will return an error because undefined and null cannot set any properties or methods.

Js wrapper classes

But why doesn’t the following one get an error?

Answer:

Strings are primitive values with no attributes or methods. The str.length system also creates a String and assigns length to 3. But new String () comes with an le NGTH attribute. So you can use the wrapper class to ask for the length attribute unique to the String.

Console. log(new String(STR).length)

Array truncation method

Whatever length is assigned, take the first few bits and truncate the rest.

If length is set to 6, add an empty bit

What about strings?

Also because of the packaging class.

The interview questions

Topic 1:

The answer:

Topic 2:

The answer:

Title 3:

The answer:

Topic 4:

Which one can output 1, 2, 3, 4, 5?

The answer:

So it’s the first one and the third one

ASCII and UNICODE codes

Like ASCII codes, the 0-255 bits are one byte each, and after 255 bits are two bytes each.

Application:

The answer:

The title

Write a constructor that takes an unlimited number of arguments. The constructor is required to add and multiply the input arguments.

Writing a:

Method 2:

The prototype

The prototype with _proto__

The principle of

The characteristics of

Prototype to rewrite

The window with the return

Plugins are usually written as follows:

Example:

Prototype chain

At the top of the prototype chain is Object.prototype, which holds a toString method

Pen test

Topic 1:

The answer:

Topic 2:

The answer:

Add a students attribute to student and add one to the stereotype and assign it to it.

So the result is:

Title 3:

Resolution:

If it is car.prototype.intro (), output Mazda

Object.create()

So not all objects inherit from Object.prototype

Undefined and null can use toString()

Undefined and NULL have neither wrapper classes nor stereotypes, so there are no toString methods and no corresponding attributes.

Object. The prototype. ToString and Number. The prototype. ToString

Call and apply

Application:

inheritance

The holy grail mode

Code:

Results:

Grail mode encapsulation

homework

The answer:

The interview questions

Resolution:

Foo.getName(); – > 2

Function Foo is treated as an object, and the getName function of that object is borrowed and executed, regardless of what is inside Foo.

getName(); – > 4

Precompile problem, first variable declaration, then function declaration, finally run. GetName is assigned when run, overwriting the previous function.

Foo().getName(); – > 1

Foo() is called first. Foo has no var before getName, so it is treated as the global getName, which is overwritten by getName in Foo. Then this.getName(), which is window, is log(1)

getName(); – > 1

The global getName function was overridden by getName in Foo in the previous step, so it’s still log(1).

new Foo.getName(); – > 2

Foo is not followed by an execution symbol, so foo.getName () takes precedence over new, so 2.new 2 is meaningless.

new Foo().getName(); – > 3

Foo is followed by an execution symbol. New Foo() is executed, creating an instance, and then getName is executed, but the instance itself does not have a getName function (because Foo does not have this.getName=…). And the prototype of the instance has getName, so log(3)

new new Foo().getName(); – > 3

Equivalent to New 3

Related objects

Chain calls

The principle of

The results of

Object property traversal

for… in

hasOwnProperty

The result: Benz Red 3.0

Determines whether the attribute exists

instanceof

Check if object A is instantiated by constructor B: A instanceof B

There are three ways to determine an array

Recommended methods:

Typeof returns six values

Note: Typeof returns values of string type

object(null),boolean,number,string,undefined,function

This points to the

Global this -> window

This -> window inside the precompiled function

Constructor this -> instance

Call and apply

The callee and caller

argument.callee

Returns the function being executed for the argument

Results: 3, 3, 2

Application: self-executing functions

caller

IsNaN internal principles

Pen test

Topic 1:

Resolution:

Topic 2:

Deep copy

Method one:

function deepClone(origin,target) {
    var tar = target || {},
        toStr = Object.prototype.toString,
        arrType = '[Object Array]';

    for (var key in origin) {
        // Remove attributes from the prototype
        if (origin.hasOwnProperty(key)) {
            // Check whether it is a reference type
            if (typeof(origin[key]) === 'object'&& origin[key] ! = =null) {
                // Check if you are an array
                toStr.call(origin[key]) === arrType ? tar[key] = [] 
                : tar[key] = {};
                deepClone(origin[key],tar[key]);
            } else{ tar[key] = origin[key]; }}}return tar
}
Copy the code

Method 2: Use JSON

var str = JSON.stringify(origin)
var target = JSON.parse(str)
Copy the code

An array of

The underlying

An array is really just another form of object:

Poor array

If the null value after the comma is the last bit, then the bit is invalid, that is, it does not exist.

Use constructors to construct arrays. Do not have empty values between commas, otherwise an error will be reported.

Use the constructor to construct an array. If only one number is filled in, it represents the length of the array

Method (modify the original array)

push unshift

Handwritten push:

pop shift

reverse

flip

splice

sort

Random sequence

Method (without modifying the original array)

concat

toString

slice

Copy array:

[start, end] [start, end] [start, end

join

Leaving it blank is equivalent to toString

To fill it in is to put in the delimiter

split

Without arguments, the entire string is placed in the array as an element

Putting an argument is putting it into an array based on the delimiter

The second argument is the number of bits to intercept

Rewrite the unshift

Using a splice

Using the concat

Arrays are sorted by the number of bytes of their elements

Array to heavy

An array of class

Is an array-like object, but does not inherit from an array, that is, does not have array methods. Direct inheritance is the object’s prototype:

Simulate class arrays with objects:

Class arrays are converted to arrays

Push the principle

The interview questions

Resolution:

Application:

Encapsulate a Typeof method

Tip:

The answer:

tip:

Typeof puts an undeclared variable in its output undefined

JS Error message type

SyntaxError indicates a SyntaxError

ReferenceError indicates a ReferenceError

RangeError RangeError

TypeError Indicates an error type

URIError URI error

literacy

error

EvalError The eval function performed an error

performance

The JSON data

Eval usage (not recommended)

Es6 slam the door

Improper usage (see performance) Poor debugging performance problems Network security

Convert JSON string data into looping objects

conclusion

The above six errors can be user-defined and thrown, that is, they all have corresponding instantiation functions

There’s also a total error

Manually throwing errors

try… catch

finally

throw

Throw error messages

ES5 Strict mode

ESMAScript course

Start strict mode

The first:

Top line

The second kind: inside the function

The instance

With the function

Strict schema rules

caller callee

A is equal to 1 or a is equal to b is equal to 1

This points to the

This must be assigned, otherwise it refers to undefined

Arguments to a function cannot be repeated

Object properties that duplicate are not displayed, but no errors are reported

eval

In strict mode,eval has its own scope; In non-strict mode,eval is global in scope