JavaScript object oriented and prototype

JavaScript object oriented and prototype

I. Preface

ECMAScript has two development modes: 1. Functional (programming), 2. Object oriented (OOP).
Object oriented language has a sign, that is, the concept of class, through which any number of objects with the same properties and methods can be created. However, ECMAScript does not have the concept of a class, so its objects are different from those in class based languages.

2, The basic way to create an object: create an object, and then create new properties and methods for the object

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Object oriented and prototype</title>
</head>
<body>
    <script type="text/javascript">
        var obj = new Object();
        obj.name = 'Fat Tong';
        obj.sex = 'female';
        obj.sayHello = function (){
            return 'Hello, I am'+this.name+'Gender'+this.sex;
        };
        alert(obj.sayHello());
    </script>
</body>
</html>

Disadvantage: if you want to create a similar object, you will output a lot of code, and instance objects will generate a lot of duplicate code.

3, Factory pattern -- to solve the problem of a large number of duplicate instantiated objects

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Object oriented and prototype</title>
</head>
<body>
    <script type="text/javascript">
        function Student(name,sex){
            var obj = new Object();
            obj.name = name;
            obj.sex = sex;
            obj.sayHello = function (){
                return 'Hello, I am'+this.name+'Gender'+this.sex;
            };
            return obj;
        }
        var student1 = Student('Fat Tong','female');
        var student2 = Student('Handsome','male');
        alert(student1.sayHello());      //Hello, everyone. I'm Pang Tong, gender female
        alert(student2.sayHello());      //Hello, everyone. I'm shuaitong, male and female
    </script>
</body>
</html>

Disadvantages:
The factory pattern solves the problem of re instantiation, but there is another problem, that is, the problem of identification. It is impossible to figure out which object they are.

4, Use constructors (constructor) to create specific objects

A constructor (constructor) can be used in ECMAScript to create specific objects. Type in Object object Object.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Object oriented and prototype</title>
</head>
<body>
    <script type="text/javascript">
        function Student(name,sex){
            this.name = name;
            this.sex = sex;
            this.sayHello = function (){
                return 'Hello, I am'+this.name+'Gender'+this.sex;
            };
        }
        var student1 = new Student('Fat Tong','female');
        var student2 = new Student('Handsome','male');
        alert(student1.sayHello());      //Hello, everyone. I'm Pang Tong, gender female
        alert(student2.sayHello());      //Hello, everyone. I'm shuaitong, male and female

        alert(typeof student1);               //object
        alert(student1 instanceof Student);    //true clearly identifies students
    </script>
</body>
</html>

Advantage:
The method of using constructors not only solves the problem of repeated instantiation, but also solves the problem of object recognition

5, The method of using constructor is different from that of using factory pattern

  1. The constructor method does not explicitly create an object (new Object()).
  2. Assign properties and methods directly to this object.
  3. There is no renewal statement.

6, Methods using constructors, there are some specifications

  1. The function name and the instantiation construct name are the same and uppercase (not mandatory, but this helps distinguish between a constructor and a normal function).
  2. To create an object through a constructor, you must use the new operator.

Tags: Javascript ECMAScript Programming

Posted on Wed, 01 Apr 2020 21:07:50 -0700 by lizard