【JavaScript】——"Re-learning front-end" 03 Objects—Does JavaScript need to simulate object-oriented

JavaScript itself is object-oriented , and what these "simulated object-oriented" actually do is " simulated
class-based object-oriented ".

JavaScript founder Brendan Eich introduced language features such as new and this on the basis of "prototype runtime ", making it "looks more like Java in syntax", and Java is one of the representative class-based object-oriented languages.

In different programming languages, designers also use various language features to abstractly describe objects .
1. The most successful genre is to use " classes " to describe objects, which gave birth to popular programming
languages ​​such as C++ and Java. This genre is called class-based programming languages .

2. There is also a prototype-based programming language , which uses prototypes to describe objects. Our JavaScript is one of them.

"Class-based" programming: 

"Class-based" programming advocates the use of a development model that focuses on categories and relationships between classes. In such languages, there are always classes first
, and then an object is instantiated from the class . Relationships such as inheritance and composition may be formed between classes and classes . Classes are often integrated with the language's type system to form certain compile-time capabilities.

"Prototype-based" programming:

"Prototype-based" programming seems to be more advocating that programmers pay attention to the behavior of a series of object instances , and then care about how to divide these objects into the nearest prototype objects with similar usage, rather than dividing them into classes.

Prototype-based object-oriented systems create new objects by " copying " .

Some language implementations also allow copying a null object. This is essentially creating a brand new object.

There are two ways to realize the " copy operation " of the prototype system :

        1. One is not to really copy a prototype object, but to make the new object hold a reference to a prototype ;
        2. The other is to actually copy the object, and the two objects are no longer related.
Historically prototype-based languages ​​have thus spawned two schools of thought, and JavaScript clearly chose the former.

---

JavaScript's prototype:

The prototype system can be said to be quite simple, I can use two generalizations:
        1. If all objects have a private field [[prototype]], it is the prototype of the object;
        2. To read a property, if the object itself does not, it will continue to access the object until the prototype is empty or found.

Since ES6, JavaScript has provided a set of built-in functions for more direct access to manipulating prototypes. The three methods are:
        Object.create creates a new object according to the specified prototype, and the prototype can be null;
        Object.getPrototypeOf obtains the prototype of an object;
        Object.setPrototypeOf sets the prototype of an object.

//下面的代码展示了用原型来抽象猫和虎的例子。

//创建一个“猫”对象
var cat = {
     say(){
         console.log("meow~");
     },
     jump(){
         console.log("jump");
     }
}
//根据猫做了一些修改创建了虎
var tiger = Object.create(cat, {
     say:{
         writable:true,
         configurable:true,
         enumerable:true,
         value:function(){
             console.log("roar!");
         }
     }
})

//可以用Object.create 来创建另外的猫和虎对象
//我们可以通过“原始猫对象”和“原始虎对象”来控制所有猫和虎的行为。
var anotherCat = Object.create(cat);

anotherCat.say();

var anotherTiger = Object.create(tiger);

anotherTiger.say();

What exactly does the new operation do:

The new operation accepts a constructor and a set of call parameters, and actually does several things:
        1. Create a new
object with the prototype attribute of the constructor (note the difference from the private field [[prototype]]) as the prototype;
        2. Pass this and call parameters to the constructor and execute;
        3. If the constructor returns an object, return it, otherwise return the object created in the first step.

The behavior of new objectively provides two ways,

        One is to add properties to the constructor ,

        The second is to add properties to the prototype property of the constructor .

The following code shows two ways of simulating a class with a constructor :

//第一种方法是直接在构造器中修改 this，给 this 添加属性。
function c1(){
     this.p1 = 1;
     this.p2 = function(){
         console.log(this.p1);
     }
} 
var o1 = new c1;
o1.p2();


//第二种方法是修改构造器的 prototype 属性指向的对象
//它是从这个构造器构造出来的所有对象的原型。
function c2(){
}
c2.prototype.p1 = 1;
c2.prototype.p2 = function(){
     console.log(this.p1);
}

var o2 = new c2;
o2.p2();

Classes in ES6 - class:

Basic writing of the class:

class Rectangle {
     constructor(height, width) {
         this.height = height;
         this.width = width;
     }
     // Getter
     get area() {
         return this.calcArea();
     }
     // Method
     calcArea() {
         return this.height * this.width;
     }
}

We create getters through get/set keywords, and create methods through parentheses and curly braces. Data members are best
written in constructors.

Classes provide inheritance capabilities.

//创造了 Animal 类
class Animal {
     constructor(name) {
         this.name = name;
     }
     speak() {
         console.log(this.name + ' makes a noise.');
     }
}

//通过 extends 关键字让 Dog 继承 Animal 
class Dog extends Animal {
     constructor(name) {
         super(name); // call the super class constructor and pass in the name parameter
     }

     speak() {
         console.log(this.name + ' barks.');
     }
}


//调用子类的 speak 方法获取了父类的 name。
let d = new Dog('Mitzie');
d.speak(); // Mitzie barks.

So when we use the idea of ​​​​classes to design code, we should try to use class to declare classes , instead of using the old syntax
to simulate objects with functions.