Quickly recognize the prototype

Preface

In JavaScript, we can simulate inheritance by manipulating prototypes.
Before learning inheritance, we need to understand the prototype objects in the following JavaScript.


1. The difference between __prto__ and prototype

Objects having _proto_properties, it may be referred to as "hidden prototyping" . The implicit prototype of an object points to the prototype of the constructor function that constructed the object, which also ensures that the instance can access the properties and methods defined in the constructor function prototype.
The method of this particular subject, in addition to having the above _proto_properties, prototypethe properties unique to the method.
When we create an instance of an object, object _proto_attribute points to the default function prototypeattributes.

    function Person(name){
    
    
        this.name = name;
        this.sayName = function(){
    
    
            console.log(`我叫${
      
      this.name}`)
        }
    }
    var person1 = new Person();//实例化Person构造方法
    var person2 = new Person();
    
    t.__proto__ === test.prototype;// true 

Code operation mechanism:

  1. After creating a custom constructor, its prototype object will only have contructor properties by default , and other properties and methods are inherited from Object.

The constructor property returns the body of the function that created this object.

  1. When the constructor is called to create a new instance, the inside of the instance will contain a pointer to the prototype object of the constructor. ECMA5 calls this pointer [[prototype]] . Although there is no standard way of accessing [[prototype]] in scripts, in Firefox, Safari and Chrome, the attribute __proto__ is the implementation of accessing [[prototype]] . In IE browser, this attribute is completely invisible. But the real point to be clear is that this connection exists between the instance object and the prototype object of the constructor ( that is, the constructor name.prototype ), not between the instance and the constructor.
    Insert picture description here

inherit

// 定义一个Person类
      function Person(name, age) {
    
    
          this.name = name;
          this.age = age;
          //定义一个info函数
          this.info = function() {
    
    
              document.writeln("年龄" + this.age + "姓名" + this.name);
          }
      }
      //创建Person类的实例对象
      var p1 = new Person('xiaoming', 20);
      //调用p1的info方法
      p1.info();

      //为Person类增加walk方法
      Person.prototype.walk = function() {
    
    
          document.writeln(this.name + '正在走<br/>');
      }
      var p2 = new Person('xiaohong', 20);
      //p2可以调用Person中的方法
      p2.info();
      //也可以调用prototype属性增加的方法
      p2.walk();
      //JS允许为类动态增加方法和属性,这里p1也可以调用walk
      p1.walk();

The properties or methods added to the prototype of the object, and the constructor object of the instance can access the things on its prototype. In this way, the "child and step father industry" is realized.

reference

CSDN:[[https://blog.csdn.net/q5706503/article/details/82947977]]

Guess you like

Origin blog.csdn.net/qq_35370002/article/details/108180933