Object-oriented and procedural programming

First, process oriented: pay attention to the steps to solve the problem, analyze the problem needs each step, realize the function call in turn two, object-oriented: is a program design idea. Encapsulate data and the programs that process it into objects abstract things into objects and study the characteristics and behavior of each object. Finally, the relationship between the objects is studied and the process of things is expressed clearly. Whether it's through an object-oriented process or an object-oriented process, the end result is the same. Three, object-oriented features: abstraction, inheritance, encapsulation, polymorphic advantages: improve code reuse and maintainability;Copy the code

Object oriented and process oriented evolution

Xiao Ming goes to the restaurant to have a meal. Face the process: Xiao Ming goes to the restaurant to see the menu and order the meal. Face the object: 1. 2. Relationship between restaurant (menu) research objects: Xiao Ming. Go to the dining room, Xiao Ming. Look at the menu, Xiao Ming. Order, Xiao Ming. EatCopy the code

Class and object concepts

1. Something concrete; (such as: Xiaoming, Husky) class: the abstraction of a class of transactions (class is to pull out the common attributes of all objects); (e.g., human, dog)Copy the code

Object creation

1, let obj = {name:" xiaoming "}; 2, constructor let obj = new Object(); Name = "obj "; Object.create() // There is _proto_ after the Object is createdCopy the code

The factory pattern

Features: Factory pattern improves code reuse. function Person(name,hobby){ let obj = {}; // add raw material obj.name = name; obj.hobby = function(){ console.log(hobby); }; // return obj; } let zhangsan = Person(' zhangsan ',' like '); Let lisi = Person(' lisi ',' like basketball ');Copy the code

New operator

New operator features: 1, new to execute the function; 2. Automatically create empty objects; 3. This is bound to an empty object. Function Person(name,hobby){this.name = name; function Person(name,hobby){this.name = name; This.hobby = function(){console.log(hobby)}} let zhangsan = new Person(' zhangsan ',' like ')Copy the code

The constructor

The constructor is called by new. This refers to the instantiated object (properties and methods are instantiated objects). 2. Capitalize constructor; Static member Static properties and methods (belonging to the class itself). When we need to count the number of times we instantiate all objects, we choose properties of the class, not properties of the instantiated object (this). function Person(name){ this.name = name; This.hobby = function(){console.log(" like basketball "); } } Person.num = 0; Let Zhangsan = new Person(" zhangsan "); Person.num++; Let lisi = new Person(" lisi "); Person.num++; Console. log(person.num) //2 Constructor The performance constructor creates a space in the memory address each time it creates an object. It will be easier to consume memory, and it will consume performance. Solution: The public space houses the public method, and the public method does not need to reinvent the space.Copy the code

Prototype prototype

Features: 1. The properties and behaviors of objects instantiated by new come from two parts, one from the constructor and the other from the prototype. When you declare a function, you also declare a prototype. A prototype is itself an object. 4. Object attribute method search rules; function Person(name){ this.name = name; } public space prototype person.prototype. hobby = function(){console.log(" like basketball "); } let zhangsan = new Person(" zhangsan "); Let lisi = new Person(" lisi "); Zhangsan._proto_ === Person. Prototype; // True the inherent attribute of the prototype constructor. Constructor is used to instantiate the object. You can also use constructor to judge a type. let str = "abc"; str.constructor === String; //true Person.prototype.constructor === Person; //true zhangsan.constructor === Person; //true Overrides the constructor property in Person.prototype and needs to be redirected. Person.prototype = { constructor:Person, hobby:function(){ console.log("hobby") } }Copy the code

Prototype constructors and object relationships

The factory schema contrast constructor

1. The problem of object recognition is not solved. That is, all instances created are of type Object. (It is not clear which object is the instance). 2, no prototype, take up memoryCopy the code

Prototype chain

In javascript, the inheritance relationship between objects is that the prototype Object points to the parent Object until it points to the Object Object. In this way, a prototype pointing chain is formed, which becomes the prototype chain. 1. When accessing an attribute or method of an object, the system first looks up whether the attribute or method exists on the object itself. If so, the system uses its own attribute or method. If it doesn't exist, look for it in the prototype object of the constructor that created it, and so on until you find it. If not found in the top-level object, undefined is returned. Ptototype = null; ptotoType = null; ptototype = null;Copy the code

inheritance

Inheritance: A subclass inherits all attributes and behaviors of its parent class, without affecting the parent class. Prototype chain inherits advantages: the parent class method can reuse shortcomings: 1, the parent of all reference properties will be Shared subclass, change the subclasses reference properties, other children will be affected, 2 subclasses can't to participate the superclass (superclass) constructor inherits advantages: 1, the parent class reference properties are not children share 2 and parents to children and disadvantages: Subclass instances can no longer access method combination inheritance advantages: 1. Methods on the parent prototype can be reused 2. Subclasses can pass arguments to the parent class 3. Creating a subclass prototype. Var Link = function(){}; Link.prototype = Parent.prototype; Child.prototype = new Link(); Advantages: 1. Call the parent constructor.... only onceCopy the code