不是构造函数的jquery函数

3 篇文章 0 订阅

不是构造函数的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原型链上找


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值