This is the 7th day of my participation in Gwen Challenge

In traditional javascript, there are only objects, not classes. It is an object-oriented language based on prototypes. Prototype objects typically share their properties with new objects. This writing method relative to other traditional object-oriented language, there is a unique feeling foot! It’s very confusing!

1. Class class vs. constructor

1.1 Constructor implementation

If you want to generate an instance of an object, you define a constructor and do so using the new operator.

// The function name is the same as the instantiated constructor name and is capitalized (optional, but it helps to distinguish constructors from normal functions)
function Person(name,age) {
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
  return "My name is." + this.name + "This year" + this.age + "Old";
}
var obj = new Person("Xiao Ming".12); // To create an object through a constructor, you must use the new operator
console.log(obj.say()); // My name is Xiao Ming and I am 12 years old
Copy the code

1. When a constructor is used and the new constructor () is used, the background will implicitly execute new Object() to create an Object; 2. Apply the scope of the constructor to the new Object(the Object created by new Object()), and this inside the function represents the Object from the new Object(). 3. Execute constructor code. 4. Return a new object (background directly);

1.2 Class implementation
class Person{ // define a class named Person
  constructor(name,age){ // constructor is a constructor that receives arguments
    this.name = name; // This represents the instance object
    this.age = age;
  }
  say(){ // This is a class method, be sure not to add function
    return "My name is." + this.name + "This year"+this.age+"Old"; }}var obj = new Person("Xiao Ming".12);
console.log(obj.say()); // My name is Xiao Ming and I am 12 years old
Copy the code

When declaring a method in a class, do not add the function keyword. 2. Do not separate methods with commas; otherwise, errors will be reported.

console.log(typeof Person); // function
console.log(Person === Person.prototype.constructor); // true
Copy the code

You can see from the above code that a class is essentially a function. The class itself points to the constructor. So you can assume that classes in ES6 are just another way of writing constructors!

console.log(Person.prototype); // The output is an object
Copy the code

This code shows that the prototype property of the constructor is still present in ES6 classes. Virtually all of a class’s methods are defined on the class’s Prototype property. Code proof

Person.prototype.say=function(){	// Define a method with the same name as in the class. Successful coverage!
  return "Ha ha, my name is." + this.name + "This year"+ this.age + "Old";
}
var obj=new Person("Little art".20);
console.log(obj.say()); // Ha ha, my name is Xiaoyi, 20 years old
Copy the code

2. Class add method

  1. The Prototype property adds methods to the class

Person.prototype.addFn=function(){
  return "I'm using a new method in Prototype called addFn.";
}
var obj=new Person("Xiao Ming".12);
console.log(obj.addFn()); // I'm using a new prototype method called addFn
Copy the code
  1. The Object.assign method dynamically adds methods to a class
Object.assign( Person.prototype,{
  getName:function(){
    return this.name;
  },
  getAge:function(){
    return this.age; }})var obj = new Person("Small strong".10);
console.log(obj.getName()); / / jack Bauer
console.log(obj.getAge()); / / 10
Copy the code

3. The constructor method

The constructor method is the default method for the class’s constructor and is automatically called when an object instance is generated using the new command.

class Box{
  constructor(){
    console.log("La la la, today is the Lantern Festival."); // This line is executed when the object is instantiated.}}var obj = new Box();
Copy the code

A constructor method is implicitly generated if it is not explicitly defined. So constructors exist even if you don’t add them. The constructor method returns the instance object this by default, but you can also specify that the constructor method returns an entirely new object that is not an instance of that class.

class Desk{
  constructor(){
    this.wolf = "I'm grey Wolf."; }}class Box{
  constructor(){
    return new Desk(); // Instead of using this, return a brand new object}}var animal = new Box();
console.log(animal.wolf); // I am grey Wolf
Copy the code

Properties defined in Constructor can be called instance properties (defined on this object), and properties declared outside constructor that are defined on stereotypes can be called stereotype properties (defined on class). The hasOwnProperty() function is used to determine whether an attribute is an instance attribute. The result is a Boolean value, true meaning instance property, false meaning not instance property. The IN operator returns true if a given property is accessible through an object, whether it exists in an instance or stereotype.

class Box{
  constructor(num1,num2){
    this.num1 = num1;
    this.num2 = num2;
  }
  sum(){
    returnnum1 + num2; }}var box = new Box(12.88);
console.log(box.hasOwnProperty("num1")); // true
console.log(box.hasOwnProperty("num2")); // true
console.log(box.hasOwnProperty("sum")); // false
console.log("num1" in box); // true
console.log("num2" in box); // true
console.log("sum" in box); // true
console.log("say" in box); // false
Copy the code

All instances of a class share a stereotype object, so the proto attribute is equal.

class Box{
  constructor(num1,num2){
    this.num1 = num1;
    this.num2 = num2;
  }
  sum(){
    returnnum1 + num2; }}Box1 and box2 are both instances of Box. Their __proto__ both refer to Box's prototype
var box1 = new Box(12.88);
var box2 = new Box(40.60);
console.log(box1.__proto__ === box2.__proto__); // true
Copy the code

Proto can also be used to add methods to a class. Rewriting a prototype using the proto attribute of an instance will change the original definition of the Class and affect all instances, so it is not recommended!

class Box{
  constructor(num1,num2){
    this.num1 = num1;
    this.num2 = num2;
  }
  sum(){
    returnnum1 + num2; }}var box1 = new Box(2.4);
var box2 = new Box(1.5);
box1.__proto__.sub=function(){
  return this.num2 - this.num1;
}
console.log(box1.sub()); / / 2
console.log(box2.sub()); / / 4
Copy the code

4. There is no variable promotion in class

Because ES6 does not elevate class declarations to code headers, you need to define them before you use them. ES5, however, has variable promotion, which can be used first and then defined.

// ES5 can be used before definition, there is variable promotion
new A();
function A(){}// ES6 can not be used before definition, there is no variable promotion error
new B(); // B is not defined
class B{}Copy the code