Detailed explanation of JS object inheritance use cases

This time I will bring you a detailed explanation of JS object inheritance use cases. What are the precautions for using JS object inheritance? The following is a practical case, let's take a look.

Modifying objects that you do not own is a good solution to certain problems. In a "benign" state, it usually does not happen; it may happen because the developer encountered a problem and then solved it by modifying the object. Nonetheless, there is always more than one solution to a known problem. Much of computer science knowledge has evolved to solve difficult problems in statically typed language environments, such as Java. There may be methods, so-called design patterns, that do not modify these objects directly but extend them.

Outside of JS, the most popular form of object extension is inheritance. If one type of object already does most of what you want, inherit from it and then add some functionality. There are two basic forms in JS: object-based inheritance and type-based inheritance.

In JS, inheritance still has some big limitations. First, you cannot inherit from DOM or BOM objects. Secondly, due to the intricate relationship between the array index and the length property, inheriting from Array will not work properly.

Object-based inheritance

In object-based inheritance, which is often called prototypal inheritance, one object inherits another object without calling the constructor. The ES5 Object.create() method is the simplest way to implement this kind of inheritance. For example:

var person = {  name: 'Nicholas',  sayName: function () {    console.log(this.name);
  }
};var myPerson = Object.create(person);
myPerson.sayName(); // "Nicholas"

This example creates a new object myPerson, which inherits from person. This inheritance method is just like the prototype of myPerson being set to person. From then on, myPerson can access the attributes and methods of person without having to redefine the variable with the same name on a new object. For example, redefining myPerson.sayName() will automatically cut off access to person.sayName(): The

myPerson.sayName = function () {  console.log('Anonymous');
};
myPerson.sayName(); // "Anonymous"person.sayName(); // "Nicholas"

Object.create() method can specify a second parameter, and the properties and methods in the parameter object will added to the new object. For example:

var myPerson = Object.create(person, {  name: {    value: 'Greg'
  }
});
myPerson.sayName(); // "Greg"person.sayName(); // "Nicholas"

The myPerson object created in this example has its own name attribute value, so calling sayName() displays "Greg" instead of "Nicholas".

Once a new object is created in this way, the new object can be modified at will. After all, you are the owner of the object, and you can add methods, overwrite existing methods, or even delete methods (or prevent their access) in your project.

Type-based inheritance

Type-based inheritance works in the same way as object-based inheritance. It inherits from an existing object. The inheritance here depends on the prototype. Therefore, type-based inheritance is implemented through constructors, not objects. This means that the constructor of the inherited object needs to be accessed. Compared with native types in JS, type-based inheritance is most appropriate when developers define constructors. At the same time, type-based inheritance generally requires two steps: first, prototype inheritance; then, constructor inheritance. Constructor inheritance is to pass in the newly created object as the value of this when calling the constructor of the super class. For example:

function Person (name) {  this.name = name;
}function Author (name) {
  Person.call(this, name); // 继承构造器}
Author.prototype = new Person();

In this code, the Author type inherits from Person. The attribute name is actually managed by the Person class, so Person.call(this, name) allows the Person constructor to continue defining the attribute. The Person constructor is executed on this, which points to an Author object, so the final name is defined on this Author object.

Compared with object-based inheritance, type-based inheritance is more flexible when creating new objects. Defining a type allows you to create multiple instance objects, all of which inherit from a common superclass. The new type should clearly define the properties and methods it needs to use, and they should be completely different from those in the superclass.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to avoid null comparison in web development

##Why you need to avoid using global variables in web development

The above is the detailed content of Detailed explanation of JS object inheritance use cases. For more information, please follow other related articles on the PHP Chinese website!