The path to JavaScript prototype

The path to JavaScript prototype
Introduction recently I have been studying advanced JavaScript tutorials on Frontend Masters. Kyle has introduced his concept of "OLOO" (Object Linking to other objects. This reminds me of a blog post posted by Keith Peters a few years ago about learning a world without "new". It explains how to use prototype inheritance to replace constructors. Both are purely prototype codes. The Standard method has been learning to create an object in JavaScript by creating a constructor and then adding a method to The prototype object of The function. Function Animal (name) {this. name = name;} Animal. prototype. getName = function () {return this. name ;}; The subclass solution is to create a new constructor and set its prototype to the prototype of its parent class. Call the constructor of the parent class and set this as its context object. Copy the code function Dog (name) {Animal. call (this, name);} Dog. prototype = Object. create (Animal. prototype); Dog. prototype. speak = function () {return "woof" ;}; var dog = new Dog ("Scamp"); console. log (dog. getName () + 'says '+ dog. speak (); copy The Prototypal Way. If you have been familiar with any prototype language, you may think The above example looks strange. I have tried the I/O language-a prototype-based language. In the prototype language, you can create a prototype by cloning an object and adding attributes and methods. Then you can clone the created prototype to create a usable instance or clone it to create another prototype. The above example in IO looks like the following: copy the code Animal: = Object cloneAnimal getName: = method (name) Dog: = Animal cloneDog speak: = method ("woof ") dog: = Dog clonedog name: = "Scamp" writeln (dog getName (), "says", dog speak () copy The Good News in JavaScript, you can also use this encoding method! The Object. create Function is similar to the clone function in IO. The following is a pure prototype implementation in JavaScript. Except for syntax differences, it is the same as the IO version. Copy the code Animal = Object. create (Object); Animal. getName = function () {return this. name ;}; Dog = Object. create (Animal); Dog. speak = function () {return "woof" ;}; var dog = Object. create (Dog); dog. name = "Scamp"; console. log (dog. getName () + 'says '+ dog. speak (); copy The Bad News. When using constructors, The JavaScript engine is optimized. Two different operations are tested on JSPerf, and the prototype-based implementation is more than 90 times slower than the constructor method. Perf Graph also, if you use a framework similar to Angular, you must use constructors when creating controllers and services. The import class ES6 introduces a new class syntax. However, it is only the syntactic sugar of the standard constructor method. The new syntax looks more like Java or c #, but behind the scenes is still creating prototype objects. This can confuse people from class-based languages, because when creating a prototype, they want the class to have the same attributes as their language. Copy the code class Animal {constructor (name) {this. name = name;} getName () {return this. name ;}} class Dog extends Animal {constructor (name) {super (name) ;}speak () {return "woof ";}} var dog = new Dog ("Scamp"); console. log (dog. getName () + 'says '+ dog. speak ());