JavaScript Object-oriented Inheritance Method

JavaScript has been around for more than 20 years, but there are still different comments on this prediction. Many people say that JavaScript cannot be an object-oriented language. However, the JavaScript type is very loose and there is no compiler. This gives programmers great freedom and some defects.

Although JavaScript is not an object-oriented language. However, we can simulate other languages to implement object-oriented JavaScript programming.

The following is a classic Inheritance Method in the JavaScript tutorial.

 

// Define a Pet object. Use this name and the number of legs. Var Pet = function (name, legs) {this. name = name; // Save ths name and legs values. this. legs = legs ;}; // create a method that displays the Pet name and number of legs. Pet. prototype. getDetails = function () {return this. name + "has" + this. legs + "legs" ;}// defines a Cat object and inherits from Pet. Var Cat = function (name) {Pet. call (this, name, 4); // call the constructor of this parent object}; // this line is inherited from Pet. Cat. prototype = new Pet (); // Cat that adds an action method. prototype. action = function () {return "Catch a bird" ;}; // create an instance petCat cat. Var petCat = new Cat ("felix"); var details = petCat. getDetails (); console. log (details) // "felix has 4 legs ". var action = petCat. action (); console. log (action) // "Catch a bird ". petCat. name = "sylvester"; // change the petCat name. legs = 7; // change the number of petCat legs details = petCat. getDetails (); console. log (details) // "sylvester has 7 legs ". // define a Pet object. Use this name and the number of legs. Var Pet = function (name, legs) {this. name = name; // Save ths name and legs values. this. legs = legs ;}; // create a method that displays the Pet name and number of legs. Pet. prototype. getDetails = function () {return this. name + "has" + this. legs + "legs" ;}// defines a Cat object and inherits from Pet. Var Cat = function (name) {Pet. call (this, name, 4); // call the constructor of this parent object}; // this line is inherited from Pet. Cat. prototype = new Pet (); // Cat that adds an action method. prototype. action = function () {return "Catch a bird" ;}; // create an instance petCat cat. Var petCat = new Cat ("felix"); var details = petCat. getDetails (); console. log (details) // "felix has 4 legs ". var action = petCat. action (); console. log (action) // "Catch a bird ". petCat. name = "sylvester"; // change the petCat name. legs = 7; // change the number of petCat legs details = petCat. getDetails (); console. log (details) // "sylvester has 7 legs ".

Although the above method is not very difficult to execute, the overall style of the Code is slightly bloated and not very elegant. You can also modify attributes outside. This method does not protect the inherited attributes. The following method uses the new and prototype features of "function inheritance.

 

// Define a pet object. Use this name and the number of legs. Var pet = function (name, legs) {// create an object that the name can be changed, but the number of legs cannot be changed, and the variable is private. Var that = {name: name, getDetails: function () {return that. name + "has" + legs + "legs" ;}}; return that ;}// defines a cat object that inherits from pet. Var cat = function (name) {var that = pet (name, 4); // inherit attributes from pet // Add an action method to cat. That. action = function () {return "Catch a bird";} return that;} // create a petCat2; var petCat2 = cat ("Felix "); var details = petCat2.getDetails (); console. log (details) // "felix has 4 legs ". var action = petCat2.action (); console. log (action) // "Catch a bird ". petCat2.name = "sylvester"; // we can change the name. PetCat2.legs = 7; // The number of legs cannot be changed. details = petCat2.getDetails (); console. log (details) // "sylvester has 4 legs ". // define a pet object. Use this name and the number of legs. Var pet = function (name, legs) {// create an object that the name can be changed, but the number of legs cannot be changed, and the variable is private. Var that = {name: name, getDetails: function () {return that. name + "has" + legs + "legs" ;}}; return that ;}// defines a cat object that inherits from pet. Var cat = function (name) {var that = pet (name, 4); // inherit attributes from pet // Add an action method to cat. That. action = function () {return "Catch a bird";} return that;} // create a petCat2; var petCat2 = cat ("Felix "); var details = petCat2.getDetails (); console. log (details) // "felix has 4 legs ". var action = petCat2.action (); console. log (action) // "Catch a bird ". petCat2.name = "sylvester"; // we can change the name. PetCat2.legs = 7; // The number of legs cannot be changed. details = petCat2.getDetails (); console. log (details) // "sylvester has 4 legs ".

Tip: the advantage of prototype inheritance is high memory efficiency. No matter how many times it is inherited, the object's prototype attributes and methods are saved only once. When a function is inherited, duplicate attributes and methods are created for each new instance. If you create many large objects, the memory consumption will be high. The solution is to save a large property or method in an object and pass it as a parameter to the constructor. In this way, all instances will use an object resource instead of creating their own version.

The above two methods can easily implement JavaScript Object-oriented Inheritance. No method is absolutely good, and no method is absolutely bad. Depends on your personal preferences. These two methods are not the only one. You are welcome to comment on them !~