Javascript inheritance mode (on)
1. Traditional inheritance (prototype chain)
Disadvantage: Too many useless properties are inherited.
The following is a prototype chain. Three only wants to use the attribute of one name, and as a result, it inherits many attributes such as age, sex and so on.
<script type="text/javascript">
One.prototype.name = 'test';
function One() {
this.age = 1;
}
var one = new One();
Two.prototype = one;
function Two() {
this.sex = 'male';
}
var two = new Two();
Three.prototype = two;
function Three() {
}
var three = new Three();
</script>
2. Borrowing constructors (call and apply)
Disadvantage: Using call and apply does not inherit the prototype of the constructor.
Each time the constructor is executed, one more function is required, for example:
Every time the constructor People is executed, Person.call is executed to refer to the value in Person.
This approach just reduces the amount of code, not the steps to run it at all.
<script type="text/javascript">
function Person(name, age) {
this.name = name;
this.age = age;
}
function People(name, sex, height, age) {
Person.call(this, name, age);
this.sex = sex;
this.height = height;
}
var people = new People('墨小白', 'male', 172, 18);
</script>
When doing development, if you have the above requirements (a function completely contains another function), it is recommended to use this method.
3. Share prototypes
Disadvantages: You can't change your prototype at will
Because the prototype is shared, once a constructor modifies its own prototype, it will affect other constructors.
<script type="text/javascript">
Father.prototype.lastName = '白';
function Father() {
}
function Son () {
}
Son.prototype = Father.prototype;
var son = new Son();
</script>
This operation can be encapsulated into a method to be called at any time.
<script type="text/javascript">
Father.prototype.lastName = '白';
function Father() {
}
function Son () {
}
function inherit(Target, Origin) {
Target.prototype = Origin.prototype;
}
inherit(Son, Father);
var son = new Son();
</script>
4. Holy Grail Mode
Using the prototype chain, add an intermediate layer.
On the basis of the shared prototype, modifying the prototype by yourself will not affect other constructors.
<script type="text/javascript">
Father.prototype.lastName = '白';
function Father() {
}
function Son () {
}
function Lk() {}//加一个中间层Lk
Lk.prototype = Father.prototype;//使Lk的原型为Father的原型
Son.prototype = new Lk();//Son的原型为Lk对象
var son = new Son();//此时Son修改原型的话修改的是Lk对象，调用的话还是调用的Father的原型。
</script>
Can be encapsulated into methods for easy use.
<script type="text/javascript">
Father.prototype.lastName = '白';
function Father() {
}
function Son () {
}
function inherit(Target, Origin) {
function Lk() {};
Lk.prototype = Origin.prototype;
Son.prototype = new Lk();
}
inherit(Son, Father);//传参使用
var son = new Son();
</script>Original blog, piracy must be investigated