JavaScript Object-Oriented Programming (4) confusions caused by prototype Rewriting

JavaScript Object-Oriented Programming (4) confusions caused by prototype Rewriting

Let's look at two phenomena:

1. Declare prototype in component form (partially rewrite). The prototype constructor is a host function rather than an Object, just as adding properties to the host constructor directly.

 

Function Dog () {this. tail = true;} // create two new dogs. Note that prototypevar benji = new Dog (); var rusty = new Dog (); Dog is not defined yet. prototype. say = function () {return 'Woof! ';} // 1. partial rewriting. The prototype constructor is a host function rather than an Object, just like adding an attribute to the host constructor. alert (partial rewriting, its constructor: + benji. constructor. prototype. constructor); // because of this feature, the object created before prototype definition still automatically obtains the prototype attribute alert (benji. say () = + benji. say (); // normal, available

2. The second phenomenon is that if prototype is directly defined as a simple object, this action is called full rewriting.
The prototype constructor is an Object, and the host constructor does not directly have the prototype attribute.

Because of this, objects created before prototype declaration cannot use the prototype attribute.

-- Completely overwrite the original Instance and prototype.

 

 

// Use the fully rewritten form Dog. prototype = {paws: 4, hair: true}; alert (completely rewritten, its constructor ===+ benji. constructor. prototype. constructor);/* The object created before prototype declaration cannot use the prototype attribute, and the original Instance and prototype are completely overwritten. */alert (benji. say () = + benji. say (); // normal alert (use the previous object to access prototype object attributes: + benji. paws); // undefined

Therefore, you must first remember that partial rewriting is like adding attributes to the host constructor directly, while full rewriting is not. This leads to the difference in whether the new attribute of the old object can be accessed.

 

3. After the object is completely overwritten, only the original attributes and the attributes defined in the full rewriting are available on the newly created object.
The original attribute and partial rewrite attribute are available on the objects created before full rewriting.

 

// Use the fully rewritten form Dog. prototype = {p1: 888, p2: 999}; var lucy = new Dog (); // create an object for (I in lucy) {alert (I ); // tail p1 p2} for (I in benji) {alert (I); // tail say}

4. The above content is better understood, Partially overridden attributes (or methods) can be used by new and old objects after rewriting. Fully overwritten attributes (or methods) can only be used by new objects, the original prototype attribute will be blocked during full rewriting;

 

Another problem is that the constructor pointer error after full rewriting is caused:

 

Dog. prototype = {p1: 888, p2: 999}; var lucy = new Dog (); // create an object/* 4. the pointer to the constructor after the full rewriting is incorrect */alert (lucy. constructor); // Object?

How to fix it? You only need to reset the constructor of prototype to point:

 

 

Dog. prototype = {p1: 888, p2: 999}; Dog. prototype. constructor = Dog; var lucy = new Dog (); // new object/* reset the constructor pointer. */alert (lucy. constructor );

This part mainly prepares for "inheritance". We all know that inheritance, encapsulation, and polymorphism are object-oriented features, so we have to understand inheritance in js.