Function Advanced ① -- (function prototype, prototype, prototype chain)

function prototype

1. function's prototype property

• Each function has a prototype property, which by default points to an empty Object (that is, called: the prototype object)
• There is a property constructor in the prototype object, which points to the function object
  

That is to say, the function and the prototype object of the function have a mutual reference relationship

2. Add properties to prototype objects (usually methods)

• Role: All instance objects of the function automatically have the properties (methods) in the prototype

prove:

<script type="text/javascript">

  // 每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)
  console.log(Date.prototype, typeof Date.prototype)
  function Fun () {
    
    //alt + shift +r(重命名rename)

  }
  console.log(Fun.prototype)  // 默认指向一个Object空对象(没有我们的属性)

  // 原型对象中有一个属性constructor, 它指向函数对象
  console.log(Date.prototype.constructor===Date)
  console.log(Fun.prototype.constructor===Fun)

  //给原型对象添加属性(一般是方法) ===>实例对象可以访问
  Fun.prototype.test = function () {
    
    
    console.log('test()')
  }
  var fun = new Fun()
  fun.test()
</script>

Explicit Prototype vs Implicit Prototype

1. Every function function has a prototype, that is, an explicit prototype (property)
2. Every instance object has a __proto__, which can be called an implicit prototype (property)
3. The value of an object's implicit prototype is the value of its corresponding constructor's explicit prototype
4. Memory structure (picture)
5. Summarize:

• The prototype property of the function: automatically added when the function is defined, the default value is an empty Object object
• The __proto__ property of the object: automatically added when the object is created, the default value is the prototype property value of the constructor
• Programmers can directly manipulate explicit prototypes, but not implicit prototypes (before ES6)

E.g:

<script type="text/javascript">
  //定义构造函数
  function Fn() {
    
       // 内部语句: this.prototype = {}

  }
  // 1. 每个函数function都有一个prototype，即显式原型属性, 默认指向一个空的Object对象
  console.log(Fn.prototype)
  // 2. 每个实例对象都有一个__proto__，可称为隐式原型
  //创建实例对象
  var fn = new Fn()  // 内部语句: this.__proto__ = Fn.prototype
  console.log(fn.__proto__)
  // 3. 对象的隐式原型的值为其对应构造函数的显式原型的值
  console.log(Fn.prototype===fn.__proto__) // true
  //给原型添加方法
  Fn.prototype.test = function () {
    
    
    console.log('test()')
  }
  //通过实例调用原型的方法
  fn.test()
</script>

Prototype chain

Prototype chain

• When accessing a property of an object,
  • First search in its own properties, find and return
  • If not, look up the chain of __proto__, find and return
  • If not found, return undefined
• Alias:ImplicitPrototype chain
• Role: Find the properties (methods) of an object

Notice:

   /*
  1. 函数的显示原型指向的对象默认是空Object实例对象(但Object不满足)
   */
  console.log(Fn.prototype instanceof Object) // true
  console.log(Object.prototype instanceof Object) // false
  console.log(Function.prototype instanceof Object) // true
  /*
  2. 所有函数都是Function的实例(包含Function)
  */
  console.log(Function.__proto__===Function.prototype)
  /*
  3. Object的原型对象是原型链尽头
   */
  console.log(Object.prototype.__proto__) // null

Constructor/prototype/instance object relationship

Example 1:

var o1 = new Object();
var o2 = {
    
    };

Example 2:

function Foo(){
    
      }

There are a few things to note about this picture:

We know that all functions are instance objects of Function, which even includes Function itself.
This explains:

• The __proto__ of the constructor of Foo points to the prototype object of the Function, because the __proto__ of the instance object always points to the prototype of the constructor.
• Function itself is also an instance object of Function. Since it is an object, it has the __proto__ attribute. According to the __proto__ of the instance object always points to the prototype of the constructor, we can know that the __proto__ of the Function points to the prototype object of the Function.
• The constructor of Object is the instance object of Function, and it also always points to the prototype of the constructor according to the __proto__ of the instance object, so the __proto__ of the constructor of Object points to the prototype object of Function.

It is not recommended to use the concept of parent and child to understand archetypes