search
HomeWeb Front-endJS TutorialIntroduction to JavaScript Advanced Programming

Introduction to JavaScript Advanced Programming

Jul 18, 2017 pm 05:06 PM
javascriptjsprogramming


Preface:

It took me roughly a week to read half of this book carefully. These are the reading notes I made. I hope it can give people who read this book a rough reference. It may be a bit messy and not comprehensive at the moment, I will sort it out and add it later. (2017-7-17)

Chapter 1 JavaScriptIntroduction

Chapter 2 Used in HTMLJavaScript

## Chapter 3 Basic concepts

3.1.

Grammar

Case sensitive

Identifier(recommended to use camel casemyCar)

Comments // /**/

Strict mode(use strict)

Statement Recommendationvar diff-a-b; use semicolon, and if(test) { alert(test); }Also use {}

3.2 Keywords and reserved words

3.3 Variable

Uninitializedundefined var message = “hi”; message = 100; The type can be changed at will

Function test(){

Var a = “hi”; 局部

b = “hi”; 全局

}

Test(); alert(a); Error alert(b); hi

3.4 Data type

typeof

Undefined (defined but not assigned)

Null(null object pointer)

Boolean(Boolean valuetrue false The flow control statement will automatically execute the corresponding boolean Conversion)

Number

(octal0 decimal ten Hexadecimal 0x Floating point value rangeNaN Number conversionNumber parseInt )

String(String, no difference between single and double quotes, escape sequence, string characteristics, toString String)

Object(Object The basis of all objectsvar o = new Object();)

Function in ES is an object, not a data type.

3.5Operator

Unary operator ++ -- , + -(can be used to convert data types)

Bit operators Bitwise not~num1 Bitwise AND& Bitwise OR| Bitwise XOR^ Shift leftShift right>> Unsigned right Shift>>

Boolean operator ! && || Multiplicative operator* / % Additive operator+ - Relational operator =

Equality operator == != === !== Conditional operator? :

Assignment operator = *= /= %= += -= >= >> >=

Comma operator

3.6 Statement

3.7 Function

##arguments No overloading

Chapter 4 Variables, scope and memory issues

4.1

Values ​​of basic types and reference types

##Dynamic Attributes

(Reference types can dynamically add attributes)

Copy variable values

(The basic types are different Space, the reference type refers to the same space)

Pass parameters

(Same)

Detection type (typeof instanceof)

4.2Execution environment and scope

Scope Chain Extended scope chain(try-catch with) No block-level scope(if for Declare variable query identifier)

4.3Garbage collection

Strategy(Mark clear reference count ) Performance Issues Managing Memory

Chapter 5 Reference Type

5.1 ObjectType

Var person = {};(Suitable for passing a large number of parameters to functions) var parson = new Object();

Person["name"](Use # when using variables to represent attributes ##) person.name(Recommended)

5.2 Array

Type

Var colors = new Array(); var colors = Array(); var colors =[*****];

Colors[*] = *****; colors.length

Detect array: instanceof Array.isArray()

Conversion method: toString() valueOf() toLocaleString() join()

Stack method: push() pop()

Queue method: shift() unshift()

Reordering method: reverse() sort(You can add this parameter of comparison function)

Operation method:concat()The original has not changed and added slice()The original has not changed to intercept the segment splice()The original has changed Can be deleted or added

Position method: indexOf() lastIndexOf() Return the position of the item

Iteration method: every() filter() forEach() map() some() Each item is processed, but the original array will not change

Merge method: reduce()Order reduceRight()Reverse order The two items are always the same Traverse to the end

5.3 Date

Type

New Date()

Inside parse("May 25,2004") UTC(2005,0) Date.now()

Inherited method: toLocaleString( ) toString() valueOf()

Date formatting method: toDateString() toTimeString() toLocaleDateString() toLocaleTimeString() toUTCString()

Date/Time component method: too many specific readings

5.4RegExp

Type

Literal var pattern1 = / [bc]at / i;

Constructor var pattern2 = new RegExp(“ [bc]at ”, ” i ”);

RegExp

Instance attributeglobal ignoreCase lastIndex multiline source It’s useless

RegExpInstance method: exec() Capturing group(Capturing multiple groups of matches) text() Check if it matches once

RegExpConstructor attributes: There are a lot of them, used to see the relevant information of the latest match

Limitations of the pattern: Lack of advanced regular expression features supported by some languages ​​(Perl), but in most cases Enough

5.5 Function type Function is an object(is alsoFunction Instances of ), the function name is a pointer.

function sum(num1,num2) { }

Var sum = function(num1,num2){ };

No overloading: the function is an object and the function name is a pointer.

Function declaration and function expression: function ******* Function declaration promotion var sum = ** ***** Will not be promoted

Function internal attributes: argumentsObject (Attributecalleepoints to function) thisObject(Points to the environment object where the function executes ) Attribute caller (Points to the function that calls the current function, if it is a global scope function, the value is null)

Function attributes and methods:

Attributes(lengthDeclaration parameters Number prototypeInheritance)

Non-inherited method: call( ) apply() bind()

a.apply( b, c); a.call( b, d );

Run the function a in the environment object b, and pass in the parameters to ac( argumentor array) / d( Write each item out )

Var a = b.bind(c);

a is a function that runs in the c environment object

5.6Basic packaging type:

BooleanType: var booleanObject = new Boolean(true); It is recommended never to use Boolean objects.

NumberType: var numberObject = new Number(10); toFixed( ) toExponential() toPrecision()

It is also recommended not to instantiate the Number type directly.

String Type: var stringObject = new String(“hello world”); lengthAttributes

1.Character method: charAt()or string[] Return the corresponding character charCodeAt() Return the corresponding character encoding

2. String operation method:

concat() or# The ##+ operator looks the same as the array's concat()

Slice() substring() substr()

Intercept string, three are very flexible

3.

String position method: indexOf( ) lastIndexOf()

4.trim()

Method Remove all prefix and suffix spaces trimLeft() trimRight()

5. String case conversion method

toLowerCase() toUpperCase()

Classic method

toLocaleLowerCase() toLocaleUpperCase()

Specific regions This is more secure

6. String pattern matching method

match()

The same essence as RegExpexec() returns the string that matches Array

search()

Returns the index of the first matching item otherwise returns -1

replase()

Match and replace the string

split()

Match the delimiter to generate an array

7.localeCompare()

Compare two strings

8.fromCharCode()

Static method Encode multiple characters Become a string

9.HTML

method For example big() string

5.7

Single built-in object

1.Global

Object

URL

Encoding method:

encodeURI()

Entire encodeURIComponent() some A paragraph of encoding

decodeURI()

The whole decodeURIComponent() A certain paragraph of decoding

eval()

Method Very powerful and very dangerousECMAScriptParser

Global

Object properties undefinedArray......are all properties

Web

The browser implements the global object as a part of the window object

2.Math

Object

Math

Properties of the object Some special values ​​such as π

min() max()

Method

Rounding method: convert decimal value into integer

Math.ceil(25) Add one Math.floor(25) Back one Math.round(25) Rounding

random()Method [0,1) Random number between

Other methods Too much reading

Chapter Six Object-oriented programming

6.1Understanding objects

6.1.1Attribute type:

Data attribute: 4 attributes

Accessor properties: does not contain data values 4 properties are defined via Object.defineProperty()

6.1.2Define multiple properties: Object.defineProperties() Can be a data property or an accessor property.

6.1.3Read property characteristics: Object.getOwnPropertyDescriptor()

6.2Create Object

6.2.1Factory Mode(看书)

6.2.2Constructor pattern(看书 new constructor )

6.2.3Prototype pattern:

1. Understand the prototype object

2.Prototype and inoperator(in for-in)

3.Simpler prototype syntax(Object literal to access the object)

4.The dynamics of the prototype(The prototype can be replaced by another object, but it will be invalid for the instance that has been created)

5.Prototype of native object( is to use prototype mode, you can define new methods in it, but it is not recommended)

6. Problem with prototype objects: There are no properties belonging to the instance itself

6.2.4Use the constructor pattern and prototype pattern in combination

The most common mode, instances have their own properties and methods, and some are shared.

6.2.5Dynamic prototype mode

Add a judgment statement to the above mode to dynamically add a judgment statement to the prototype Add method.

6.2.6Parasite Constructor Pattern

The only difference between the Parasitic Constructor Pattern and the Factory Pattern is one new, and it has multiple return. The returned object has nothing to do with the constructor, so the instanceof operator cannot be used to determine the object type. Not recommended.

6.2.7Safe constructor pattern

is similar to the parasitic constructor pattern, but does not use this and new. instanceofcannot be detected either

6.3Inheritance

6.3.1Prototype chain Prototype search mechanism

1.Don’t forget the default prototype: the default for all functions Prototypes are all instances of Object.

2.Determine the relationship between prototype and instance: instanceof isPrototypeOf()

3. Carefully Define methods: New methods must be defined after the instance replaces the prototype.

4. Prototype chain problem:

Attributes outside the prototype are also inherited

When creating an instance of a subtype, parameters cannot be passed to the constructor of the supertype.

Rarely used alone.

6.3.2 Borrow the constructor using call or apply Inherit and pass parameters but only use the constructor pattern.

is also rarely used alone.

6.3.3Combined inheritance

Prototype chain implementation Prototype attributes and Inheritance of methods

Use constructor to implement Inheritance of instance attributes

The most commonly used inheritance method

6.3.4Prototypal inheritance(看书)

The constructor is not used The retained type can be used, but the properties of the reference type will be shared like the prototype mode.

6.3.5Parasitic inheritance(看书)

Constructor is not considered Can be used But function reuse cannot be achieved

6.3.6Parasitic combined inheritance(看书)

Problem with compositional inheritance: the supertype's constructor is called twice, resulting in duplicate properties in the instance and prototype.

Parasitic combined inheritance solves this problem and becomes the most ideal inheritance paradigm.

Chapter 7 Function expression

How to define a function:

Function declaration(Function declaration is promoted with name)

Function expression( name is empty anonymous function/Named general function expressions are anonymous functions)

7.1Recursion

Strict mode cannot be used arguments.callee Named function expressions can be used.

7.2Closure: A function that has access to a variable in the scope of another function

Self-summary: Closures are functions, generally anonymous functions are used

1. Closures can access variables in returned external functions.

2.The active object of another function will be saved until the closure's scope chain is destroyed.

7.2.1 Closures and variables

Side effects: closures are saved in the scope chain is the entire variable object, so the variable returned is the last value saved.

For example, in the for loop, unsatisfactory situations will occur.

7.2.2AboutthisObject

The this object in the closure, the closure may be placed on the global object in some special circumstances, so this changes. Know.

7.2.3Memory leak

Use closures to ensure normal memory recovery

7.3Imitate block-level scope

Use anonymous self-executing functions to imitate.

Self-summary effect:

1.It will be destroyed after internal execution.

2.Anonymous self-executing functions can reduce pollution of global methods and properties.

Closures have a memory problem, and it is very comfortable to use this combination.

7.4Private variables

Everything on the object is public Everything in the function is private

Create the public method of the function through closure(Privileged method) ---------Used to obtain private variables

Created in the constructor                                                                                                                                                                                                                                                                                                         ##this.****** = function(){ **** }; But each instantiation will rebuild a set of methods, which is wasteful.

7.4.1Static private variables                                                                           An instance does not have its own private properties

Static uses

Private scope

Global construction through closure Create privileged methods in the function's prototype.

Improves code reusability, but each instance does not have its own private variables. (Because this is called a static private variable)

Use instance variables or static private variables, depending on the specific needs.

7.4.2Module Mode                                                                                     Literal An instance object

Create private variables and privileged methods for a singleton

(

Singleton: an object with only one instance

) Define private variables and methods inside the anonymous function, and then use an object literal as the return value of the function.

7.4.3

Enhanced module mode

Must be an instance of a certain type , some properties or methods must also be added.

The above is the detailed content of Introduction to JavaScript Advanced Programming. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Python vs. JavaScript: Development Environments and ToolsPython vs. JavaScript: Development Environments and ToolsApr 26, 2025 am 12:09 AM

Both Python and JavaScript's choices in development environments are important. 1) Python's development environment includes PyCharm, JupyterNotebook and Anaconda, which are suitable for data science and rapid prototyping. 2) The development environment of JavaScript includes Node.js, VSCode and Webpack, which are suitable for front-end and back-end development. Choosing the right tools according to project needs can improve development efficiency and project success rate.

Is JavaScript Written in C? Examining the EvidenceIs JavaScript Written in C? Examining the EvidenceApr 25, 2025 am 12:15 AM

Yes, the engine core of JavaScript is written in C. 1) The C language provides efficient performance and underlying control, which is suitable for the development of JavaScript engine. 2) Taking the V8 engine as an example, its core is written in C, combining the efficiency and object-oriented characteristics of C. 3) The working principle of the JavaScript engine includes parsing, compiling and execution, and the C language plays a key role in these processes.

JavaScript's Role: Making the Web Interactive and DynamicJavaScript's Role: Making the Web Interactive and DynamicApr 24, 2025 am 12:12 AM

JavaScript is at the heart of modern websites because it enhances the interactivity and dynamicity of web pages. 1) It allows to change content without refreshing the page, 2) manipulate web pages through DOMAPI, 3) support complex interactive effects such as animation and drag-and-drop, 4) optimize performance and best practices to improve user experience.

C   and JavaScript: The Connection ExplainedC and JavaScript: The Connection ExplainedApr 23, 2025 am 12:07 AM

C and JavaScript achieve interoperability through WebAssembly. 1) C code is compiled into WebAssembly module and introduced into JavaScript environment to enhance computing power. 2) In game development, C handles physics engines and graphics rendering, and JavaScript is responsible for game logic and user interface.

From Websites to Apps: The Diverse Applications of JavaScriptFrom Websites to Apps: The Diverse Applications of JavaScriptApr 22, 2025 am 12:02 AM

JavaScript is widely used in websites, mobile applications, desktop applications and server-side programming. 1) In website development, JavaScript operates DOM together with HTML and CSS to achieve dynamic effects and supports frameworks such as jQuery and React. 2) Through ReactNative and Ionic, JavaScript is used to develop cross-platform mobile applications. 3) The Electron framework enables JavaScript to build desktop applications. 4) Node.js allows JavaScript to run on the server side and supports high concurrent requests.

Python vs. JavaScript: Use Cases and Applications ComparedPython vs. JavaScript: Use Cases and Applications ComparedApr 21, 2025 am 12:01 AM

Python is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.

The Role of C/C   in JavaScript Interpreters and CompilersThe Role of C/C in JavaScript Interpreters and CompilersApr 20, 2025 am 12:01 AM

C and C play a vital role in the JavaScript engine, mainly used to implement interpreters and JIT compilers. 1) C is used to parse JavaScript source code and generate an abstract syntax tree. 2) C is responsible for generating and executing bytecode. 3) C implements the JIT compiler, optimizes and compiles hot-spot code at runtime, and significantly improves the execution efficiency of JavaScript.

JavaScript in Action: Real-World Examples and ProjectsJavaScript in Action: Real-World Examples and ProjectsApr 19, 2025 am 12:13 AM

JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),