Home > Web Front-end > JS Tutorial > Detailed explanation of usage examples of JavaScript inheritance: prototypal inheritance, parasitic inheritance, and parasitic combined inheritance

Detailed explanation of usage examples of JavaScript inheritance: prototypal inheritance, parasitic inheritance, and parasitic combined inheritance

伊谢尔伦
Release: 2017-07-25 16:01:44
Original
1451 people have browsed it

Prototypal inheritance

The implementation method of prototypal inheritance is different from that of ordinary inheritance. Prototypal inheritance does not use constructors in the strict sense, but relies on prototypes. You can create new objects based on existing objects without having to create custom types. The specific code is as follows:


function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}
Copy after login

Code example:


/* 原型式继承 */
function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

var person = {
  name : 'wuyuchang',
  friends : ['wyc', 'Nicholas', 'Tim']
}

var anotherPerson = object(person);
anotherPerson.name = 'Greg';
anotherPerson.friends.push('Bob');

var anotherPerson2 = object(person);
anotherPerson2.name = 'Jack';
anotherPerson2.friends.push('Rose');

alert(person.friends);  // wyc,Nicholas,Tim,Bob,Rose
Copy after login

Parasitic inheritance


/* 寄生式继承 */
function createAnother(original) {
  var clone = object(original);
  clone.sayHi = function() {
    alert('hi');
  }
  return clone;
}
Copy after login

Usage example:


/* 原型式继承 */
function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}
   
/* 寄生式继承 */
function createAnother(original) {
  var clone = object(original);
  clone.sayHi = function() {
    alert('hi');
  }
  return clone;
}

var person = {
  name : 'wuyuchang',
  friends : ['wyc', 'Nicholas', 'Rose']
}
var anotherPerson = createAnother(person);
anotherPerson.sayHi();
Copy after login

Parasitic combined inheritance

JavaScript Implementing inheritance in the combination mode has its own shortcomings. Now we will solve its shortcomings. The implementation idea is that the constructor inherits properties, and the hybrid form of the prototype chain inherits the method, that is, there is no need to instantiate the parent type when inheriting the method. 's constructor. The code is as follows:


function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

/* 寄生组合式继承 */
function inheritPrototype(subType, superType) {
  var prototype = object(superType.prototype);
  prototype.constructor = subType;
  subType.prototype = prototype;
}
Copy after login

When using it, you only need to replace the line of code "SubType.prototype = new SuperType();" in the combination mode with inheritPrototype(subType, superType); that’s it. The high efficiency of parasitic combined inheritance is reflected in the fact that it only calls the parent type constructor once, avoiding the creation of unnecessary or redundant properties. At the same time, the prototype chain remains unchanged, so instanceof and isPrototypeof() can still be used normally. This is currently the most ideal inheritance method, and we are currently transitioning to this model. (YUI also uses this pattern.)

The above is the detailed content of Detailed explanation of usage examples of JavaScript inheritance: prototypal inheritance, parasitic inheritance, and parasitic combined inheritance. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template