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 ofES5In 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 codeImplicit 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 codeThe 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.
- simulation
instanceoffunction
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 codeIn 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