This article describes the prototype pattern of JavaScript design pattern. Share it for your reference, as follows:
From the perspective of design pattern, prototype pattern is a pattern used to create objects. If you need to create an object, one method is to specify its type first, and then create this object through a class. Another method is to create it through a prototype. You don’t have to care about the specific type of the object, but find an object and then create an identical object through cloning.
ES5Provided(obj)Methods to clone objects, but are not supported(obj)In the browser of the method, you can use the following code:
= || function(obj) {
function Func() {};
= obj;
return new Func();
}
1. Prototype inheritance in JavaScript:
1. Most of the data is objects;
JavaScript has two type mechanisms: basic type and object type. Basic types includeundefined、number、boolean、string、function、object。
The original intention of JavaScript designers is that except undefined, everything should be objects. In order to achieve this goal, the basic data types of number, boolean, and string are transformed into object type data through the corresponding packaging classes Number, Boolean, and String.
The root object in JavaScript isObject,An object is an empty object. Every object in JavaScript is actually fromThe object cloned,Objects are their prototypes.
ES5 providesgetPrototypeOfTo view the prototype of the object,(Any object) ==All return true.
2. To get an object, instead of instantiating the class, find an object as a prototype and clone it;
JavaScript does not have the concept of a class, and the new operator is not a class, but a constructor. When using the new operator to create an object, it is actually a first cloning process.Object, perform some additional operations.
3. The object will remember its prototype;
In fact, we cannot say that the object has a prototype, but we can only say that the object's constructor has a prototype. JavaScript provides an object with a name called__proto__Properties, which point to its constructor prototype by default,__proto__Properties are the links that connect objects to the prototype of the constructor, such as:person.__proto__ == 。
4. If the object cannot respond to a request, it delegates the request to its own prototype.
This is the essence of prototype inheritance. When an object cannot respond to a request, it will pass the request along the prototype chain until it encounters an object that can handle the request. However, the prototype chain is not infinitely long, it will only be foundUntil the object, becauseThe prototype isnull, so the request cannot find the object that can be processed, returnundefined。
2. The future of prototype inheritance
Using prototype inheritance seems to reflect the essence of the prototype pattern better, but throughCreating objects is not efficient and is usually slower than creating objects through constructors.
ES6Bringing new Class syntax, this makes JavaScript look like a class-based language, but behind it is still the creation of objects through prototype mechanisms.
class Person {
constuctor(name) {
= name;
}
getName() {
return ;
}
}
class Student extends Person {
constuctor(name) {
super(name);
}
sayHello() {
alert(“Hello”);
}
}
var student = new Student(“Alice”);
();
For more information about JavaScript, please view the special topic of this site: "JavaScript object-oriented tutorial》、《Summary of JavaScript switching effects and techniques》、《Summary of JavaScript search algorithm skills》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques》、《JavaScript traversal algorithm and skills summary"and"Summary of JavaScript mathematical operations usage》
I hope this article will be helpful to everyone's JavaScript programming.