This is the third day of my participation in the August More Text Challenge

A prototype,

A prototype is an object

Let’s new two instances of Foo, as shown:

functionFoo(){}let f1 = new Foo()
let f2 = new Foo()
Copy the code

1.1 the prototype

Every Function has a prototype attribute (except function.prototype.bind ()), which points to the prototype.

function Foo(){

}

Foo.prototype.msg = 'hello';
var f1 = new Foo();
var f2 = new Foo();
console.log(f1.msg) // hello
console.log(f2.msg) // hello
Copy the code

Almost all functions have this property, with one exception

let fun = Function.prototype.bind()
Copy the code

If you create a function this way, you will notice that the function does not have the prototype attribute.

This property is created automatically when we declare a function.

function Foo(){}
Copy the code

constructionalprototypeAttribute points toA prototype object

A stereotype is an object, and every JavaScript object (except null) is associated with another object when it is created. This object is what we call a stereotype, and every instance object inherits properties from the stereotype.

As mentioned above, Foo is also an object, and the constructor object has a prototype property that points to the prototype object of instances F1 and f2: foo.prototype. The properties and methods that hang on the prototype object are public properties or public methods that are shared by all instance objects of the constructor new, namely F1 and F2.

1.2 __proto__

Each object has a __proto__ attribute that points to the prototype of the constructor that created the object.

console.log(f1.__proto__ === Foo.prototype); // true
Copy the code

So stereotypes are objects, constructors are objects, and where do their __proto__ attributes point to? Again, the answer points to the prototype of the constructor that created the object.

1.2.1 Constructor__proto__

Function is also an object, and its constructor is Function, so __proto__ refers to function.prototype.

This is an implicit stereotype property for every object, pointing to the stereotype of the constructor that created the object. This attribute actually points to [[prototype]], but [[prototype]] is internal and we can’t access it, so use __proto__.

Because there is no concept of class in JS, in order to achieve similar inheritance, through __proto__ object and prototype linked to form prototype chain, so that the object can access the attributes that do not belong to their own.

When we use the new operator, the generated instance object has a __proto__ attribute.

function Foo(){}
// This Function is an instance of Function
// function is a syntactic sugar
// Call new Function internally (...)
Copy the code

So it can be said that during the new process, the new object is added __proto__ and linked to the constructor’s prototype.

Process of new:

  1. The freshman became an object
  2. Link to the prototype
  3. Binding this
  4. Return a new object

These four things happen when you call a new. We can also try to implement a new ourselves. Before we do that, let’s review a point:

// This refers to the called object. When call is used, the key is to be able to change the reference of this to the object passed in
The shift() function removes the first value of the array and returns obj
[].shift.call(arguments) becauseargumentsConstruct as follows, the first is length {length:2.0:'first'.1:'second'};
Copy the code
function create() {
  // Create an empty object
  let obj = new Object(a);// Get the constructor: remove the first argument Person and return it
  let Con = [].shift.call(arguments);
  // Link to the prototype
  obj.__proto__ = Con.prototype;
  // Bind this to the constructor
  let result = Con.apply(obj, arguments);
  // Make sure new comes out as an object return
  typeof result === "object" ? result : obj;
}

function Person(name, age) {
  this.name = name;
  this.age = age;
}
var a = create(Person, "Flower"."16");
console.log(a); // Person {name: "floret ", age: "16"}
Copy the code

For instance objects, both are generated by new, whether function Foo() or let a = {b: 1}.

function Foo(){}
// function is a syntax candy
// Internal equivalent of new Function()

let a = { b: 1 }
// This literal also uses new Object() inside
Copy the code

1.2.2 prototype__proto__

Prototype is also an Object. The constructor of a prototype is Object, so __proto__ points to Object.prototype, which eventually points to null.

1.3 the constructor

  • The instance’s attribute constructor points to the constructor
function Person() {}var person = new Person();
console.log(person.constructor === Person); // true
Copy the code
  • The constructor of the constructor’s prototype points to this function
console.log(Person.prototype.constructor === Person); // true
Copy the code