JavaScript object.create () What the hell is going on?

Source: Internet
Author: User

This is my first blog in the blog Park, read a blog in the morning Daniel, about JavaScript inheritance, for Daniel to use Object.create () to achieve inheritance of the way to feel a bit of a problem, they have to study a bit, so there is this post.

This post only speaks object.create (). Because I also do a year front-end, understand the wrong, I hope that Daniel help correct.

Before the blog began to talk about my prototype and __proto__ the superficial understanding.

1, prototype only class has this property, generally through the function declaration functions xx () {} and the function expression var xx=function () {} Defines the object has this property, and the function object generated through new does not have this property. The prototype property of the class points to the prototype object of the class

2. __proto__ the object pointed to by the prototype attribute of the parent class, that is, the prototype object of the parent class;  The __proto__ of a class defined by a function declaration and a function expression points to the prototype object function Empet () {}. For example, function A () {}; var a= new A (); A.__proto__===a.prototype;

3. The correspondence created by new is not a prototype attribute.

First on a picture, so you know more clearly. The picture should be understood by everyone, and it is not explained here.

Based on the above superficial understanding began the following discussion.

Create Class A first

function A () {    this.x= "I am X"}
var a =new a (); Console.log ("A.prototype: +a.prototype+", a.__proto__ : "+a.__proto__"); A.prototype: [Object Object], a.__proto__ : function Empet () {}//a:undefined, a.__proto__: [Object Objec T]

Validation verification a.__proto__ is A.prototype

A.__proto__.getname=function () {Console.log ("Create by a.__proto__");} var A2 =new A (); A2.getname ();  //create by a.__proto__

Validation succeeds, the __proto__ of the object created by new is directed to the same object as the prototype of the class, that is, the prototype object of the class

  Now, let's get to the chase.--object.create what happened

var obj =object.create (A);

The JavaScript authoritative guide, section 6.1, says Object.create () creates a new object, where the first parameter is the object's prototype.

  If according to this argument Obj.prototype should point to a; so obj.prototype and a have the same methods and properties, now define a show method for a to see if Obj.prototype can call the show () method

a.show=function() {    return "I am A"}console.log ("A.show ():" +a.show ()) ;  // a.show (): I am A

A can call the Show method to verify that Obj.prototype can invoke the show () method

Console.log ("Obj.prototype:" +obj.prototype.show ()); // error undefined is not a function

Oh,mygod, is it wrong in my mind that the Bible, the definitive guide to JavaScript, is written? I would rather believe that I have misunderstood or translated the wrong.

After breakpoint debugging, obj has the __proto__ property and no prototype property. As I have said before, in my superficial knowledge, only objects created by new are of this nature-there are __proto__ properties and no prototype attributes. So I decided that obj was an object created through new. Breakpoint debugging found that the _proto__ of obj is pointing to a.

Look at the information. Microsoft's official document says so.

Theobject.create () return value is a new object with the specified internal prototype and contains the specified property (if any) "Note that the internal prototype specified here" specifies that the inner prototype is __proto__ instead of prototype. Gee, is that really the case?

If this is the case, it means that obj is the object of new, and in the Object.create () process, a class is created that is the parent class of obj. The parent class new has the instance object obj. The prototype of the parent class is pointing to a, so the __proto__ of obj points to a.

In order to verify this idea, the program goes up.

// obj.__proto__.show (): I am A
Console.log ("obj.x:" +obj.x);  // undefined   Oh soga. This is normal because the definition in a x is this.x= "I am X"  x is a property of an instance, and obj undefined is normal

The __proto__ of obj can call the show () method, stating that the __proto__ of obj does point to a

About the second validation obj.x is superfluous. Obj itself does not have an X attribute, and the parent class created along the prototype object.create () of the prototype chain, obj, also does not have an X defined. The prototype of the prototype of obj, which is the A,a function, has x, but a does not define x itself, so it is normal to report undefined. Indeed, the foundation is not solid enough to write this redundant verification.

Then take a look at the prototype chain inheritance.

a.x= "GG"; Console.log (//obj.x A has defined X:gg

As expected, obj has no x, it needs to find its parent class (Obj_father), the parent class does not define this.x, note that this is this.x instead of the parent class. x (obj_father.x). Only this.x in the parent class can be called by the quilt class. The parent class. x is the parent class's own private property. The parent class has no X so the prototype of the parent class is found. A has. x so just enter the x of a. No A does not report undefined;

Just a whim to see what happens to the new instance object.

See this, I have to laugh at myself, it should be so, are unwilling to think, but also to write a program verification!!! Basics, Basics.

  

If you understand the wrong thing, I hope you will be grateful.

  

JavaScript object.create () What the hell is going on?

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.