不是构造函数的jquery函数
(jquery编程理念Write less,do more)
例:
var
version = "3.0.0",
// Define a local copy of jQuery
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery.fn.init( selector, context );
},
// Support: Android <=4.0 only
// Make sure we trim BOM and NBSP
rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,
// Matches dashed string for camelizing
rmsPrefix = /^-ms-/,
rdashAlpha = /-([a-z])/g,
// Used by jQuery.camelCase as callback to replace()
fcamelCase = function( all, letter ) {
return letter.toUpperCase();
};
jQuery.fn = jQuery.prototype = {
// The current version of jQuery being used
jquery: version,
constructor: jQuery,
// The default length of a jQuery object is 0
length: 0,
toArray: function() {
return slice.call( this );
},
// Get the Nth element in the matched element set OR
// Get the whole matched element set as a clean array
get: function( num ) {
return num != null ?
// Return just the one element from the set
( num < 0 ? this[ num + this.length ] : this[ num ] ) :
// Return all the elements in a clean array
slice.call( this );
},
// Take an array of elements and push it onto the stack
// (returning the new matched element set)
pushStack: function( elems ) {
// Build a new jQuery matched element set
var ret = jQuery.merge( this.constructor(), elems );
// Add the old object onto the stack (as a reference)
ret.prevObject = this;
// Return the newly-formed element set
return ret;
},
// Execute a callback for every element in the matched set.
each: function( callback ) {
return jQuery.each( this, callback );
},
map: function( callback ) {
return this.pushStack( jQuery.map( this, function( elem, i ) {
return callback.call( elem, i, elem );
} ) );
},
slice: function() {
return this.pushStack( slice.apply( this, arguments ) );
},
first: function() {
return this.eq( 0 );
},
last: function() {
return this.eq( -1 );
},
eq: function( i ) {
var len = this.length,
j = +i + ( i < 0 ? len : 0 );
return this.pushStack( j >= 0 && j < len ? [ this[ j ] ] : [] );
},
end: function() {
return this.prevObject || this.constructor();
},
// For internal use only.
// Behaves like an Array's method, not like a jQuery method.
push: push,
sort: arr.sort,
splice: arr.splice
};
中可以看出jquery是用ES5里的标准的面向对象模式,也就是基于构造函数和原型的。
但是仔细看就可以看出jquery的构造函数跟我们平常用的构造函数不太一样,jquery返回的其实是jquery原型里的一个init对象。
下边我们来看一下普通的构造函数
//1、创建一个构造函数
function Student(name,sex){
this.name = name;
this.sex = sex;
}
//2、创建构造函数的原型对象
Student.prototype={
constructor:Student,
study:function(){
console.log(this.name+"是一个好学生")
}
}
var stu = new Student("张飞","男");
stu.study();
对比一下就会发现
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery.fn.init( selector, context );
},
里并没有用this.属性=参数而是传给了原型的init方法,另一方面我们采用构造函数的方法
调用构造函数必须要new一个对象,但是在调用jquery对象的时候我们并没有new对象
这是因为jquery在 new jQuery.fn.init( selector, context );在new了一个对象之后又手动return了一下
这样就不需要系统的默认的返回对象了,这样我们平时在调用jquery对象的时候就不用在写new了
我们来看一个例子:
function Student(name,sex){
return new stu(name ,sex);
}
function stu(name,sex){
this.name = name;
this.sex = sex;
}
Student.prototype={
constructor:Student,
study:function(){
console.log(this.name+"是一个好学生!");
}
}
stu.prototype = Student.prototype;//将stu的原型等于Student的原型
var s = Student("张飞","男");
console.log(s);
s.study();//s.study()js引擎会在stu中查找study方法,如果没找到就会在stu原型链上找