1 Inheritance in ES6
ES6 uses the class keyword to define classes and the extends keyword to inherit classes. The super method must be called in the constructor constructor of the subclass to obtain the "this" object of the parent class. When calling super, you can pass parameters to the parent constructor. Subclasses can directly use the properties and methods of the parent class through the super object, or they can override the definitions in the parent class through properties or methods with the same name.
class Father { constructor () { this.surname = '王' this.money = Infinity } sayName () { console.log(`My surname is ${this.surname}.`) } } class Son extends Father { constructor (firstname) { super() this.firstname = firstname } sayName () { console.log(`My name is ${super.surname}${this.firstname}.`) } sayMoney () { console.log(`I have ${this.money} money.`) } } let Sephirex = new Son('撕葱') Sephirex.sayName() Sephirex.sayMoney()
Classes and inheritance in ES6 are essentially syntax sugar implemented using prototypes. The methods defined in the class are equivalent to defining methods on the prototype. Defining properties in the constructor method is equivalent to the constructor mode, and the super method is equivalent. To call the constructor of the parent class in the subclass. Let's continue to discuss the implementation of inheritance in ES5.
2 Prototype chain inheritance
The basic pattern of prototype chain inheritance is to let the prototype object of the subtype point to an instance of the parent type, and then extend methods for its prototype.
function Person (name) { this.name = name this.likes = ['apple', 'orange'] } Person.prototype.sayName = function () { console.log(this.name) } function Worker () { this.job = 'worker' } Worker.prototype = new Person() Worker.prototype.sayJob = function () { console.log(this.job) } let Tom = new Worker() let Jerry = new Worker() Tom.likes.push('grape') console.log(Jerry.likes) // [ 'apple', 'orange', 'purple' ]
Principle: In the previous article, we discussed __proto__ and prototype. There is a __proto__ pointer in the instance of the subclass, which points to the prototype object of its constructor. The prototype of the subclass constructor points to an instance of the parent class, and the __proto__ in the parent class instance points to the prototype of the parent class constructor... In this way, a prototype chain is formed.
It should be noted that even if the reference type attribute in the parent class is defined in the constructor, it will still be shared by the subclass instance. This is because the prototype of the subclass constructor is actually an instance of the parent class, so the instance properties of the parent class naturally become the prototype properties of the subclass, and the prototype properties of reference type values are shared between instances.
Another problem with the prototype chain is that there is no way to pass parameters to the constructor of the parent class without affecting all object instances. Like the above example, when using Worker.prototype = new Person() to point the subclass prototype to the parent class instance, if initialization parameters are passed in, the instance name attributes of all subclasses will be the passed in parameters. If no parameters are passed here, there will be no way to pass parameters to the parent class constructor later. Therefore, the prototype chain inheritance pattern is rarely used alone.
3 Borrowing constructors
Borrowing constructors can solve the problem of shared reference type attributes. The so-called "borrowing" a constructor is to call the constructor of the parent class in the constructor of the subclass--don't forget that the pointer of this in the function has nothing to do with where the function is defined, but only with where it is called. We can use call or apply to call the constructor of the parent class on the subclass instance to obtain the properties and methods of the parent class, similar to calling the super method in the ES6 subclass constructor.
function Person (name) { this.name = name this.likes = ['apple', 'orange'] } function Worker (name) { Person.call(this, name) this.job = 'worker' } let Tom = new Worker('Tom') Tom.likes.push("grape") let Jerry = new Worker('Jerry') console.log(Tom.likes) // [ 'apple', 'orange', 'grape' ] console.log(Jerry.likes) // [ 'apple', 'orange' ]
The problem with simply using the constructor is that the function cannot be reused, and the subclass cannot obtain the attributes and methods on the parent class prototype.
4 Combined inheritance
Combined inheritance borrows constructors to define instance properties and uses prototype chain sharing methods. Combining inheritance combines the prototype chain mode and the borrowed constructor, thereby leveraging the strengths of both and making up for their respective shortcomings. It is the most commonly used inheritance mode in js.
function Person (name) { this.name = name this.likes = ['apple', 'orange'] } Person.prototype.sayName = function () { console.log(this.name) } function Worker (name, job) { Person.call(this, name) // 第二次调用 Person() this.job = job } Worker.prototype = new Person() // 第一次调用 Person() Worker.prototype.constructor = Worker Worker.prototype.sayJob = function () { console.log(this.job) } let Tom = new Worker('Tom', 'electrician') Tom.likes.push('grape') console.log(Tom.likes) // [ 'apple', 'orange', 'grape' ] Tom.sayName() // Tom Tom.sayJob() // electrician let Jerry = new Worker('Jerry', 'woodworker') console.log(Jerry.likes) // [ 'apple', 'orange' ] Jerry.sayName() // Jerry Jerry.sayJob() // woodworker
Combined inheritance is not without its shortcomings, that is, the inheritance process will call the parent class constructor twice. When the Person constructor is called for the first time, Worker.prototype will get two attributes: name and likes; when the Worker constructor is called, the Person constructor will be called again, and this time the instance attributes name and likes are directly created, covering Two properties with the same name in the prototype.
5 Prototypal inheritance
The following object function was recorded in an article by Douglas Crockford. Inside the object function, a temporary constructor is first created, then the passed in object is used as the prototype of this constructor, and finally a new instance of this temporary type is returned. Essentially, object() performs a shallow copy of the object passed into it. This inheritance method is equivalent to copying the properties and methods of the parent type to the subtype, and then adding respective properties and methods to the subtype.
This method will also share attributes of reference type values.
function object(o){ function F(){} F.prototype = o; return new F(); } let Superhero = { name: 'Avenger', skills: [], sayName: function () { console.log(this.name) } } let IronMan = object(Superhero) IronMan.name = 'Tony Stark' IronMan.skills.push('fly') let CaptainAmerica = object(Superhero) CaptainAmerica.name = 'Steve Rogers' CaptainAmerica.skills.push('shield') IronMan.sayName() // Tony Stark console.log(IronMan.skills) // [ 'fly', 'shield' ]
The Object.create() method is used to standardize prototypal inheritance in ES5. This method accepts two parameters: an object to be used as the prototype of the new object and (optionally) an object to define additional properties for the new object. Object.create() behaves the same as the object() method when one argument is passed in. The second parameter of the Object.create() method has the same format as the second parameter of the Object.defineProperties() method.
let CaptainAmerica = Object.create(Superhero, { name: { value: 'Steve Rogers', configurable: false } })
6 Parasitic inheritance
Parasitic inheritance is easy to understand. It is just a factory function that encapsulates the inheritance process. Since methods are defined directly on the object, methods added by parasitic inheritance cannot be reused.
function inherit(parent){ var clone = Object.create(parent) clone.name = 'hulk' clone.sayHi = function(){ console.log("hi") } return clone } let Hulk = inherit(Superhero) Hulk.sayName() // hulk Hulk.sayHi() // hi
7 Parasitic combined inheritance
As mentioned earlier, combined inheritance is the most commonly used inheritance method in js, but the disadvantage is that the constructor of the parent class will be called twice. Parasitic compositional inheritance can solve this problem and is considered the most ideal inheritance method for objects containing reference type values.
The basic idea of parasitic combined inheritance is that it is not necessary to call the constructor of the parent class in order to specify the prototype of the subclass. All that is needed is a copy of the prototype of the parent class. Parasitic compositional inheritance is to inherit properties by borrowing constructors, and then use parasitic inheritance to inherit the prototype of the parent class.
function inheritPrototype(subType, superType){ var prototype = Object.create(superType.prototype) prototype.constructor = subType subType.prototype = prototype } function Person (name) { this.name = name this.likes = ['apple', 'orange'] } Person.prototype.sayName = function () { console.log(this.name) } function Worker (name, job) { Person.call(this, name) this.job = job } inheritPrototype(Worker, Person) Worker.prototype.sayJob = function () { console.log(this.job) }
The above is the detailed content of What are the inheritance methods in js?. For more information, please follow other related articles on the PHP Chinese website!

Node.js excels at efficient I/O, largely thanks to streams. Streams process data incrementally, avoiding memory overload—ideal for large files, network tasks, and real-time applications. Combining streams with TypeScript's type safety creates a powe

The differences in performance and efficiency between Python and JavaScript are mainly reflected in: 1) As an interpreted language, Python runs slowly but has high development efficiency and is suitable for rapid prototype development; 2) JavaScript is limited to single thread in the browser, but multi-threading and asynchronous I/O can be used to improve performance in Node.js, and both have advantages in actual projects.

JavaScript originated in 1995 and was created by Brandon Ike, and realized the language into C. 1.C language provides high performance and system-level programming capabilities for JavaScript. 2. JavaScript's memory management and performance optimization rely on C language. 3. The cross-platform feature of C language helps JavaScript run efficiently on different operating systems.

JavaScript runs in browsers and Node.js environments and relies on the JavaScript engine to parse and execute code. 1) Generate abstract syntax tree (AST) in the parsing stage; 2) convert AST into bytecode or machine code in the compilation stage; 3) execute the compiled code in the execution stage.

The future trends of Python and JavaScript include: 1. Python will consolidate its position in the fields of scientific computing and AI, 2. JavaScript will promote the development of web technology, 3. Cross-platform development will become a hot topic, and 4. Performance optimization will be the focus. Both will continue to expand application scenarios in their respective fields and make more breakthroughs in performance.

Both Python and JavaScript's choices in development environments are important. 1) Python's development environment includes PyCharm, JupyterNotebook and Anaconda, which are suitable for data science and rapid prototyping. 2) The development environment of JavaScript includes Node.js, VSCode and Webpack, which are suitable for front-end and back-end development. Choosing the right tools according to project needs can improve development efficiency and project success rate.

Yes, the engine core of JavaScript is written in C. 1) The C language provides efficient performance and underlying control, which is suitable for the development of JavaScript engine. 2) Taking the V8 engine as an example, its core is written in C, combining the efficiency and object-oriented characteristics of C. 3) The working principle of the JavaScript engine includes parsing, compiling and execution, and the C language plays a key role in these processes.

JavaScript is at the heart of modern websites because it enhances the interactivity and dynamicity of web pages. 1) It allows to change content without refreshing the page, 2) manipulate web pages through DOMAPI, 3) support complex interactive effects such as animation and drag-and-drop, 4) optimize performance and best practices to improve user experience.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Dreamweaver CS6
Visual web development tools

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

Atom editor mac version download
The most popular open source editor

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
