What is Object-Oriented

Keywords: Attribute

What is an object?  
For example, television is an object, a very specific example.

What is Object Oriented (OOP)? (It's an idea)
I want to watch TV, I can not understand the internal principle of the TV, but I will use the function buttons on the surface of the TV, voice, channel and so on, will not affect my use of this TV object.

What are the characteristics of OOP?

Abstraction: Grasp the key points of need (e.g. employee payroll system, only need to know the name, work number, no need for attributes such as height, weight, etc.)

Packaging: Television is like a black box, the principle of the circuit board inside nothing, as long as you can use the function of the surface! For example, JQ, you can use it, but the principle inside can be ignored temporarily.

Inheritance: The father has some functions, and the son inherits these functions. The son can also have some new functions and characteristics according to his own needs. The goal is to reuse code for maximum purposes.

Multiple Inheritance: Simply put, a son has more than one father. For example, box: can hold things, car: can run. Together, it's inherited to future generations. It's a truck.

Function: In an object, it's called a method, a thing. If a function is bound to an object, it is called a method.

Variable: In an object, it's called an attribute, a thing. Variables are called variables when they are bound to objects. For example, a variable is a girlfriend, who is called a wife after marriage. The same thing, just subordinate to me, is my woman, and becomes a wife.

Create an object:

var obj = new Object(); // Create an empty object
           obj.name = 'haha';
          obj.showName = function(){ 
          alert(obj.name);
          }
       obj.showName();


Disadvantage: When we want to create multiple object-oriented objects, we have too much duplicate code and need to encapsulate, so we have the following methods

This is actually a simple encapsulation function. The whole process is like a factory pipeline, so it's called factory mode.

Disadvantage: The type of Object created cannot be identified. Because all of them are Objects, there is no discrimination, unlike Date, Array, and so on, there is a constructor pattern.


Object objects are different from other objects such as Date,Array,RegExp: Objects like Date have many attributes and methods. If we want to achieve object-oriented in normal time, when we write some attributes and methods, we may conflict with the method attributes in the original object Date. Object is different, it has almost no objects and methods of its own, like white paper, so when you create an object, it's new. Object()

Constructor: Actually, it's a normal function, but its function is a function to construct an object.

function fn(a,b){
    //Building blocks of code for objects
}

Factory mode: The workflow of this function is somewhat similar to that of factory-processed products, so it is called factory mode. as follows

function fn(a,b){
    //Creating raw materials
    var obj = new Object();

    //Processing products
    obj.name = name;
    obj.yongchu = function(){
        alert("obj The purpose is XXX")
    }

    //Products out of factory
    return obj;
}

var obj = fn("one","eat") //No new keyword
var obj2 = fn("two","eat")
alert(obj.yongchu == obj2.yongchu) //false functions are the same but not the same, the same function occupies more memory, waste.

Shortcomings of factory mode:
1. No new. 2. When different objects have the same method, the method is not the same, which occupies memory.

Classes and objects:
Classes are like moulds. What can be produced according to the moulds is objects (examples). Examples are as follows;
For example: there is a part of the mold, the mold itself can not be used to the actual needs of the place, and the parts produced through the mold can be used to the actual needs of the place, can assemble parts ah and so on.

prototype
Prototype is similar to class in CSS. If you set attributes and methods to prototype, then all elements calling prototype of this object have attributes and methods.

Adding attributes and methods to objects is similar to adding attributes and methods to interline styles in CSS.

Popular Object-Oriented Writing
Write the properties of the object in the constructor.  
The way to write objects in a prototype.  
For example, code

   function CreatePerson(name,qq){ //Write attributes in the constructor, class name CreatePerson initials capitalized
        this.name = name;
        this.qq = qq;
    }

    createPerson.prototype.showName = function(){ //Writing Method in Prototype
        alert("My name" + this.name);
    }

    createPerson.prototype.showQQ = function(){
        alert("My QQ" + this.qq);
    }

    var obj = new createPerson("mike","123456");
    obj.showName();
    obj.showQQ();
Constructor pattern
We need to change it in two ways: 1. Function name capitalization; 2. New keyword invocation
function CreatePerson(name){ 
     this.name = name; 
     this.showName = function(){ 
        alert(this.name); 
     } 
  } 
   var p1 =new CreatePerson('haha'); 
    p1.showName();
   var p2 = new CreatePerson('hehe');
    p2.showName();

1 Capital letters are used to distinguish from ordinary functions. The constructor itself is a normal function, but we use it to realize the function of construction. So a special name is called constructor. Any function can be a constructor, depending on the way you call the function. Is it used or not? New.

2 It is used when calling functions. New Keyword, then New What on earth did you do? Useless New What's the difference? Let's look at the following examples

function CreatePerson(name){      this.name = name;    this.showName = function(){      alert(this.name);    };   console.log(this); }  new CreatePerson('haha'); //CreatePerson{} CreatePerson('haha');  //window

We will find that when we use New to call a function, this will be directed differently. In fact, New mainly does the following things, but the following is only about the behavior, not internal source code.
function CreatePerson(name){   
  var res = {};  //Declare an empty object res
   res._proto_= CreatePerson.prototype;//The _proto_attribute of this object points to the prototype object of the constructor so that res can call all methods under the CreatePerson prototype object.
    CreatePerson.apply(res);//Change this point to res object
    this.name = name;  //res object adds attributes, methods
    this.showName = function(){ 
    alert(this.name); 
  };
  return res;//Return this object
}

Posted by phpBever on Tue, 18 Jun 2019 11:04:16 -0700