This is an object-oriented and inherited article about JavaScript, written 1 years ago, the author Step-by-step, to learn JavaScript in the object-oriented students is very helpful, so try to translate, the wrong place, please correct me. Original link objects and inheritance in Javascript
While some JavaScript users may never need to know the nature of prototypes or Object-oriented languages, developers of traditional object-oriented languages can find the JavaScript inheritance model very strange when used. But the different JS framework provides each method to write the class object-oriented (Class-like) The code, this makes the JS object-oriented is more difficult to understand. The result is this:
1, there is no standard way to implement object-oriented.
2, JS object-oriented concept of the bottom is not known to people
prototype Inheritance
Prototype inheritance is a very simple concept, and its essence is:
1. Object A inherits from object B and says B is the prototype of a (prototype).
2, a inherits all the properties of B, that is, if the value of b.x is 1, then the a.x value is 1
3, the property of a itself overrides a property of the same name in B
Let's look at the effect in concrete code, assuming there is a John Smith and a Jane who inherits from him.
Copy Code code as follows:
var john = {firstName: ' John ', LastName: ' Smith '};
var jane = {firstName: ' Jane '};
jane.__proto__ = John;
Now, we call John the archetype of Jane (prototype), and Jane inherits all of John's attributes.
Copy Code code as follows:
Jane.lastname
"Smith"//This property inherits from John
Jane's own attributes have a higher priority, as follows
Copy Code code as follows:
jane.firstname;//This property to overwrite the FirstName attribute in John
"Jane"
If you add a property to John after this, Jane will also dynamically inherit the property, as shown below
Copy Code code as follows:
John.hair = ' Brown '; Add a new attribute to John
Jane.hair;
"Brown"//result indicates that Jane inherited the newly added attribute
Now, let's assume that Jane is married and therefore has a new surname (last name)
Copy Code code as follows:
This property overrides a property with the same name as John (LastName)
Copy Code code as follows:
But if we delete Jane's LastName now
Copy Code code as follows:
Delete Jane.lastname
The value of this property reverts to the value of John
[Code]
Jane.lastname
"Smith"
Now, Jane can inherit from other objects as well. There can be any number of inheritance in this chain, we call it the prototype chain (prototype chain), in fact, John also has a prototype attribute
Copy Code code as follows:
john.__proto__;
Object {}
In the Firebug console, the john.__proto__ value is set to object{}, but object{} represents the Object.prototype object-the parent of all objects.
This is a brief description of the prototype inheritance. It looks good, doesn't it?
But, in fact, we can not use the __proto__ ...
To tell you a bad news ...
IE does not support the __proto__ attribute, in fact, __proto__ is not an attribute in the ECMAScript specification, and Mozilla also intends to remove the attribute in a later version of Firefox.
However, this does not mean that the __proto__ attribute does not exist. Although there is no direct access to the __proto__ property in some browsers, it still exists in some form and we have to deal with him, but not so directly.
Classes and Inheritance
So we can say that JavaScript doesn't have classes
Keep in mind: There are no classes in JavaScript
If so, how to achieve the method and inheritance?
Through the prototype (prototype). In traditional object-oriented languages, methods rely on classes, whereas in JavaScript, methods are dependent on the prototype of the object, and the prototype is bound to the object's constructor (constructor).
In JavaScript, a function acts as a constructor (constructor). By using the new operator, you can use a function as a constructor (constructor). The following code shows that we created a cat function:
Copy Code code as follows:
function Cat (name) {//<-this is a regular function
THIS.name = name//This points to the newly created object
}
The code above will automatically create a Cat.prototype object
Copy Code code as follows:
We can use the new operator to create an instance of cat
Copy Code code as follows:
var garfield = new Cat (' Garfield ')//Create an instance-the Cat function acts as a constructor
The Cat.prototype object is now a prototype of all objects created by new Cat (), such as:
Copy Code code as follows:
garfield.__proto__ = = Cat.prototype
True//See? ' Cat.prototype ' is now the archetype of the Garfield object.
Now, we add a method to Cat.prototype, and after that, the method can be accessed by Garfield to
Copy Code code as follows:
Cat.prototype.greet = function () {
Console.log (' Meow, I am ' + this.name)
}
Garfield.greet ()
"Meow, I am Garfield"
Other instances of cat can also be accessed to the
Copy Code code as follows:
var Felix = new Cat (' Felix ')
Felix.greet ()
"Meow, I am Felix"
Thus, in JavaScript, the method is dependent on the object's prototype (prototype).
In fact, we can also add a method for Garfield, which overrides the same method in Cat.prototype, as follows:
Copy Code code as follows:
Garfield.greet = function () {
Console.log ("What ' s new?");
};
Garfield.greet ();
"What ' s new?"
But it's not going to affect other objects.
Copy Code code as follows:
Felix.greet ();
"Meow, I am Felix"
Thus, in JavaScript, a method can be directly associated with an object, can be associated with an object's prototype, or it can be associated with any one of the object's parent objects, that is, it can be associated with any loop of the prototype chain (prototype chain). Inheritance is thus achieved.
To create a two-level prototype chain (prototype chain), we first need to create another constructor (constructor), called Animal.
Copy Code code as follows:
Next, we need to point the Cat.prototype prototype to a animal object, so that the instance of cat inherits all the animal methods. Therefore, we set the value of Cat.prototype to an instance of animal, as follows:
Copy Code code as follows:
Cat.prototype = new Animal ();
In addition, we're going to tell the new cat.prototype that it's actually an example of cat:
Copy Code code as follows:
Cat.prototype.constructor = CAT//Let ' cat.prototype ' know that it is an instance of cat
Although this is done primarily for hierarchical relationships between classes, it is often necessary to do so.
Now, since the object that inherits from Animal.prototype and Cat.prototype belongs to the animal class, then all instances of cat are indirectly inherited from Animal.prototype. If we add a new method to Animal.prototype, then all instances of cat can also access the method.
Copy Code code as follows:
Animal.prototype.breed = function () {
Console.log (' Making a new animal! ');
return new This.constructor ();
};
var kitty = Garfield.breed ();
Making a new animal!
Through the above code we have achieved inheritance, simple.
Conclusion
While the archetype-based inheritance in JavaScript is strange and takes some time to get used to, his core ideas are simple. As long as you really understand these fundamental concepts, you will have the confidence to harness JavaScript oo in these mixed code. (end) ^_^
