/* Build an object with the new operator, typically over four steps:
A. Creating a new object
B. Assign the scope of the constructor to the new object (so this points to the new object)
C. Executing code in a constructor
D. Return this new object
The last point is that we just need to return a new object. In fact, the new operator mainly relates the prototype chain to the instance, which is the most critical point, so if we need the prototype chain we have to deal with the new operator. Otherwise this becomes the Window object. */
/* var $$ = Ajquery = function (selector) {this.selector = selector; return this} Ajquery.fn = Ajquery.prototype = {selectorname:function () {return this.selector; }, Constructor:ajquery} var a = new $$ (' AAA '); Instantiate A.selectorname ()//AAA//Get selector name
First of all, we will transform jquery without new format, and we can determine whether this is the current instance by instanceof:
var $$ = Ajquery = function (selector) {if (! ( This instanceof Ajquery) {As long as this constructor appears on the instance's prototype chain then Instanceof returns true return to new Ajquery (selector); } this.selector = selector; Return this} but be careful not to write like this:
var $$ = Ajquery = function (selector) {this.selector = selector; return new Ajquery (selector); } uncaught rangeerror:maximum Call stack size exceeded this will recursively recursive itself, resulting in a dead loop and overflow.
jquery in order to avoid the problem of this cycle of death, the method is to take the prototype of an Init method as a constructor
var $$ = Ajquery = function (selector) {//Put Init on the prototype as the constructor return new AjQuery.fn.init (selector);}
Ajquery.fn = Ajquery.prototype = {name: ' Aaron ', Init:function () {Console.log (This)}, Constructor:ajquery }
This does solve the problem of cyclic recursion, but again, Init is a ajquery prototype as a constructor of the method, then its this is not ajquery, so this is not fully reference to the Ajquery prototype, So here the Init method and the ajquery are separated into 2 independent constructors by new.
Static and instance method sharing design keep the previous section on the question of splitting out 2 constructors, let's first look at the design of jquery in the interface:
Traversal method:
$ (". Aaron"). each ()//As an instance method exists $.each ()//As static method exists this is the most common traversal method, the first statement is called to have the specified context, that is (". Aaron") Gets the DOM collection, the second statement $.each () The function can be used to iterate over any collection, whether it is a "name/Value" object (JavaScript Object) or an array. In the case of an iterative algebraic group, the callback function passes an array index and the corresponding array value as parameters each time. 2 is essentially a traversal, so are we going to write 2 methods?
Let's look at the source code of jquery:
Jquery.prototype = {Each:function (callback, args) {return Jquery.each (this, callback, args); }} instance method is taken from static method, in other words this is static and instance method sharing design, static method hangs on the jquery constructor, where is the prototype method hanging?
We didn't say in the last verse. Does the interior divide a new constructor init? jquery uses the Init method on the new prototype prototype as the constructor, so the prototype chain method of Init is the method of the instance, so jquery divides 2 different invocation modes by 2 constructors, one static and one prototype.
method is shared, and the instance method is taken from a static method, 2 constructors are completely isolated, how do you handle this?
Look at the scenario that jquery gives:
The finishing touch of a init.prototype = Jquery.fn, the Jquery.prototype prototype of the reference to the JQuery.fn.init.prototype prototype, so that the 2 constructors to associate the prototype.
Ajquery.fn = Ajquery.prototype = {name: ' Aaron ', Init:function (selector) {this.selector = selector; return this; }, constructor:ajquery} ajQuery.fn.init.prototype = Ajquery.fn This code is the core of the whole structure design, there is such a processing, the entire structure is alive! Have to admire the author's design ideas, ingenuity. The prototype delivery solves the problem by passing the prototype of jquery to JQuery.prototype.init.prototype. In other words, jquery's prototype object overrides the Init constructor's prototype object because it is a reference pass so there is no need to worry about the performance of this circular reference.
*/
JavaScript and Aaron great God learn jquery source notes
