Shulou(Shulou.com)06/02 Report--

How to understand the ambiguous relationship between JavaScript prototype chain and instanceof operator? I believe many inexperienced people don't know what to do about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Going back to two months ago, we simply geographically sorted out the messy relationship between prototype chain, prototype, and _ _ proto__, as well as a brief understanding of the typeof and instanceof operators, but, anyway, try the following two questions:

Console.log (Function instanceof Function)

Console.log (String instanceof String)

If you can't get an accurate answer, follow the landlord to review the past and know the new.

Warm the reason

We often use the typeof operator to determine the type of a variable, and it is really easy to judge number, boolean, string, but the judgment ability for object is general, for example, the judgment result of Array and null is object, and for some objects of new, such as new String (), new Number (), etc., the result is object, so there is a problem, unable to judge the object instance in more detail, then instanceof is needed. As the name implies, instanceof is an operator that determines whether an object is an instance of a constructor, so that you can further determine whether the variables coming out of new are number, string, or something else. It looks very simple, but in fact it is not. The above two questions are just a trial. Leave it first, and then review the prototype chain.

Everything in JavaScript is an object, and all objects have a _ _ proto__ attribute value (that is, prototype), which may not be supported by some cheating browsers. For the time being, the value of this attribute of an object is the prototype value of the object's constructor, and the function is that for a certain type of object, there is no need to define a method repeatedly, for example, for an object [1, 2, 3], obviously, this is an array object. It has pop, push and other methods, but it does not mean that it has these methods, but its constructor Array function has, and the value of _ _ proto__ of the object is the prototype value of the Array function. If so itself does not have the pop method, it will look for it in its _ _ proto__, that is, the so-called prototype chain. And the end of the chain is Object, because all objects are constructed from Object, and Object.prototype.__proto__ specifies that it points to null.

The description of the text is always pale, to give a simple example:

Var fun = function () {

This.a = 1

}

Fun.prototype.b = 2

Var obj = new fun ()

Obj.a; / / 1

Obj.b; / / 2

If you look at the examples and pictures of online theft, you will find that it is very clear.

Knowing the new

Next, take a look at the instanceof operator.

The general use of instanceof is to determine whether an is of type b:

Console.log (true instanceof Boolean); / / false console.log (new Number (1) instanceof Number); / / true

Instanceof can also determine the parent type:

Function Father () {} function Child () {} Child.prototype = new Father (); var a = new Child (); console.log (an instanceof Child); / / true console.log (an instanceof Father); / / true

The Child constructor inherits from Father, and instance an is undoubtedly constructed by Child, but why is it also an instance of Father? In fact, the kernel of the instanceof operator can be simply described in the following code:

Function check (a, b) {while (a, b) {if (a.roomprotoplast _ = = b.prototype) return true; a = a.protozoa;} return false;} function Foo () {} console.log (Object instanceof Object = check (Object, Object)); / / true console.log (Function instanceof Function = check (Function, Function)); / / true console.log (Number instanceof Number = = check (Number, Number)) / / true console.log (String instanceof String = = check (String, String)); / / true console.log (Function instanceof Object = check (Function, Object)); / / true console.log (Foo instanceof Function = check (Foo, Function)); / / true console.log (Foo instanceof Foo = check (Foo, Foo)); / / true

To put it simply, if an is an instance of b, then a must be able to use the methods and properties defined in b's prototype, so the prototype chain of an is represented by code that has objects with the same value of b.prototype, so you can find it layer by layer along the prototype chain of a.

It is also worth noting that String Number Boolean and Function are functions, while functions are constructed uniformly from Function. So, like any simple function, can use the prototype properties on Function:

Function.prototype.a = 10; console.log (String.a); / / 10

Let's briefly talk about the first two questions.

/ / in order to facilitate the expression, first distinguish between the left expression and the right expression FunctionL = Function, FunctionR = Function; / / the following step by step according to the specification O = FunctionR.prototype = Function.prototype L = FunctionL.__proto__ = Function.prototype / / * to determine O = L / / return true// in order to facilitate expression, first distinguish the left expression from the right expression StringL = String, StringR = String / / the following step-by-step deduction according to the specification O = StringR.prototype = String.prototype L = StringL.__proto__ = Function.prototype / / * to determine O! = L / / Loop again to find out whether L still has _ _ proto__ L = String.prototype.__proto__ = Object.prototype / / the second judgment O! = L / / Loop again to find out whether L still has _ _ proto__ L = String. Prototype.__proto__ = null / / third judgment L = = null / / return false to read the above content Have you learned how to understand the ambiguous relationship between the JavaScript prototype chain and the instanceof operator? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.