Classic implementation of javaScript object-oriented inheritance method_Basic knowledge

JavaScript has been around for nearly 20 years, but there are still different opinions on this prophecy. Many people say that JavaScript cannot be considered an object-oriented programming language. But JavaScript is very loosely typed and has no compiler. This gives programmers a lot of freedom, but also brings some flaws.

Although JavaScript is not an object-oriented language. But we can implement JavaScript's object-oriented programming by imitating the way other languages ​​implement object-oriented programming.

The following is a very classic inheritance method in JavaScript tutorials.

Copy code The code is as follows:

//Define a Pet object. Pass this a name and 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's name and number of legs.
Pet.prototype.getDetails = function () {
return this.name " has " this.legs " legs ";
}

//Define a Cat object, inherited from Pet .
var Cat = function (name) {
Pet.call(this,name,4); //Call the constructor of this parent object
};

//This line Implementation inherited from Pet.
Cat.prototype = new Pet();

//Add an action method for cats
Cat.prototype.action = function () {
return "Catch a bird";
};

//Create a cat instance petCat.
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 petCat's name
petCat.legs = 7; //Change the number of petCat legs
details = petCat.getDetails();
console.log(details) //"sylvester has 7 legs".

Although the above method There is no big problem in execution, but the overall style of the code is a bit bloated and not very elegant. Properties can still be modified outside. This approach does not protect inherited properties. The following method omits new and prototype and uses the feature of "function inheritance" to implement it.

Copy code The code is as follows:

//Define a pet object. Pass this a name and number of legs.
var pet = function (name,legs) {
//Create an object that, where the name can be changed, but the number of legs cannot be changed, realizing variable privatization.
var that = {
name : name,
getDetails : function () {
return that.name " has " legs " legs ";
}
};

return that;
}

//Define a cat object, inherited from pet.
var cat = function (name) {
var that = pet(name,4); //Inherit attributes from pet

//A method to add an action 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; //But the number of legs cannot be changed
details = petCat2.getDetails();
console.log(details) //"sylvester has 4 legs".

Warm reminder: The advantage of using prototypal inheritance is that it is memory efficient. No matter how many times it is inherited, the prototype properties and methods of the object are only saved once. When functions are inherited, duplicate properties and methods are created for each new instance. If you create many large objects, memory consumption will be very large. The solution is to save the larger properties or methods in an object and pass it as a parameter to the constructor. This way all instances will use one object resource instead of creating their own versions.

Both of the above two methods can easily implement JavaScript object-oriented inheritance. No method is absolutely good, and no method is absolutely bad. Depends on personal preference. These two methods are not the only ones. Comments and additions are welcome!~