Object Oriented Programming

Object oriented programming idea

1, Face process: pay attention to the steps of solving the problem, analyze each step required by the problem, and call the functions in turn;

2, Face object: it is a programming idea. Encapsulating data and programs for processing data into objects;

3, Features of facial objects: abstraction, inheritance, encapsulation and polymorphism

Advantages: improve code reusability and maintainability;



Javascript is an object-based language, almost everything is an object;

1. Object creation method:

  • Literal creation

  • new Object() create

  • Object. Create: create the prototype of the object;

Factory mode

1, Factory mode

Factory mode solves the problem of code reuse;

Objects and classes

I. object: a specific thing; (e.g. Xiao Ming, Dingdang cat)

Class: the abstraction of a class of things; (e.g. humans, cats)

##new operator

  • new features: 1 new executes function 2 Automatically create an empty object; 3.this is bound to an empty object; 4. Implicitly return this; five
  • Transform the factory mode through new


  • The constructor should call this through new to point to the instantiated object
  • Convention constructor initial capital
  • Static properties and methods
    • this in static method;

##Constructor performance

  • Public space storage method

##Constructor prototype


  • The properties and behaviors of the object instantiated through 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.
  • The prototype itself is an object.
  • Object attribute method search rules;

Prototype constructor and object relationship

Constructor factory pattern comparison

1. But it does not solve the problem of Object recognition. That is, all instances created are of type Object. (it is not clear which Object is the instance)

2. No prototype, occupying memory.

Prototype chain

In JavaScript, the inheritance relationship between objects points to the parent Object through the prototype Object until it points to the Object object, which forms a prototype pointing chain, which is called the prototype chain;

1. When accessing the property or method of an object, you will first find out whether the property or method exists on the object itself. If so, use the property or method of the object itself. If it doesn't exist, look in the prototype object of the constructor of the created object, and so on until it is found. If it cannot be found in the top-level object, it returns undefined.

2. The top level of the prototype chain is the prototype Object of the Object constructor, which is given to Object Prototype added properties or methods can be used by all data type objects except null and undefined.

Constructor inheritance

  • Inheritance: the subclass inherits all the properties and behaviors of the parent class, and the parent class is not affected.
  • Objective: to find the commonness between classes and simplify the code
function Person(name){
    this.name = name;
    this.eyes = "Two";
    this.legs = "Two";
function Student(name){
    this.className = "Class two";
let newPerson = new Student("Zhang San");
  • Simple prototype inheritance, which affects the parent class;

    function Person(name){
        this.name = name;
        this.eyes = "Two";
        this.legs = "Two";
    function Student(name){
        this.className = "Class two";
    Student.prototype = Person.prototype  //Direct assignment

Deep copy inheritance of prototype

  • Value and address transmission

    • Basic data types: Number, String, Boolean, Null, Undefined
    • Complex data type / reference data type: Array, Date, Math, RegExp, Object, Function, etc
  • Insufficient JOSN serialization

    If the copy object contains a function, or undefined Equivalent, this method will have problems
  • Light copy and deep copy

    //Recursive deep copy
    function deepCopy(obj){
        let newObj = Array.isArray(obj)?[]:{};
        for(let key in obj){
                if(typeof obj[key] == "object"){
                    newObj[key] = deepCopy(obj[key]);
                    newObj[key] = obj[key];
        return newObj;

###Inheritance of prototype

  • Deep copy inheritance

  • Inheritance combination

    function Dad(){
        this.name = "Zhang San";
    Dad.prototype.hobby = function(){
        console.log("Like basketball");
    function Son(){
    let F = function(){}
    F.prototype = Dad.prototype;
    Son.prototype = new F();
    Son.prototype.constructor = Son;
    let newSon = new Son();

    Packaging object

    • Except for null and undefined, basic types have their own wrapper objects: String Number Boolean
    • The wrapper object gives all the properties and methods to the basic type, and then the wrapper object disappears


1) object oriented programming

2) factory mode

3) new operator

3) constructor

4) prototype

5) face object and face process programming

6) classes and objects

Tags: Javascript ECMAScript

Posted by ChrisFlynn on Sat, 30 Apr 2022 01:40:31 +0300