Today's JavaScript is no longer the fancy script that runs on web pages as a toy in the past. JavaScript has gradually been standardized and is widely used in web development as a true programming language. Therefore, more and more people are beginning to re-recognize this scripting language and are constantly exploring the core ideas and implementation principles of JavaScript, encountering some very confusing problems in the process. This article focuses on explaining a common problem that can easily confuse developers or people who are new to JavaScript, that is, the two core constructors Object and Function. What is the relationship between them? Why does the instanceof operator's return result confuse you? This article will tell you one by one. But before that, we need to understand some concepts and basic operating mechanisms in JavaScript.
JavaScript’s object architecture
In fact, in the JavaScript language, the entire core architecture is built around two constructors, Object and Function. I'll illustrate by citing a JavaScript object architecture diagram from mollypages.org.
instanceof operator
instanceof is a binary operator, such as: A instanceof B. Among them, A must be a legal JavaScript object, and B must be a Legal JavaScript function. The judgment process is as follows:
If function B is found in the prototype chain of object A, then the instanceof operator will return true, otherwise it will return false.
For example, the following The code will return true.
// return true if specified function is found// in the object's prototype chain as a constructor.alert({} instanceof Object);
JavaScript The prototype chain mechanism
is briefly summarized here, because this topic requires a lot of space to discuss. This article only quotes this concept, and the focus is not to discuss the mechanism in detail.
The prototype in JavaScript is closely connected to the function, because each function has an attribute called prototype by default, and every object generated through the function and the new operator has an attribute __proto__, This property holds a reference to the prototype property of the constructor that created it. This __proto__ object is the core object that implements the prototype chain. JavaScript is an object-oriented programming language, and its inheritance feature is actually implemented through the prototype chain mechanism. At the same time, the instanceof operator also needs support in the prototype chain. Let’s give an example:
Code
/ / create a custom constructor Foo
function Foo() {
}
// create an insatnce of Foo
var foo = new Foo();
// foo is an instance of Foo
alert(foo instanceof Foo);// true
// foo is also an instance of Object because
// Foo.prototype is an instance of Object.
// the interpreter will find the constructor
// through the prototype chain.
alert(foo instanceof Object);// true
// Prototype chain of the object foo
//
/ / __proto__ __proto__ __proto__
// foo -----------> Foo.prototype -----------> Object.prototype -------- ---> null
// But foo is not an instance of Function, because
// we could not find Function.prototype in foo's
// prototype chain.
alert (foo instanceof Function);// false
// However, its constructor Foo is an instance of
// Function.
alert(Foo instanceof Function);// true
/ / it's also an instance of Object
alert(Foo instanceof Object);// true
// Prototype chain of the constructor Foo
//
// __proto__ __proto__ __proto__
// Foo -----------> Function.prototype -----------> Object.prototype -----------> null
From the analysis of the above code, it is not difficult to draw the conclusion that the prototype chain of any object can be traced back to Object.prototype. This is why we say that all objects in JavaScript inherit from Object reason.
Why do both Object instanceof Function and Function instanceof Object return true?
Object, Function, Array, etc. are all called constructor "functions", and they are all functions. All functions are instances of the constructor Function. From the perspective of the prototype chain mechanism, that means that all functions can find the constructed prototype Function.protorype object that created their Function constructor through the prototype chain, so:
alert(Object instanceof Function) ;// return true
At the same time, because Function.prototype is an object, its constructor is Object. From the perspective of the prototype chain mechanism, that means that all functions can pass through the prototype chain Find the constructed prototype Object.prototype object of the Object constructor that created them, so:
alert(Function instanceof Object);// return true
The interesting thing is based on what we do with instanceof through the prototype chain mechanism Analysis, it is not difficult for us to draw a conclusion: Function instanceof Function still returns true, the principle is the same
1. Function is a constructor, so it is a function object
2. Function objects are created by the Function constructor Come on, the prototype chain mechanism is explained as: Function.prototype
exists in the prototype chain of the function object. 3. instanceof searches for each node in the prototype chain. If the constructor of Function.prototype is found in the prototype chain of Function, Return true
So the following code still returns true
alert(Function instanceof Function);// still true
Conclusion
1. In JavaScript language, everything is Objects, they all inherit from Object. In other words, the root node of the prototype chain of all objects is Object.prototype
2. It is very important to understand how the prototype chain mechanism works in JavaScript. Once you master it, no matter how complex an object is, you can always defeat it easily.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
