Some advanced concepts and techniques of object-oriented in ES5

  1. Constructor: A constructor is a special function that is used to create an object. In ES5, you can use constructors to define classes and use the new operator to create objects. For example:
function Person(name, age) {
  this.name = name;
  this.age = age;
}

var person1 = new Person('John', 30);
var person2 = new Person('Jane', 25);

  1. Prototype chain: The prototype chain is a mechanism for implementing inheritance. In ES5, every object has a reference to its prototype. If we try to access a property or method of an object, but the object itself doesn't have that property or method, JavaScript looks up the object's prototype to see if it has that property or method. If not found, keep looking for the archetype's archetype until one is found. For example:
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

var person1 = new Person('John', 30);
person1.sayHello(); // 输出:"Hello, my name is John"

  1. Inheritance: Inheritance is an important concept in object-oriented programming. In ES5, inheritance can be achieved using the prototype chain. For example:
function Animal() {
  this.type = 'animal';
}

Animal.prototype.sayType = function() {
  console.log('I am a ' + this.type);
};

function Dog(name, age) {
  Animal.call(this);
  this.name = name;
  this.age = age;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

var dog1 = new Dog('Lucky', 2);
dog1.sayHello(); // 输出:"Hello, my name is Lucky"
dog1.sayType(); // 输出:"I am a animal"

In this example, we define an Animal class with a sayType method. Then we define a Dog class, which inherits from Animal, and also has a sayHello method. We use the Object.create method to create the prototype of Dog so that it inherits from the prototype of Animal. Finally, we replaced the original prototype with the prototype of Dog, so that Dog has all the properties and methods of Animal, and can add its own properties and methods.

  1. Prototype methods vs instance methods: In ES5, methods can be defined on prototypes or on instances. If a method is defined on the prototype, then all instances can use the method. If a method is defined on an instance, each instance will have its own method, but this will take up more memory. For example:
// 原型方法
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

var person1 = new Person('John', 30);
var person2 = new Person('Jane', 25);
person1.sayHello(); // 输出:"Hello, my name is John"
person2.sayHello(); // 输出:"Hello, my name is Jane"

// 实例方法
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log('Hello, my name is ' + this.name);
  };
}

var person1 = new Person('John', 30);
var person2 = new Person('Jane', 25);
person1.sayHello(); // 输出:"Hello, my name is John"
person2.sayHello(); // 输出:"Hello, my name is Jane"

In this example, we define a Person class, and the sayHello method can be defined on the prototype or on the instance. If it is defined on the prototype, then all instances can use this method; if it is defined on the instance, then each instance has its own method.

  1. Static methods of classes: In ES5, static methods can be implemented as properties or methods of functions. Static methods are methods defined on the class itself, not on instances. For example:
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.sayHelloToAll = function(people) {
  people.forEach(function(person) {
    console.log('Hello, ' + person.name);
  });
};

var person1 = new Person('John', 30);
var person2 = new Person('Jane', 25);
Person.sayHelloToAll([person1, person2]); // 输出:"Hello, John" 和 "Hello, Jane"

In this example, we define a Person class, and also define a static method sayHelloToAll, which can accept an array of Person instances and greet each Person instance. This method is defined on the Person class itself, not on an instance.

Guess you like

Origin blog.csdn.net/weixin_53964193/article/details/132223734