Javascript (1) and javascript

Javascript (1) and javascript

I recently saw a blog post by winter (cold winter) about the differences between prototype-based inheritance of js and general class-based inheritance. The article finally threw out several interesting small exercises to solve the problem.

Generally, there are three steps to create an object:

1. construct a new object

2. Point _ proto _ of the new object to the Common Object attribute of the function object: prototype.

3. Execute the constructor with the new object as this

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

Output: 1, 1

How can this problem be solved?

First, you should know,All constructor prototype chain models: 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)

Likewise:

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

Objects and functions are both constructor, so their _ proto _ attributes all point to Function. prototype.

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

Here a new object is added and Its prop attribute is accessed. According to the three steps of constructing an object, we can know that the _ proto _ attribute of the new object points to the prototype of the constructor of Class, so there are:

Var client = new Class;

Client. prop => client. _ proto _. prop = Class. prototype. prop => Class. prototype. _ proto _. prop;

And because of 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 derivation process, we can quickly get the result:

(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 bit difficult to explain. First, let's look at Class. prototype. _ proto _. prop = 1; what has this sentence done,

 After a function is declared, it will get its prototype attribute by default, pointing to a newly created Object, just like {}.. Therefore:

Class. prototype. _ proto _ = Object. prototype // true. Therefore, this statement adds a 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 Object. prototype through the prototype chain.