Question 1 The mystery of creating objects in Jquery
Question 2 The point of this in JavaScript
Question 3 function of return this
Issue 4 instanceof/relationship between objects and classes
Code 1 (Jquery creation object)
var iquery=function () {name= "IQuery";//4return new IQuery.prototype.init ();//1};iquery.prototype={init:function () { Name= "Iqueryprototypeinit"; 5return this; 2},name: "Iqueryprototype"//6};iquery.prototype.init.prototype=iquery.prototype; 3
At this time I have a problem,//1 there is no new difference. There is no difference between the return this at 2. The role of 3 places
Here I'm going to answer question 1 to question 4 by decomposing the//code 1
Code 2 I will//code 1//3 removed//2 Place removed//1 place
var iquery=function () {name= "IQuery"; return IQuery.prototype.init ();}; Iquery.prototype={init:function () {name= "Iqueryprototypeinit";//5},name: "Iqueryprototype"};iQuery (). Name; Result for vm105:1 uncaught typeerror:cannot Read Property ' name ' of undefined (...)
Analysis: iQuery.prototype.init () is called the init function, because the function has no return value, so only the control is returned
So return IQuery.prototype.init () also has no return value so IQuery (). Name; the above error message
Code 3
var iquery=function () {name= "IQuery";//4return new IQuery.prototype.init ();//1};iquery.prototype={init:function () { Name= "Iqueryprototypeinit"; 5},name: "Iqueryprototype"//6};iquery (). Name; The result is undefined here does not prompt the error, but says name is not defined;
Analysis: //4 local variable named IQuery,//5 name is the local variable of init execution IQuery ()
When an Init object is created, Init is the constructor, and the execution process
1 Creating an Object
2 returning the newly created object
This is the difference between a new
Code 4 has a more this
var iquery=function () {name= "IQuery";//4return new IQuery.prototype.init ();//1};iquery.prototype={init:function () { This.name= "Iqueryprototypeinit"; 5},name: "Iqueryprototype"//6};iquery (). Name; The result is Iqueryprototypeinit
Analysis: executing IQuery (). Name; execution process
1 Creating an Object
2 Let this refer to this object
3 Add a property to the object referenced by this name
4 returns the object referenced by this
IQuery () instanceof IQuery//false
IQuery () instanceof iquery.prototype//vm125:1 uncaught typeerror:right-hand side of ' instanceof ' is not callable (...)
Say Iquery.prototype is an object instanceof the right must be a class, that is, the function name
IQuery () instanceof IQuery.prototype.init; True
This call to IQuery () is an object that created the init.
The code is 5 more//2
var iquery=function () {name= "IQuery";//4return new IQuery.prototype.init ();//1};iquery.prototype={init:function () { This.name= "Iqueryprototypeinit"; 5return this; 2},name: "Iqueryprototype"//6};iquery (). Name; The result is Iqueryprototypeinit
Analysis : Executing iquery (). Name; execution process
1 Creating an Object
2 Let this refer to this object
3 Add a property to the object referenced by this name
4 returns the object referenced by this
IQuery () instanceof IQuery//false
IQuery () instanceof iquery.prototype//vm125:1 uncaught typeerror:right-hand side of ' instanceof ' is not callable (...)
Say Iquery.prototype is an object instanceof the right must be a class, that is, the function name
IQuery () instanceof IQuery.prototype.init; True
This call to IQuery () is an object that created the init.
Summary 1 If you use new to create an object, add no return this is the same.
Code 6 Remove//1 at the new//2 where there is a return this
var iquery=function () {name= "IQuery";//4return iQuery.prototype.init ();//1};iquery.prototype={init:function () { This.name= "Iqueryprototypeinit"; 5return this; 2},name: "Iqueryprototype"//6};iquery (). Name; Iqueryprototypeinit
If you remove//5
IQuery (). Name; Iqueryprototype
Analysis: execution IQuery () returned Iquery.prototype, the object created by literal constants
If you do not remove//5, add the Name property to Iquery.prototype to overwrite the original name
Here IQuery.prototype.init () is Iquery.prototype This object calls the Init function
So Init's this point is pointing to Iquery.prototype
Conclusion 2: The This in the function always points directly to the object that calls it, note that it is directly, why is it directly see//code 6
Code 7
var iquery=function () {name= "IQuery";//4return iQuery.prototype.init ();//1};iquery.prototype={init:function () { return this; 2},name: "Iqueryprototype"//6};var temp ={};temp.name= "temp"; Temp.sayname=iquery (). Init; equivalent to Temp.sayname=iquery.prototype.init;temp.name; Results Temptemp.sayName.name; Result Temp
Analysis: execute Temp.sayname=iquery (). Init; Added a Sayname method to the object temp.
Sayname references IQuery (). Init/temp.sayname=iquery.prototype.init
At this point, the return in the init this this is pointing to temp because it is temp calling Init directly
Summary: The this in JavaScript is the context, specifically the context of the function, the object to which the function belongs
The Bind,call,apply method in JavaScript can toggle the context of the function, which is the same as the code//6
Change the direction of this, so it's called context switching.
Code 8 (The most important point in this article) the relationship between the object and the Class (instanceof)
var iquery=function () {name= "IQuery";//4return new IQuery.prototype.init ();//1};iquery.prototype={init:function () { },name: "Iqueryprototype"//6};iquery.prototype.init.prototype=iquery.prototype; 3
Note the increase in//3
This is done:
A:iquery () instanceof IQuery (). Init; True
B:iquery () instanceof IQuery; True
If you remove//3
C:iquery () instanceof IQuery; False
Analysis: I call IQuery () created by the constructor init object ah A: The result is a logical result, B: What a ghost, and he has a hair relationship
See//Code 9//Code 10
Code 9
var Pro={};var a=function () {}; A.prototype=pro;var b=function () {}; B.prototype=pro;var a=new A (); var b=new b (); execution: a instanceof A; Truea instanceof B; Trueb instanceof A; Trueb instanceof B; True
Code 10
var Pro={};var a=function () {}; A.prototype=pro;var b=function () {}; B.prototype=pro;var a=new A (), Var b=new b (), Var c=function () {}; C.prototype=a;var c=new C (); C instanceof A; Truec instanceof B; Truec instanceof C; True
Analysis: See here everyone will understand why jquery designers add iquery.prototype.init.prototype=iquery.prototype;
Although the source uses FN, but FN is jquery.prototype.
I'm giving my conclusion.
Conclusion the object and class (that is, the constructor) in 3:javascript, in addition to the _proto_ property of the object, points to the prototype specified by the class (constructor).
There is no more relationship between the object and the class. The type is determined entirely by the prototype. Objects with all constructors of the same prototype have the same
Type
finally: The init in jquery has return this is the same for creating an object in a way that uses the new function name (). That jquery
Why add, because there are many other methods in jquery that can make chained calls, which return the object created by Init with return this, in order to
Consistent so the return this in Init can really be removed.
Creating an object with the new function name () returns this and no return value because this is returned by default.
Return base type, return will be ignored and return this.
If the return reference type returns the result, it is the object of the reference type.
Thoughts raised by the creation of objects by jquery