Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis of class construction and inheritance in Js. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Define

Derived from Object

1.new Object: dynamically define properties after object creation, method var Car = new Object;Car.color = "red"; Car.showColor = function () {console.log (this.color);} / / if you want to inherit, you have to construct an empty object first and then inherit var Car1 = new Object; / / or = {} Car1.__proto__ = Car with _ _ object prototype chain

Use function construction

1. Factory function: generate a class within the function. The advantage is that instead of constructing an empty object + inheritance prototype chain, you can directly return a copy of an object, similar to the constructor function createCar () {/ / you can also pass the parameter creatCar (color) let car = new Object; car.color = "red" for this function. / / pass parameters: car.color = color car.showColor = function () {console.log (this.color);} return car;} var newCar = createCar () / / pass parameters: createCar ("red") / / but using the factory function, each function constructed will build a showColor method, which is not cost-effective / / so you can uniformly determine a method function showColor () {console.log (this.color);} function createCar () {for inheritance for all classes before the class factory function. Car.showColor = showColor;...} 2. Constructor method: similar to factory function method, using constructor method. The difference is that the attribute within the constructor can only be this.attrfunction Car (color,num) {this.color = color; this.num = num; this.showColor = function () {console.log (this.color);} this.drivers = new Array ("mike");} var car1 = new Car ("red", 1) / / Note that the properties and methods of Car itself cannot be accessed at this time, but can only be accessed after instantiation / / for example: console.log (new Car ("red", 1) .color) / / this means The constructor is really a class-like constructor rather than an instantiated object, and the js also / / has the traditional meaning of the object rather than the function object / / the in-class function showColor with the same Car as mode 1 will be constructed each time it is constructed, occupying unnecessary space var car2 = new Car ("green", 1) Car1.drivers.push ("kiki"); console.log (car2.drivers); / / there is no reference to the same array 3. Prototype method: similar to Object derivation, forming a prototype chain based on Object, and then binding methods and properties function Car () {}; Car.prototype.color = "red"; Car.prototype.showColor = function () {console.log (this.color);} / Car.prototyoe = {/ / put multiple bound functions into an anonymous class to write / / mathod1:function () {...} / / mathod2:function () {...}; / /} Car.prototype.drivers = new Array ("mike", "jhon"); var car1 = new Car (); / / you must create an instance to call the method access property var car2 = new Car (); car1.drivers.push ("bill"); console.log (car1.color); console.log (car2.drivers); / / so that the properties bound to arry all point to the same array object and belong to the reference. When you change the color of an instance, all the color changes together

Hybrid method:

1. Constructor + prototype: only attributes and intra-class arrays are constructed within the constructor, and the in-class function function Car (color) {this.color = color; this.drivers = new Array ("mike") is declared in a prototype way;} Car.prototype.showColor = function () {console.log (this.color);} var car1 = new Car (); / / you must create an instance to call the method access property var car2 = new Car () Car1.drivers.push ("bill"); console.log (car2.drivers); / / avoids the shortcomings of the prototype method 2. Define a class using the class keyword: you cannot define properties directly outside the class, and you still need to bind function objects outside the class using the prototype method. Class Car {constructor (color) {this.color = color;} drivers = new Array ("mike", "jhon"); hello = function () {return "Di Di" + this.color } Car.prototype.hello = function () {/ / out-of-class binding method return "Di Di";} var car1 = new Car ("red"); var car2 = new Car ("green"); car1.drivers.push ("kiki"); console.log (car1.color); console.log (car2.hello ())

To sum up, when a variable is defined within a class, the constructor will be called together when the instance is constructed, and the methods and properties bound outside the class will be called directly without participating in the construction. At the same time, it is also easy to keep secret and hide information.

Inherit 1. Camouflage inheritance: inheriting a class as a constructor of a new class is a bit magical. A class in js can be treated as a peculiar property of a function object, function Car1 (color) {this.color = color; this.showColor = function () {console.log ("this car is" + this.color);} this.drivers = new Array ("mike") } function Car2 () {this.makeSound = function () {console.log ("Di Di");}} function Car3 (color) {this.newConstruct = Car1; / / passed in this.newConstruct (color) as constructor; / / call constructor delete this.newConstruct; this.newConstruct2 = Car2 / / multiple inheritance, but because of the closure mechanism, you need to use a different constructor name this.newConstruct2 (); delete this.newConstruct2;} / / similarly, camouflage inheritance can also bind the constructor var car1 = new Car3 ("red"); var car2 = new Car3 ("green"); car1.drivers.push ("kiki"); console.log (car1.color); car1.showColor (); car1.makeSound (); console.log (car2.drivers) two。 Inherit function Car1 (color) {this.color = color; this.showColor = function () {console.log ("this car is" + this.color);}} function Car2 (num) {this.num = num; this.makeSound = function () {console.log ("Di Di") with parent methods call and this.color } function Car3 (color,num) {Car1.call (this, color); Car2.apply (this, augments); / / augments is an array containing the required parameters} var car1 = new Car3 ("red", 1); var car2 = new Car3 ("green", 2); console.log (car1.color); console.log (car2.num); car1.showColor (); car1.makeSound () You can also write. Apply and. Call outside the class, but you can only operate on the instance and cannot be used to make up class 3. Inheritance with prototype chain: using _ _ proto__ and .prototype to form prototype chain. The disadvantage is that multiple inheritance cannot be realized. Multiple inheritance function Car1 (color) {this.color = color; this.showColor = function () {console.log ("this car is" + this.color) can only be achieved by binding to a constructor or creating a few more classes to inherit in a chained manner. }} function Car3 () {}; Car3.prototype = new Car1 (); 4. Inheritance can also be realized with class...extends..., but multiple inheritance can not be realized, and multiple inheritance can only be achieved by using multiple classes as nodes like the prototype chain, which is a characteristic of ES6. ES6 also introduces let, public, private, protected keywords but can not achieve multiple inheritance, and there is no concept of package is also very strange class Car2 extends Car1 {constructor (color) {super () / / similar java,super itself can represent the parent class. Here the / / constructor this.color = color;} drivers = new Array ("mike", "jhon") is used to represent the parent class; hello = function () {return "Di Di" + this.color }} this is the end of the article on "sample Analysis of Class Construction and inheritance in Js". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.