Introduction to object-oriented programming

  1. Process-oriented programming: Step – oriented implementation
  2. Programming OOP to objects: Divide problems by object functionality, not steps
  3. Characteristics: encapsulation, inheritance, polymorphism

Classes and objects in ES6

Thinking characteristics:

  1. Organize (encapsulate) the properties and behaviors shared by objects into a class
  2. Instantiate the class and get the object of the class

  • Object: is an unordered set of related properties and methods, all things are objects () is a concrete thing object is composed of properties and methods

  • The class class abstracts the common part of an object and generally refers to a class

  • Create a class

      class name{

  }
  new Star();
Copy the code

  • Class constructor

  • Class add method: the function inside the class does not need to add a comma between multiple functions

Class inheritance

  1. The keywordextends
  2. superKeyword: can call the parent constructorsuper(x,x)You can also call the parent’s normal functionsuper.say()
  3. The attribute or method lookup principle in inheritance: the proximity principle
  4. Subclasses inherit methods from their parent and extend their own methodssuper()Must be onthisIn the front of the

Precautions for using classes

  1. Classes do not have variable promotion in ES6, so you must define a class before you can instantiate an object from it
  2. Common attributes and methods in a class must be addedthisuse
  3. classthisPointing problem: constructorthisIt points to the instantiated objectWhoever calls this points to that person

Supplement:

  • insertAdjacentHTML(position,text)You can append a string format element directly to the parent element
  • appendChildString appending child elements is not supported
  • element.click()Automatic invocation of click events does not require mouse triggering
  • ondblclickDouble-click the event
  • input.select()Leave the text in the form selected
  • window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()Double – click to disallow selected text

Constructor and prototype

1. Constructor

  • Instance members cannot be accessed through constructors
  • Static member A member added to the constructor itself that can only be accessed through the constructor, not the object

2. Constructor: There is a waste of memory problem

Constructor prototype (prototype object)

Each constructor has a Prototype property that points to another object. This prototype is an object whose properties and methods are all owned by the constructor

Define the immutable method directly on the Prototype object so that all object instances can share the method

Interview questions:

  1. What is the prototype? An object, we also call itprototypeIs the prototype object
  2. What is the role of archetypes? Sharing method

In general, our public properties are defined in the constructor, and our public methods are put in the prototype object

4. Object prototype __proto__ two underscores

Objects have a __proto__ attribute pointing to the constructor’s Prototype object

ldh.__proto__ === Star.prototype
Copy the code

If there is a sing method on the LDH object, execute the sing method on the object. If there is no sing method, because __proto__ exists, go to the constructor object prototype to find sing method

In many cases, we need to manually direct the original constructor using the constructor property

If we modify the original prototype object and assign an object to the prototype object, we must manually direct the original constructor using constructor

Constructor, instance, and prototype:

Each constructor has a prototype object that contains a pointer to the constructor, and each instance contains an internal pointer to the prototype object. In layman’s terms, an instance can be accessed by an internal pointer to a prototype object, which can be found by constructor.

7. The prototype chain

Prototype Objet. Prototype Objet. Prototype object __proto__ is null

8. Js member search mechanism (rule) that is, search according to prototype chain (nearby principle)

9. This points to the problem in the prototype object

  • In the constructor, the insidethisRefers to an object instance
  • Inside the prototype object functionthisIt points to an instance object

10. Extend built-in objects

Array.prototype={} Array.prototype.sum=function(){} array.prototype. sum=function(){}

Inheritance: Prior to ES6, constructor + prototype object emulation implementation inheritance was called composite inheritance

1. Call () calls this function and modifies the this reference at runtime

fun.call(thisArg,arg1,arg2,..)
Copy the code
  • ThisArg: the object to which this is currently called
  • Arg1, arg2: Pass other arguments

2. Borrow constructors to inherit parent type attributes

Call () refers this from the parent type to the child type

Father. Call (this, uname, age)

3. Inherit parent type attributes from stereotype objects

Prototype = Father. Prototype This is a problem. If you modify the child prototype, the parent prototype will be modified as well

  Son.prototype = new Father();
Copy the code

If you modify a prototype object using object form, remember to use constructor to refer back to the original constructor

  Son.prototype.constructor = Son;
Copy the code

3. New methods in ES5

1. An overview of the

Array method string method object method

2. Array methods

Iterating (traversing) methods: forEach(),map(),filter(),some(),every()

  • Array. forEach(function(value: value of the current item,index: index of the current item,array: object))

  • The filter() method creates a new array, primarily for filtering arrays and notice that it returns a new array directly

    var newArr=array.filter(function(value,index,array){ return value > ? ; })Copy the code

  • The some() method is used to check whether an element in an array satisfies the specified condition. The common sense is to find if there are any elements in the array that satisfy the condition. Note that it returns a Boolean value, true if the element is found, false otherwise

    var flag=array.some(function(value,index,array){ return value > ? ; })Copy the code

    If you’re looking for an element that meets the criteria, it’s more efficient to use some

3. String method: Used to determine whether user input is empty

  • trim()Method removes whitespace from both ends of a string
  • str.trim()Returns a new string

Var arr= object.keys (obj); In returns an array of property names

Object.defineproperty (obj: target Object,prop: target attribute, Descriptor: attribute attribute) Add attributes or modify the original attributes

Value: Set the value

  • Writable: false// This property is not allowed to be modified. The default value isfalse
  • Enumerable: false// Whether the target attribute can be enumerated/traversed
  • Configurable: falseWhether the target attribute can be deleted or whether the attribute can be modified again

Function definition: new Function()

this

Change the this pointer inside the function

  1. Call () method

  2. The apply () method

    Fun. Apply (thisArg, array [])Copy the code

Main application: Use apply to maximize math.max ()

var max=Math.max().apply(Math,arr);
Copy the code

3. The bind() method is the same as call()

If we don’t need to call a function immediately, but we want to change this inside the function, we use the bind() method

Strict mode

What is the strict mode IE10 above, strict conditions under the execution of JS code

Two, open strict mode

1. Enable strict mode for the script

'use strict'
Copy the code

2. Enable strict mode for functions/enable a function

function fn(){
   'use strict'
}
Copy the code

3. Changes in strict mode

  • Variable regulation: declare before use. It is forbidden to delete declared variables
  • In strict modethisPointing to problems
    1. Global scoped functions in strict modethisPoints to theundefined
    2. In strict mode, if the constructor does not addnewThe call,thiscomplains
    3. Strict mode, timerthisPointing to the orwindow
  • The function change
    1. In strict mode, arguments in functions are not allowed to have the same name
    2. In strict mode, it is not allowed to declare functions inside a block of code that is not a function

Higher-order functions

Accept functions as arguments/output functions as return values

Call callback: callback && callback()

closure

1. Variable scope

Closure: a function that has access to a variable in another function’s scope can access a local variable closure of another function. Function: Extends the scope of local variables

recursive

What is recursion? A function can call itself internally

A conditional return is required to prevent stack overflow

Shallow copy:

For (var k in obj){var k in objCopy the code

Or Object. The assign (o, obj)

Deep copy: Recursive thinking

Regular expression

Regular expression overview – objects

  1. What are regular expressions: pattern validation forms for matching combinations of characters in strings, Chinese matching, filtering sensitive words, extracting specific parts
  2. Features: Flexibility, logical functionality

Second, regular expression in JS use

1. Create a regular expression

  1. throughRegExpObject creation
  2. Created using a literal

2. Test regular expression test() regexobj.test (STR) 3

1. Composition of regular expressions: Special symbols

2. Boundary character: used to indicate the position of the character

  • ^: represents the text that matches the beginning of the line
  • $: matches the text at the end of the line

3. Character classes

  • []Represents a list of characters to choose from, as long as one of them is matched
  • /^[abc]&/Choose three
  • [a-z]Connect a to Z 26 letters
  • [a-zA-Z0-9_]You can use both case and number and you can use _ and you can use _
  • (^)// The “^” in parentheses means the opposite of the “^”

4. The quantifiers

  • *Repeat zero or more times
  • +Repeat once or more
  • ?Repeat zero times or once
  • {n}Repeated n times
  • {n,}Repeat n times or more
  • {n,m}Repeat n to m times

5. Summary in brackets

  • /^[abc]&/Choose three
  • /^abc{3}$/ Reg.test (‘ abCCC ‘) can only be repeated c three times
  • /^(abc){3}$/The parentheses indicate the priority and let ABC repeat three times

Rookie tool online test: c.runoob.com/

6. Predefined classes

  • \dMatches any number between 0 and 9, equivalent to[0-9]
  • \DMatches all characters other than 0 to 9[^ 0-9]
  • \wMatches any letters, digits, and underscores equivalent to[A-Za-z0-9_]
  • \WMatches any character other than letters, digits, and underscores[^A-Za-z0-9_]
  • \sMatches Spaces (including newlines, tabs, Spaces, etc.), equivalent to[\t\r\n\v\f]
  • \SMatches characters that are not Spaces[^\t\r\n\v\f]
  • The inside or symbol of the re|

Substitutions in regular expressions

1. Replace the replace

Str.replace (regular expression/string to be replaced, new string)Copy the code

2. Regular expression parameters/expressions /[switch: g global matching/I case ignored/gi]

Screen sensitive words:

Passion | STR. Replace (/ gay/g, "* *");Copy the code