This method is not original by the author. I just summarized it based on the predecessors and came up with a concise and practical JavaScript inheritance method.
Traditional JavaScript inherits prototype chains based on prototypes and requires a lot of new operations. The code is not concise enough, the readability is not very strong, and it seems to be easily contaminated by prototype chains.
The inheritance method summarized by the author is concise and clear. Although it is not the best way, I hope it can inspire readers.
Okay, don't say much nonsense, just look at the code, the comments are detailed, you can understand it at first glance~~~
The code copy is as follows:
/**
* Created by Yang Yuanon 14-11-11.
* Do not use prototype to implement inheritance
*
*/
/**
* Javascript object copying, only copying one layer, and only copying function attributes, not universal!
* @param obj Object to copy
* @returns Object
*/
Object.prototype.clone = function(){
var _s = this,
newObj = {};
_s.each(function(key, value){
if(Object.prototype.toString.call(value) === "[object Function]"){
newObj[key] = value;
}
});
return newObj;
};
/**
* Iterate through all its own properties
*
* @param callback callback function. Callback will contain two parameters: key attribute name and value attribute value
*/
Object.prototype.each = function(callback){
var key = "",
_this = this;
for (key in _this){
if(Object.prototype.hasOwnProperty.call(_this, key)){
callback(key, _this[key]);
}
}
};
/**
* Create subclasses
* @param ext obj, contains methods that need to be rewrite or extended.
* @returns Object
*/
Object.prototype.extend = function(ext){
var child = this.clone();
ext.each(function(key, value){
child[key] = value;
});
return child;
};
/**
* Create an object (instance)
* @param arguments Can accept any number of parameters as a list of constructor parameters
* @returns Object
*/
Object.prototype.create = function(){
var obj = this.clone();
if(obj.construct){
obj.construct.apply(obj, arguments);
}
return obj;
};
/**
* Useage Example
* Use this method to inherit, avoiding the tedious prototype and new.
* However, the example I wrote can only inherit the function of the parent class (can be understood as a member method).
* If you want to inherit more rich content, please improve the clone method.
*
*
*/
/**
* Animals (parent)
* @type {{construct: construct, eat: eat}}
*/
var Animal = {
construct: function(name){
this.name = name;
},
eat: function(){
console.log("My name is "+this.name+". I can eat!");
}
};
/**
* Bird (subclass)
* Birds overridden the parent class eat method and extend the fly method
* @type {subclass|void}
*/
var Bird = Animal.extend({
eat: function(food){
console.log("My name is "+this.name+". I can eat "+food+"!");
},
fly: function(){
console.log("I can fly!");
}
});
/**
* Create bird instance
* @type {Jim}
*/
var birdJim = Bird.create("Jim"),
birdTom = Bird.create("Tom");
birdJim.eat("worm"); //My name is Jim. I can eat worm!
birdJim.fly(); //I can fly!
birdTom.eat("rice"); //My name is Tom. I can eat rice!
birdTom.fly(); //I can fly!