Ordinary functions and constructors

Function is still the previous function. The only difference is that the initial letter is capitalized

// Constructor
function Foo(m, n) {
  let ret = m + n;
  this.m = m;
  this.n = n;
  return ret;
}

// Ordinary function
function foo(m, n) {
  let ret = m + n;
  this.m = m;
  this.n = n;
  return ret;
}

Ordinary function

• It is called normally, and the new keyword is not required
• The execution process is still executed according to the stack + scope chain search mechanism

// Ordinary function call
let ret = Foo(10, 20);
console.log(ret);

Constructor

• Call with the new keyword
• When the new operation is executed, the browser will create a space to indicate that the empty object is associated with this, which refers to the newly created instance
• If there is no return in the function body or the return is the basic data type, the object instance is returned by default; If the reference type is returned in the function body, it is mainly returned by itself
• The function is now called a class, and the returned result is called an object instance

// Constructor Execution 
let res = new Foo(20, 20);
console.log(res);

new operator

• Normally, new is used to create an object instance. If the current class does not need to pass parameters, it can run without parentheses
• new Foo, without parentheses, indicates that FOO does not need to pass parameters, which is called a parameterless list
• The priority of new Foo is different from that of new Foo(). The former is 19 and the latter is 20
• Each time new will re execute the function, generate a new execution context and create a new instance object. Therefore, the two instance objects are different

Override new method

What did new do

1. Create instance object
2. Execute the constructor to point this to the instance object
3. Process return value

Simulated new implementation

function Person(name) {
  this.name = name;
}
Person.prototype.slogan = function () {
  console.log("The most handsome man in the front end");
};
Person.prototype.sayName = function () {
  console.log(`My name is ${this.name}`);
};

// let p1 = new Person('zce')
// p1.slogan()
// p1.sayName()

function _new(Ctor, ...params) {
  //01 create instance object
  // let obj = {}
  // obj.__proto__ = Ctor.prototype
  let obj = Object.create(Ctor.prototype);

  //02 call the constructor and change the point of this
  let ret = Ctor.call(obj, ...params);

  //03 processing returned results
  if (ret !== null && /^(object|function)$/.test(typeof ret)) {
    return ret;
  }
  return obj;
}

let p1 = _new(Person, "zce");
p1.slogan();
p1.sayName();
console.log(p1 instanceof Person);

Prototype and prototype chain

Noun description

prototype property

• Each Function (except arrow Function) data type has its own prototype attribute, which points to the prototype object (except Function)
• Each prototype object comes with a constructor attribute that points to the current constructor itself

• Function data type

  • Normal function, arrow function, generator function
  • Constructor (custom class)
  • Built in function (built-in constructor)

proto attribute

• Each object data type has its own proto attribute (implicit prototype)
• The value of this property points to the prototype object prototype of the class to which it belongs

• Object data type

  • Normal object, array object, regular object, Date object
  • Prototype prototype object
  • Instance object
  • Functions are also objects

Object class

• All objects are instances of Object's built-in classes
• Object is also a function. It also has the prototype attribute and points to its own prototype object
• Its prototype is also an object, so it has the proto attribute
• proto of Object prototype Object points to null (internal design)

Prototype chain lookup mechanism

1. First, find your own private attribute. The existence in private is private
2. If it does not exist in private, the prototype object of the class is found based on proto by default
3. If the prototype of the class does not exist, the proto based on the prototype object continues to look up until Object.prototype is found

Sample code

function Foo() {
  this.m = 10;
  this.n = 24;
  this.getM = function () {
    console.log(this.m);
  };
}
Foo.prototype.getM = function () {
  console.log(this.m);
};

Foo.prototype.getN = function () {
  console.log(this.n);
};

let foo1 = new Foo();
let foo2 = new Foo();
console.log(foo1.getM === foo2.getM);
console.log(foo1.getN === foo2.getN);
console.log(foo1.__proto__.getN === Foo.prototype.getN);
console.log(foo1.__proto__.getM === foo2.getM);
console.log(foo1.getM === Foo.prototype.getM);
console.log(foo1.constructor);
console.log(Foo.prototype.__proto__.constructor);
foo1.getM();
foo1.__proto__.getM();
foo2.getN();
Foo.prototype.getN();

Function and Object

Function multiple roles

1. function

   1. Normal function call (stack execution scope)
   2. Constructor instantiation (prototype and prototype chain)

2. object

   1. Key value pair
3. There is no necessary connection between the three roles, but the core function is function

Quotations

1. Function is a first-class citizen. There are many roles in JS, such as ordinary function, constructor and object
2. Each object has a proto attribute, which points to the prototype object of its class (implicit prototype, prototype chain attribute)
3. Each function has a prototype attribute that points to its prototype object
4. All functions are instances of the built-in class of Function, and Function itself is also a Function
5. All objects are instances of Object, and Object itself is also a function
6. Function and Object are the two parallel base classes, although the ultimate finding foothold is Object
7. Function.prototype prototype prototype object is an anonymous function. Although it is a function, its processing mechanism is the same as that of the prototype object. Its proto attribute points to the prototype object of its class, that is, Object.prototype

Does not have the prototype attribute

1. Function.prototype does not have. It is an anonymous function
2. Object using ES6 syntax to define the function const obj = {say() {}}
3. Arrow function
4. Functions without the prototype attribute cannot perform the new operation