Four Steps to JS Prototype Inheritance

Inheritance is actually an extension of type. However, since JavaScript adopts prototypal inheritance, the editor below will share with you an article on the four steps of JS prototypal inheritance and an overview of the prototypal inheritance diagram, which has a good reference value. I hope to be helpful.

1: Four steps of js prototype inheritance

##

//js模拟类的创建以及继承
 //动物（Animal），有头这个属性，eat方法
 //名字这个属性
 //猫有名字属性，继承Animal，抓老鼠方法
 
 //第一步：创建父类
 function Animal(name){
  this.name = name;
 }
 //给父类添加属性方法
 Animal.prototype.eat = function(){
  console.log(this.name + " eating...");
 
 }
 //第二步：创建子类 
 function Cat(name){
  Animal.call(this,name);

 }
 //第三步：确定继承的关系
 Cat.prototype = Object.create(Animal.prototype);
 
 //第四步：改造构造器
 //改变了某个构造器的原型之后，紧接着的代码一定是改构造器
 Cat.prototype.constructor = Cat;
 
 Cat.prototype.zhualaoshu = function(){
  console.log(this.name + " 抓 老鼠");
 }
 
 var mao = new Cat("猫");
 mao.eat();
 mao.zhualaoshu();

Two: Prototype inheritance diagram

The picture below assists understanding

Practice to consolidate understanding,

The value of __proto of function Foo is equal to Foo.prototype, right? NoCan the prototype of Object be modified? What are the reasons why it can and cannotIt cannotWho is the top constructor? Function()Who is the top prototype object? Object.prototype Is the construtor member of an object a property or a method? Method Does Function have __proto__? Why? Is the value equal to Object.prototype? Yes, it is Function.prototype;The __proto__ of all constructors is equal to its corresponding prototypeWrongWhat are the four steps to creating class-form inheritance? Create a parent class——>Create a subclass——>Determine the inheritance relationship——>Change the constructorThe constructor and prototype values ​​of Function can be modified ? CanObject.prototype === Object.__proto__? WrongFunction.prototype === Function.__proto__? Is function F(){}; var f1 = new F();f1.__proto__ === Object.prototype? wrong

#related suggestion:

Comparison of two methods of js prototypal inheritance_Basic knowledge

A brief analysis of JS prototypal inheritance and class inheritance_Basic knowledge

JavaScript Detailed explanation of prototypal inheritance examples

The above is the detailed content of Four Steps to JS Prototype Inheritance. For more information, please follow other related articles on the PHP Chinese website!