JavaScript Prototyping Learning Notes

JS is an object-oriented language, unlike other object-oriented languages, there is no concept of class in JS. People who have contacted C + + and Java know that classes implement the sharing of properties and methods between objects, and class inheritance implements the reuse of classes. In JS, the above functions are realized through the inheritance based on the prototype.

1 constructors, prototypes, and instances

In JS, except for 5 basic types, others are objects, and functions are objects. The function is a special kind of object, when each function object is created with a prototype property, which points to the prototype object of the function. The prototype object has only one constructor property, and this property points to the function. Constructors are structurally indistinguishable from normal functions, but constructors are generally used to create an instance, so the first letter of a constructor's function name is generally capitalized in order to be separated from the normal function area.

With the new operator, we can create an instance with a constructor function. If a function is preceded by a new operator, the JS engine actually does the following steps:

1. Create a new object and bind the object to this.

2. Point the [[prototype]] property of the new object to the prototype of the constructor. This [[prototype]] property is an internal property, but many browsers provide each object with __proto__ to find the object it is pointing to [[prototype]] property.

3. Execute the function code.

4. Returns a reference to the new object.

If you do not have the Add new operator previously, you will execute the constructor like a normal function. So the constructor must remember to add new.

var a = new A ();//Constructs an instance and makes a point to it
A ();//execute the function

By adding properties and methods to the prototype of the constructor, the properties and method sharing between the objects can be realized. For an instance, if a property or method is not found inside it, the JS engine will go to the prototype of the instance to find it. P1 and P2 share a prototype, so it's equivalent to sharing all the properties and methods in the prototype.

function Person (name) {    this. Name= name;} Person.prototype.say=function() {Console.log (this. name);} var New Person ("Joe"); var New Person ("Sophia");p 1.say ();p 2.say ();

2. Prototype chain

A prototype chain is formed when the prototype object of one constructor is an instance of another constructor.

function supertype () {    thistrue;}

SuperType.prototype.getSuperValue = function () {
return this.property;
}

Function subtype () {
This.subproperty = false;
}
Inherited the supertype.
Subtype.prototype = new Supertype ();

SubType.prototype.getSubValue = function () {
return this.subproperty;
}

var instance = new Subtype ();
Alert (Instance.getsupervalue ());//true

The code above defines two types of supertype and subtype, and implements subtype inheritance of supertype by re-assigning the prototype to subtype. It then adds a new method to Subtype.prototype, which adds a new method to the inheritance of the inherited Supertype.prototype. The relationship of constructors, instances, and prototypes in this example

As you can see, when a prototype of a constructor is changed by the value of the assignment statement (in effect, the prototype property of the constructor points to another object), it will no longer have a constructor property that points to the constructor. Also, because subtype's prototype is an instance of supertype, all instances of subtype share the properties and methods of the supertype instance. The top of the prototype chain is Object.prototype. The [[prototype]] property of the Object.prototype is empty.

3. Determining the relationship between prototypes and instances

With the prototype chain, the relationship between the prototype and the instance becomes less straightforward, and there are two ways to determine the relationship between the prototype and the instance.

instanceof

instanceof Object); // true instanceof Supertype); // true instanceof subtype); // true

The instanceof operator returns true as long as it is an object on the instance prototype chain.

isPrototypeOf ()

Alert (Object.prototype.isPrototypeOf (instance)); // truealert (SuperType.prototype.isPrototypeOf (instance)); // truealert (SubType.prototype.isPrototypeOf (instance)); // true

4. Re-prototyping method

Although the prototype method defined by some native prototypes or third-party JS libraries does not meet our needs, it can be passed SuperType.prototype.xxx = function ooo () {...} Way to rewrite the prototype method, but this is not recommended. You can override our custom type subtype's prototype method. Get into the habit of modifying only the types you create, and avoid some of the mistakes that may occur in the future.

5.hasOwnProperty

When iterating over an object using the for in statement, it looks for the object's properties and, if not, finds the prototype of the object along the prototype chain, all the way to the prototype of object. This inevitably leads to the problem of finding efficiency. hasOwnProperty is a method of object.prototype that determines whether an object contains a custom attribute rather than a property on the prototype chain. But if an object overrides this property, it needs to use the external hasownproperty function to get the correct result.

Reference article:

1.http://www.nowamagic.net/librarys/veda/detail/1648

2.JS Advanced Programming

3. Know

JavaScript Prototyping Learning Notes