Inheritance analysis through prototype chain in javascript (code attached)

The content of this article is about the analysis of inheritance through the prototype chain in JavaScript (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Prototype and prototype chain

The prototype prototype will be automatically generated when creating a new function, and there will also be a constructor in the prototype, which refers back to the function object that created the prototype.

__proto__ is the [[prototype]] built into the object or instance, which points to the prototype of the object that generated the object. __proto__ is provided in the browser so that we can access it through __proto_ A chain formed by the pointing of _ is called a prototype chain. The entire link of the prototype chain is: Instance object- -> prototype of constructor- ->Prototype of Object- ->null .

When we access the properties or methods of an object, we first search from this object. If the property or method does not exist in this object, we will search upward along the prototype chain until we find the property or method. Or stop when null is reached.

This also explains why there are no push, pop, shift, unshift and other methods on the array object, but you can access

constructor

The constructor attribute points to the function that generates ( Object) function (object), such as

var a = function(){};
var b = new a();
var c = {};
var d = [];
//以下皆为true
console.log(b.constructor === a) //因为实例b是由构造函数产生的
console.log(a.constructor === Function)//函数a实际是Function的实例，同理
console.log(c.constructor === Object)//空对象c是Object的实例
console.log(d.constructor === Array)//空对象c是Object的实例
console.log(Object.constructor === Function)//Object自身就是一个构造函数，同理
console.log(Array.constructor === Function)//Array自身也是一个构造函数
//---------------------------------------------------------------
//首先__proto__指向的是产生该对象的对象的prototype，
//也即a.prototype，prototype中也的constructor，回指创建该prototype的函数对象，也即函数a
console.log(b.__proto__.constructor === a)

By the way, instanceof, A instanceof B is to find the prototype of B in the prototype chain of A, and it returns true if it is found. Return false

//有个奇怪的现象,下面都返回true，这是为什么呢？
//因为JS中一切都继承自Object，除了最顶层的null，
//所以在Function的原型链中能找到Object.prototype
console.log(Function instanceof Object)
//而Object自身就是一个构造函数，因此在Object的原型链中也能找到Function.prototype
console.log(Object instanceof Function)

Inheritance through the prototype chain

From the above analysis, we can use the prototype chain to implement the logic of inheritance. Inheritance is a very important concept in object-oriented

function Dog(name){
    this.name = name;
    this.say1 = function(){
        console.log(this.name)
    }
}
Dog.prototype.say2 = function(){
    console.log(this.name)
}
Dog.prototype.test = 1
//say本来应该是所有Dog实例的共有方法，
//如果放在构造函数中，那么就会导致没办法数据共享，每一个实例都有自己的属性和方法的副本，这是对资源的极大浪费
//如果放在Dog.prototype中，那么利用原型链的特性，就可以让所有实例共用一个方法，
//需要注意的是，由于共用了一个方法，对属性的更改是对所有实例透明的

var dog1 = new Dog('lalala'); 
let dog2 = new Dog('wahaha');
dog1.test++;//2
dog2.test++;//3
console.log(dog1.say1 === dog2.say1)// false
console.log(dog1.say2 === dog2.say2)// true



//现在，我们可以尝试着去实现继承了
//我们是通过原型链去实现继承的，
//之前的原型链是：Dog实例 --> Dog函数 --> Object --> null
//那么现在的原型链需要改成 Dog实例 --> Dog函数 --> Dog父类(Animal函数) --> Object --> null
//第一种方案，改变Dog函数的prototype，让他指向Animal的实例
function Animal(){
    this.species = 'unknown';
}
Dog.prototype = new Animal();
//这里改变后会导致prototype中的constructor改变
Dog.prototype.constructor = Dog;

//第二钟方案，改变Dog函数的prototype，让他指向Animal的prototype
function Animal(){}
Animal.prototype.species = 'unknown';
Dog.prototype = Animal.prototype;
//这里改变后会导致prototype中的constructor改变
Dog.prototype.constructor = Dog;

//第三种方案，调用apply或call,将Animal的this绑定到Dog中
function Animal(){
    this.species = 'unknown';
}
function Dog(name){
    Animal.apply(this, arguments);
    this.name = name;
}

//第四种方法，通过Object.create()方法实现继承，过滤掉了父类实例属性,Dog.prototype中就没有了Animal的实例化数据了
//这种方法也是ES6中Class被babel编译成ES5所用的方法
function Animal(){
    this.species = 'unknown';
}
function Dog(name){
    Animal.apply(this, arguments);
    this.name = name;
}
//这里模拟了 Dog.prototype = Object.create(Animal.prototype)
var f = function(){};
f.prototype = Animal.pototype;
Dog.prototype = new f();
Dog.__proto__ = Animal;
//这里改变后会导致prototype中的constructor改变
Dog.prototype.constructor = Dog;


//现在就能访问到Animal中的species属性了
var dog = new Dog('lalala');
dog.species;//unknown

The above are some methods of using the prototype chain to achieve inheritance

ES6 class class

With the above knowledge, we can study the ES6 class class, this syntactic sugar It makes it easier for us to implement classes and inheritance. It provides keywords such as extends, static, and super.

//这是es6的代码实现
class Parent {
  static l(){
    console.log(222)
  }
  constructor(m){
    this.m = m
  }
  get(){
    return this.m;
  }
}
class Child extends Parent {
  constructor(n){
    super(4);
    this.n = n;
  }
  get(){
    return this.n
  }
  set(a){
    this.n = a;
  }
}

//这是利用babel编译之后的es5的实现
//_createClass是一个自执行函数，作用给构造函数绑定静态方法和动态方法
//对于静态的static关键字声明的变量，会直接绑定在函数对象上，作为静态属性(方法)
//对于在class中声明的函数方法，则会绑定在构造函数的prototype上，通过Object.definePropety方法
var _createClass = function () {
  function defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }
  return function (Constructor, protoProps, staticProps) {
    if (protoProps) defineProperties(Constructor.prototype, protoProps);
    if (staticProps) defineProperties(Constructor, staticProps);
    return Constructor;
  };
}();

//如果父函数没有返回值或者返回值不为object或者function，则返回子类的this
function _possibleConstructorReturn(self, call) {
  if (!self) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }
  return call && (typeof call === "object" || typeof call === "function") ? call : self;
}

//_inherits就是extends关键字发挥的作用，实现了继承的功能。利用&&的短路特性，对superClass做了容错性处理，然后将子类Object.create()传了两个参数，一个参数是父类superClass.prototype,作用在上面解释继承的方法时讲过了，第二个参数是一个键值对，key代表着属性，value则和Object.definePropety中descriptor一样，这里改变constructor的目的，也在解释继承时讲过了，最后将subClass.__proto__指向superClass
function _inherits(subClass, superClass) {
  //...省略
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}

//_classCallCheck是保证构造函数不能被当成普通函数调用，需要用new关键字
function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var Parent = function () {
  _createClass(Parent, null, [{
    key: "l",
    value: function l() {
      console.log(222);
    }
  }]);

  function Parent(m) {
    _classCallCheck(this, Parent);

    this.m = m;
  }

  _createClass(Parent, [{
    key: "get",
    value: function get() {
      return this.m;
    }
  }]);

  return Parent;
}();

var Child = function (_Parent) {
  _inherits(Child, _Parent);

  function Child(n) {
    _classCallCheck(this, Child);
    
    //由于在_inherits中将subClass(child).__proto__指向了superClass(Parent),所以这里即是Parent.call(this,4),即这里执行的是super函数，super也可以调用父类的静态方法，
    //如果父函数没有返回值或者返回值不为object或者function，则返回子类的this    
    var _this = _possibleConstructorReturn(this, (Child.__proto__ || Object.getPrototypeOf(Child)).call(this, 4));

    _this.n = n;
    return _this;
  }

  _createClass(Child, [{
    key: "set",
    value: function set(a) {
      this.n = a;
    }
  }]);

  return Child;
}(Parent);

Summary

• Through the above analysis, the prototype and prototype I have a deeper and clearer understanding of the chain, and I am also familiar with the usage of constructor and instanceof. I have deepened my understanding of the inheritance method based on the prototype chain and clarified this piece of knowledge.

• In the analysis of the source code of ES6 classes compiled by babel, we also learned about the usage of Object.create and Object.setPrototypeOf, and explored how to simulate super, extends and static realization.

Related recommendations:

JavaScript object-oriented - inheritance based on prototype chain

JavaScript Inheritance and prototype chain

The above is the detailed content of Inheritance analysis through prototype chain in javascript (code attached). For more information, please follow other related articles on the PHP Chinese website!