• Object – oriented three characteristics: encapsulation, integration, polymorphism

1. What is object orientation

In programs, object structures are used to describe a concrete thing in reality

1.1. What is an object:

The storage space in a program that encapsulates the properties and functions of an object in reality

1.2. Why
  • In reality, any data has a clear attribution and is not isolated
1.3. When:
  • As long as a program is used to describe a thing in reality, it is necessary to encapsulate the attribute and function of the thing in an object
How to
  • Three characteristics: encapsulation, inheritance, polymorphism

2. The packaging

2.1. What is

The attributes and functions of a thing in reality are defined in an object structure:

  • Properties of things become properties of objects
  • The function of the thing becomes the method of the object
2.2. Why
  • Let each data has its own special attribution, easy maintenance and operation
When 2.3.
  • Whenever you use object orientation, you wrap data into objects before you use it
2.4. How about: 3

  1. Object direct quantity

    var obj = { // Create a new objectProperty name: value, property name: value,......// Function (argument list) {...... }Method name (argument list) {......// this. Attribute name}, method name (...) {... }}Copy the code

    • When to use direct quantities: If the object is created, its members are already known

    • Problem: Object’s own methods, to access their own properties

      • Error:Object name. Attribute name, a point object name modification, method object name to be modified at the same time, not easy to maintain
      • Correct: Use keywords within methodsthis, automatically points to the current object itself ->This attribute names
        • Advantages: Even if the object name is changed,thisYou can also get the object itself automatically, regardless of the object name
        • thisOf the current object/its own

    • Conclusion: In the future, whenever the object’s own methods, to use the object’s own properties, must use this. The property name

  2. Use new: step 2

    1. Create an empty object:var obj = new Object()
    2. Add new properties and methods to an empty object:
      • Obj. Property name = value
      • Obj. Method name = function () {this.

    • When to use: If the object’s members are not known at the time of creation

      • After an object is created, new members can be added at any time

    • The essence of an object in JS is simply an associative array

      • The associative array object accesses elements:Array [' property name '] Object. Property name / Object [' property name ']
      • Create: Step 2 Create a vm first[]Available direct quantity{}Create and add members and add members at once

    • Problem: Only one object can be created at a time. Creating pairs of objects with the same structure repeatedly has too much code redundancy and is not easy to maintain

      • Solution: use constructors to repeatedly create multiple objects of the same structure

  3. Use constructors to repeatedly create multiple objects of the same structure

    • Constructor: A function that describes the uniform structure of a class of objects. It is also used to decorate a new empty object into the desired structure and store data

    • When: When creating objects of the same structure over and over again, use constructors to describe a unified structure

    • How about: 2 steps

      1. Define the constructor:

        functionType name (Attribute parameter list) {
	this. Attribute name = attribute parameter; .this.method name =function () {
		this.Attribute name}}Copy the code

      2. Create a new object by calling the constructor with new:

      Js var obj = new Type name (attribute parameter list)Copy the code

    • New 4 things:

      1. Create a new empty object
      2. A prototype object that automatically sets the new object to inherit the constructor
      3. Call the constructor to add new properties to the new object
      4. Returns the address of the new object stored in the object variable
2.5. How do I access members of an object
  • Member = attribute/member = method
  • Access properties:Object. Property nameIs used exactly the same as a normal variable
    • Properties are actually variables stored in objects
    • Also throughObject [' property name ']Access to
  • Call method:Object. Method name (), the usage is exactly the same as ordinary functions
    • Methods are actually functions stored in objects
  • Problem: Methods are defined in constructors, and every time a new object is created, duplicate copies of the same function are created -> wasting memory
    • Solution: Inheritance
  • Summary: Constructors -> Advantages: Code reuse Disadvantages: no memory savings

3. The inheritance

3.1. What is

A member of a parent object that can be used directly without repeated creation

3.2. Why
  • Not only can you reuse code, but you can also save memory
When 3.3.
  • As long as multiple child objects have identical members, the same member should be saved only in one parent object, which is shared by all child objects
3.4. How to
  • Prototype object (prototype): specialized centralized storage of the same type of multiple child objects, a common member of the parent object
3.4.1. How do I get the prototype object
  1. Buy one get one free: When the constructor is created, a prototype object of this type is already created automatically
    • constructionalprototypeProperty refers to the stereotype object, of the stereotype objectconstructorRefers to a constructor object
  2. Automatic integration: When child objects are created, new objects are automatically set__proto__Property inherits the stereotype object of the constructor
3.4.2. How do I add a common member to a prototype object

  • Constructor. Prototype. Property name = value/constructor. Prototype. Method name = function (……) {… }

  • Note: Methods in the prototype object must also use this to access the object’s own properties.

  • conclusion

    • Each child object, a property with a different value, is defined in the constructor
    • Methods and property values shared by all child objects are centrally defined in the prototype object
3.4.3. Common and own attributes
  • Owned properties: Properties stored directly locally to the current object
  • Common properties: Properties that are stored in an object’s prototype object and shared by all its children
  • Same: specifies when
  • Different: When modified:
    • Properties of their own can be modified directly by child objects:
      • Child object. Own property = value
    • Common attributes can only be modified by the constructor’s prototype object:
      • Constructor. Prototype. common attribute = value
3.5. The prototype chain

A chain structure formed by successive levels of parent objects

  • Any object has it__proto__Property points to its parent object
  • Holds the members of all objects
  • Controls the order in which object members are accessed:
    • Priority access to own properties
    • You don’t have to go through the prototype chain to find the parent
    • Once you find it, you don’t look up
3.6. Prototype objects for built-in objects

  • Each built-in object has a pair of constructors and prototype objects

    • The constructor is responsible for creating the new object

      • Ex: var arr = new Array() / var date = new Date() / var reg = new RegExp()

      • Exceptions: Math and window are not constructors and cannot be new

    • The stereotype object is responsible for centrally storing all available apis for that type

      • Ex: arr.sort() / arr.push() / arr.slice()

        • Because:
        Array.prototype: {
  sort(.){... },push(.){... },slice(.){... }}Copy the code
3.6.1. Resolve Browser Compatibility Problems
  • Old browsers cannot use new onesAPIStep 2:
    1. Judgment: If the current browser does not contain the desired prototype for the specified typeAPI
      • if (! 'indexOf' in Array.prototype): in-> Is used to detect whether the name on the left is in the object on the right or in the prototype chain of the object
      • if (typeof Array.prototype.indexOf ! == 'function')
    2. If not, add a new function to the prototypeArray.prototype.indexOf = function (......) {// this represents the current array object}
3.7. Custom inheritance
When 3.7.1.
  • As long as you want members of other objects
3.7.2 How to: 3 kinds

  1. Directly modify the __proto__ attribute of an object to point to the new object

    • child.__proto__ = father
    • Question:__proto__It is an internal attribute and is not recommended
      • Solution:Object.setPrototypeOf(child, father)

  2. Modify the parent object of all children in batches by modifying the prototype object of the constructor

    • Constructor. Prototype = father

    • Emphasis: Timing -> Modify before you start creating child objects

  3. Inheritance between two types: More like Java inheritance

    • Problem: If two objects have partially identical property structures and method definitions
    • Solution: Abstract a parent type
      1. The constructor of the parent type contains some of the attributes of the child type
      2. A prototype object of a parent type contains partial methods of the same subtype
      3. Borrow a parent type construct in a subtype constructor
        • Error: Call the parent type construct directly
          • Neither function does. / no functionnewCall, wherethisPoint to thewindow
        • Address:callTo force and replace the functionthis
          • When: If the functionthisNot wanted
          • How to:Fun.call (obj, parameter value)
            • callfunTo replacefunIn thethisPoint to theobj
      4. Let the subtype prototype integrate with the parent type prototype
        • Object. SetPrototypeOf (subtype.prototype, parent type.prototype)
  • Problem: Members inherited from parent objects are not necessarily desirable
    • Solution: polymorphism

4. Polymorphism

4.1. What is

The same function behaves in different states under different circumstances

4.2 Overriding (Override)
  • If the parent member of the child object pair is unusable, you can define a member of the same name locally to override the parent member
4.3. Why
  • Not all members inherited from the parent object are desirable
When 4.4.
  • If the child object feels that the member of the parent object is unusable

Conclusion: Object-oriented three characteristics

  • Encapsulation: The aggregation of attributes and functions of a thing into an object
    • Why: Easy to maintain
  • Inheritance: A member of a parent object that can be used directly without the need to create a child object repeatedly
    • Why: Code reuse, memory savings
  • Polymorphic: If the member of the parent object is unusable, you can override the member of the same name in the child object
    • Why: To show differences between father and son objects