I am small and live in Wuhan, do two years of new media, ready to use 6 months time to switch to the front end of the industry.

Lesson Objective for today

Yesterday, I learned js type conversion based on search, and today IS ready to learn about explicit and implicit prototype, at the same time understand the logic of new keyword construction object, and then learn about instanceof in detail, it is a day for learning, come on, small and ！！！！

concept

Explicit prototype

Prototype – Explicit Prototype Property. After each function is created, it has a property called Prototype that points to the function’s prototype object.

Note that the Function constructed through the function.prototype. bind method is an exception; it has no prototype attribute.

NOTE Function objects created using Function.prototype.bind do not have a prototype property or the [[Code]], [[FormalParameters]], and [[Scope]] internal properties. —– ECMAScript Language Specification

This property is a pointer to an object that displays the stereotype of the modified object.

A pointer?

Implicit stereotype

__proto__ — Implicit Prototype link: Before ES5 there was no standard way to access this built-in property, but most browsers supported __proto__ access.

ES5 has a standard Get method for this built-in attribute object.getProtoTypeof (), that is object.getProtoTypeof (obj)===obj.__proto__, The __proto__ attribute of an object can be accessed using chrome and FF, but not IE.

The implicit prototype points to the constructor prototype of the function that created the object.

But note that object.prototype. __proto__ //null is a special case where the implicit prototype of an Object’s explicit prototype is NULL.

ECMA defines to the value of its constructor’s “prototype” to refer to an explicit prototype of the function that created the object.

So the key point is to find the constructor that creates this object. Let’s look at the way objects are created in JS. At first glance, there seem to be three ways:

  • The way an object is literal
  • newThe way of
  • ES5In theObject.create()

But there’s only one way to do it, essentially, and that’s through new. Var o = new Object(); var o = new Object(); o.xx = xx; o.yy=yy; .

Object.create() is a new method in ES5, which was previously known as primitive inheritance. Boolean(); Boolean(); new Boolean();

The difference is that objects created by object.create () do not have constructors, because create() takes an explicit declaration of a built-in function. In the following example, the implicit declaration of the created Object refers to the argument passed in. The ss. __proto__ = = = Boolean. The prototype.

var ss = Object.create(Boolean.prototype)

console.log(typeof ss);//object
console.log(ss.prototype);//undefined
// console.log(ss.prototype.__proto__); //Cannot read property '__proto__' of undefined
console.log(ss.__proto__);//[Boolean: false] console.log(ss.__proto__.prototype);//undefined console.log(ss.constructor);//[Function: Boolean] Copy the code

role

Explicit prototype

For prototype-based inheritance and attribute sharing.

ECMAScript does not use classes such as those in C++, Smalltalk, or Java. Instead objects may be created in various ways including via a literal notation or via constructors which create objects and then execute code that initialises all or part of them by assigning initial values to their Constructor is a function that has a property named “prototype” that is used to implement prototype-based inheritance and shared properties.Objects are created by using constructors in new expressions; For example, new Date(2009,11) creates a new Date object. —-ECMAScript Language Specification

ECMAScript has no classes like those in C++, SimalTalk, or Java.

Instead, objects can be created in a variety of ways, including through literal representation or through constructors, and then execute code that initializes all or part of the object by assigning initial values to its properties.

Each constructor is a function with a property named Prototype that implements Prototype-based inheritance and sharing properties.

Objects are created by using constructors in new expressions; For example, new Date(2009,11) creates a new Date object.

—-ECMAScript language specification

Lazy use of online translation ~~~~

Implicit stereotype

The prototype chain is also used to implement prototype-based inheritance.

For example, when we access the x property of the object obj, if we don’t find it in obj, we’ll look it up __proto__.

Every object created by a constructor has an implicit reference (called the object’s prototype) to the value of its —-ECMAScript Language Specification

Each object created by a constructor has an implicit reference to its constructor’s Prototype value (called the object’s prototype)

The joint case 

// Create a test variable
var temp_O = new Object(a);var temp_B = new Boolean(a);var temp_N = new Number(a);var temp_S = new String(a);var temp_A = new Array(a);var temp_D = new Date(a);var temp_F = new Function(a);Copy the code

Implicit declaration of explicit declaration

With the exception of undefined and null object types, the implicit declaration of an object (__proto__) is {}, because the explicit declaration of a built-in object and the explicit declaration of an instance object are both an object. For example, array. prototype and temp_F.prototype are both objects, so their implicit declarations are {} and refer to the display declaration of the Object constructor, object.prototype.

Note that Object.prototype.__proto__ and function.prototype. __proto__ are special cases.

variable Method of use The results of
Object Object.prototype {}
Boolean Boolean.prototype [Boolean: false]
Number Number.prototype [Number: 0]
String String.prototype [String: ”]
Array Array.prototype []
Date Date.prototype Date {}
Function Function.prototype [Function]
Object Object.prototype.__proto__ null
Boolean Boolean.prototype.__proto__ {}
Number Number.prototype.__proto__ {}
String String.prototype.__proto__ {}
Array Array.prototype.__proto__ {}
Date Date.prototype.__proto__ {}
Function Function.prototype.__proto__ [Function]
temp_O temp_O.prototype.__proto__ Cannot read property __proto__ of undefined
temp_B temp_B.prototype.__proto__ Cannot read property __proto__ of undefined
temp_N temp_N.prototype.__proto__ Cannot read property __proto__ of undefined
temp_S temp_S.prototype.__proto__ Cannot read property __proto__ of undefined
temp_A temp_A.prototype.__proto__ Cannot read property __proto__ of undefined
temp_D temp_D.prototype.__proto__ Cannot read property __proto__ of undefined
temp_F temp_F.prototype.__proto__ {}

An explicit declaration of an implicit declaration

All object explicit declarations except undefined and null are undefined because the implicit declaration of a built-in object and the implicit declaration of an instance object are the same object. For example, array. __proto__ and temp_F.__proto__ are both one object, so their display declarations are undefined.

Constructors are instances of Function(), so the implicit declarations of constructors refer to function.prototype.

variable Method of use The results of
Object Object.__proto__ [Function]
Boolean Boolean.__proto__ [Function]
Number Number.__proto__ [Function]
String String.__proto__ [Function]
Array Array.__proto__ [Function]
Date Date.__proto__ [Function]
Function Function.__proto__ [Function]
Object Object.__proto__.prototype undefined
Boolean Boolean.__proto__.prototype undefined
Number Number.__proto__.prototype undefined
String String.__proto__.prototype undefined
Array Array.__proto__.prototype undefined
Date Date.__proto__.prototype undefined
Function Function.__proto__.prototype undefined
temp_O temp_O.__proto__.prototype undefined
temp_B temp_B.__proto__.prototype undefined
temp_N temp_N.__proto__.prototype undefined
temp_S temp_S.__proto__.prototype undefined
temp_A temp_A.__proto__.prototype undefined
temp_D temp_D.__proto__.prototype undefined
temp_F temp_F.__proto__.prototype undefined

new 

var Person = function(){};
var p = new Person();
Copy the code

The process of new is divided into the following three steps:

  • var p={};That is, initialize an empty objectp.
  • p.__proto__ = Person.prototype;Will temporary objectImplicitly declaredPointing to a structureThe explicit declarationOn.
  • Person.call(p);That is to say structurepYou can also call it initializationp.

The key is the second step, and let’s prove it:

var Person = function(){};
var p = new Person();
console.log(p.__proto__ === Person.prototype);//true
Copy the code

instanceof

define

In JavaScript, the typeof operator is often used to determine the typeof a variable. There is a problem with using the typeof operator to store values with reference types, which return object no matter what typeof object it refers to. ECMAScript introduces the Java operator Instanceof to solve this problem.

The instanceof operator is similar to the typeof operator and is used to identify the typeof object being processed. Unlike the Typeof method, the Instanceof method requires the developer to explicitly identify the object as a particular type.

The instanceof operator tests whether an object has a constructor’s Prototype property in its prototype chain.

Note that this is checking the prototype chain, not just checking the object’s implicit declaration once, but constantly looking for the constructor’s explicit declaration in the object’s implicit declaration.

Note that if the first argument passed is not an object, false is returned.

usage

In general, using instanceof is to determine whether an instance belongs to a certain type.

// Determine if foo is an instance of class foo
function Foo(){}
var foo = new Foo();
console.log(foo instanceof Foo)//true
Copy the code

Also, more importantly, instanceof can be used in inheritance relationships to determine whether an instance is of its parent type.

// Determine if foo is an instance of class foo and of its parent type
function Aoo(){}
function Foo(){}
Foo.prototype = new Aoo();//JavaScript prototype inheritance

var foo = new Foo(); console.log(foo instanceof Foo)//true console.log(foo instanceof Aoo)//true Copy the code

The above code determines the parent class in a hierarchy, and the instanceof operator is also applicable in a hierarchy.

Language specification

  • ECMAScript-262 edition 3In aboutinstanceofOperator definition

11.8.6 The instanceof operator The production RelationalExpression: RelationalExpression instanceof ShiftExpression is evaluated as follows: 1. Evaluate RelationalExpression. 2. Call GetValue(Result(1)). Evaluate ShiftExpression. 4. Call GetValue(Result(3)). If Result(4) is not an object, throw a TypeError exception.// If Result(4) is not object, throw a TypeError exception If Result(4) does not have a [[HasInstance]] method, throw an exception. All [[…]] methods or attributes in the specification are internal and cannot be used directly in JavaScript. And the specification states that only the Function object implements the [[HasInstance]] method. Therefore, it can be simply understood as: If Result(4) is not a Function object, If Result(4) does not have a [[HasInstance]] method, throw a TypeError exception. Result(4).[[HasInstance]](Result(2)) Call the [[HasInstance]] method of Result(4) with parameter Result(2). 8. Return Result(7).

  • The relevant HasInstance method definition

15.3.5.3 [[HasInstance]] (V) Assume F is a Function object. V iS Result(2) When the [[HasInstance]] method of F is called with value V, the following steps are taken: 1. If V is not an object, return false. Call the [[Get]] method of F with property name “prototype”.// Call the [[Get]] method of F with property name “prototype” be Result(2).//O = F.[[Get]](“prototype”) 4. If O is not an object, throw a TypeError exception. 5. Let V be the value of the [[Prototype]] property of V.//V = V.[[Prototype]] 6. If V is // If O and V refer to the same object, return true; Otherwise, 7. If O and V refer to the same object or If they refer to objects joined to each other (section 13.1.2) return true. 8. Go to step 5.

  • simulationinstanceoffunction

The above specification definition is obscure and seems complex, with many concepts involved, but translating this specification into JavaScript code is easy,


// object instanceof constructor

// The instanceof operator is used to test whether constructor. Prototype exists on the prototype chain of the argument object.

// Emulate the instanceof function function instance_of(L, R) {//L represents the left expression, R represents the right expression  var O = R.prototype;// take the display prototype of R  L = L.__proto__;// take the implicit prototype of L  // Return false only if it is not found at all. // Return false only if it is not found at all.  // use undefined as null.  while (true) {  if (L === null) { return false;  }  if (O === L)// Return true if O is strictly L  {  return true;  }  L = L.__proto__;//L.__proto__.__proto__.__proto__.__proto__.__proto__..........  } } Copy the code

In fact, looking at some did not fully understand ~~~~

Refer to the website

  • An in-depth look at the JavaScript instanceof operator

Summary of today’s lesson


Today the mood

Today I mainly learn explicit archetypes, implicit archetypes, new and instanceof based on search. Besides undefined and NULL object types, Object implicit declaration (__proto__) is {}, explicit declaration (prototype) is undefined, feel still need in practice, and further understanding, hope to learn more tomorrow ~~~~


This article is formatted using MDNICE