Thoughts raised by the creation of objects by jquery

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.