JavaScript those things (1)

Recently saw a winter (winter) Teacher's blog, that is, JS this kind of prototype-based inheritance and the common class-based inheritance method of differences. The article finally throws a few interesting little exercises to try to solve the next.

In general, there are three steps to creating an object:

1. Build a new object

2. Point the __proto__ of the new object to the common object property of the Function object: prototype

3. Execute the constructor with the new object

Function.prototype.prop=1;alert (object.prop) alert (Function.prop)

Output: 1, 1

How do you understand it?

The first thing you should know is that all constructor (constructors) of the prototype chain model: selffunction.__proto__ ==> function.prototype.__proto__==> Object.prototype

So:

Object.prop ==> Object.__proto__.prop = = = Function.prototype.prop = = 1

Function.prop ==> Function.__proto__.prop = = = Function.prototype.prop = = 1

Object.prototype.prop=1;alert (object.prop) alert (Function.prop)

Similarly:

Object.prop ==> Object.prototype.prop = = = 1

Function.prop ==> Function.__proto__.prop = = = Function.prototype.prop ==>function.prototype.__proto__.prop = = = Object.prototype.prop = = 1

Function.__proto__.prop=1;alert (object.prop) alert (Function.prop)

Derivation:

Object.prop ==> Object.__proto__.prop = = = Function.prototype.prop = = = Function.__proto__.prop 1

Function.prop = = >function.__proto__.prop = = 1

Object and function are all constructor so their __proto__ attribute points to function.prototype.

function Class () {}class.prototype=class; Class.__proto__.prop=1alert ((new Class). Prop);

Here new an object and then access its Prop property, according to the previous three steps to construct the object, we can know that the new object's __proto__ property points to the class of this constructor prototype, so there are:

var client = new Class;

Client.prop ==>client.__proto__.prop = = = Class.prototype.prop ==> class.prototype.__proto__.prop;

And because Class.__proto__.prop = 1. And, class.prototype=== class,==>class.prototype.__proto__.prop = = = 1.

function Class () {}class.prototype=class.__proto__; Function.prototype.prop=1;alert ((New Class ()). Prop)

Based on the above several derivation processes, the results can be quickly obtained:

(New Class ()). Prop ==> (new Class ()). __proto__.prop = = = Class.prototype.prop = = = Class.__proto__.prop ==>

Function.proptype.prop = = 1

function Class () {}class.prototype.__proto__.prop=1; Class.prototype=new Class;alert ((new Class). Prop);

This example is a little difficult to explain, first look at class.prototype.__proto__.prop=1;

after a function has been declared, it gets its own prototype property by default, pointing to a newly created object, just like {} . So:

class.prototype.__proto__ = = = Object.prototype//true, so this sentence is actually a new prop attribute to Object.prototype.

Class.prototype.__proto__.prop = 1;

var classproto = Class.prototype;

var Classnewproto = Object.create (Classproto, {});

Classnewproto . __proto__ = = = Classproto//true

Class.prototype = Classnewproto;

var inst = object.create (classproto, {});

So

inst.__proto__ = = = Classnewproto//true

inst.__proto__.__proto__ = = =Classproto//true

inst.__proto.__proto__.__proto__ = = = Object.prototype//true

Finally, the prop attribute is found on the Object.prototype through the prototype chain.

JavaScript those things (1)