Talk about a variety of ways of inheritance in javascript
- 2020-12-22 17:34:15
- OfStack
JS does not inherit, but it can save the country by curve, using constructors, prototypes and other methods to achieve the function of inheritance.
var o=new Object();
Instantiating an object with a constructor is inheritance, using all of the attributes and methods found in Object. So why can you access the methods of an Object object, when you're actually accessing the methods of its prototype object, all the methods are in the prototype and not in the class.
console.log(o.__proto__ === Object.prototype) // true Nature of inheritance
console.log(o.__proto__ === Object);
console.log(Object.__proto__ === Function.prototype);
console.log(Function.prototype.__proto__ === Object.prototype);
console.log(Number.__proto__ === Function.prototype);
object is the ancestor of all things, Everything is object.
1. Built-in objects inherit from object
var myNumber = new Number(10); // instantiation 1 Number object
The string object is actually an instance of the String object
var s = ' str';
In addition to having access to its own property methods, you can also access superclass property methods
console.log(s.toUpperCase());
console.log(s.toString());
2. Inheritance of custom objects
// The parent class
var Person = function(){
this.name='AV The teacher ';
this.test=' Bi Fujian in the test ';
}
Person.prototype={
say:function(){
console.log(' O buy dish ');
}
}
// The constructor
var Canglaoshi = function(name,age,cup){
this.name=name;
this.age=age;
this.cup=cup;
}
// inheritance person, has person Methods in prototype
Canglaoshi.prototype=new Person();
Canglaoshi.prototype.ppp=function(){
console.log(' Spluttered pa ');
}
// The cang teacher has person The methods in
var xiaocang=new Canglaoshi(' empty ',18,'E');
xiaocang.say();
console.log(xiaocang.name);
console.log(xiaocang.age);
console.log(xiaocang.cup);
console.log(xiaocang.test);
3, custom object inheritance prototype chain demonstration
(function() {
// The parent class
function SuperParent() {
this.name = 'mike';
}
// Subclass inherits its father - 2 Inheritance:
function Parent() {
this.age = 12;
}
Parent.prototype = new SuperParent(); // Through the prototype, the chain is formed
var parent = new Parent();
console.log(" Test father can access grandpa attributes: " + parent.name);
console.log(" The test father has access to his own properties: " + parent.age);
// Continuation of the prototype chain - 3 Time to inherit
function Child() { //brother structure
this.weight = 60;
}
Child.prototype = new Parent(); // Continuation of the prototype chain
// Prototype chain test 2
// Son Integrated Grandpa
var child = new Child();
console.log(" Test son can access grandpa's properties: " + child.name); // inherited Parent and Child, The pop-up mike
console.log(" Test son can access father's attributes: " + child.age); // The pop-up 12
console.log(" Test sons can access their own unique attributes: " + child.weight); // The pop-up 12
// Prototype chain test
// Grandpa can visit Object The methods in
var test = new SuperParent();
console.log(test.name);
console.log(test.toString());
// Access to the chain: SuperParent Construct object -- " SuperParent A prototype object -- " Object object -- " Obect Prototype object (find toString Methods) -- " null
console.log(child.name);
// Prototype chain: Accessed first Child Constructor, found no name attribute -- "Looking for __proto__ , to determine whether the pointer is null -- "Pointing to the Child The prototype function, look for any name attribute -- "
//--- "Did not find, then judge it __proto__ Whether the attribute is null If not null Continue searching -- "Find parent Object to check if there is one name Attributes, no...
})()
4. Constructor inheritance
(function() {
function People() {
this.race = ' human ';
}
People.prototype = {
eat: function() {
alert(' Just eat ');
}
}
/* Transvestite object */
function Shemale(name, skin) {
People.apply(this, arguments); // with call Is also 1 Kind, pay attention to the number 2 A parameter
this.name = name;
this.skin = skin;
}
// instantiation
var zhangsan = new Shemale(' zhang 3', ' Yellow skin ')
console.log(zhangsan.name); // zhang 3
console.log(zhangsan.skin); // Yellow skin
console.log(zhangsan.race); // human
})()
5. Combination inheritance
(function() {
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.say = function() {}
function Man(name, age, no) {
/* Will automatically call Person The method of while will name age Transfer the past */
Person.call(this, name, age);
// Own attributes
this.no = no;
}
Man.prototype = new Person();
var man = new Man(" zhang 3", 11, "0001");
console.log(man.name);
console.log(man.age);
console.log(man.no);
})()
Copy inheritance
<script>
+(function() {
var Chinese = {
nation: ' China '
};
var Doctor = {
career: ' The doctor '
};
// How can I make it " The doctor " Go to inherit " Chinese " In other words, how can I generate 1 a " Chinese doctor " The object?
// Note here that both objects are normal objects, not constructors, and cannot be implemented using constructor methods " inheritance " .
function extend(p) {
var c = {};
for (var i in p) {
c[i] = p[i];
}
c.uber = p;
return c;
}
var Doctor = extend(Chinese);
Doctor.career = ' The doctor ';
alert(Doctor.nation); // China
})()
</script>
7. Parasitic combination inheritance
console.log(o.__proto__ === Object.prototype) // true Nature of inheritance
console.log(o.__proto__ === Object);
console.log(Object.__proto__ === Function.prototype);
console.log(Function.prototype.__proto__ === Object.prototype);
console.log(Number.__proto__ === Function.prototype);
0
8. Implement inheritance using the third party framework
console.log(o.__proto__ === Object.prototype) // true Nature of inheritance
console.log(o.__proto__ === Object);
console.log(Object.__proto__ === Function.prototype);
console.log(Function.prototype.__proto__ === Object.prototype);
console.log(Number.__proto__ === Function.prototype);
1
Hope to learn javascript program design to help you.