jQuery选择这样返回对象
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );//从jQuery.fn里调用的方法
};
jQuery.fn = jQuery.prototype = { //这里jQuery.prototype,目前在这段代码中没用 。
init: function(){
console.log("初始化完成");
return this;
}
//功能方法
}
jQuery.fn.init.prototype = jQuery.fn //让所有实例化jQuery.fn.init都继承这个原型中的方法。
console.log(jQuery());//{...}
这里有一个重要的知识点,new 到底做了什么:new 构造函数jQuery.fn.init,将返回一个对象,这个对象会继承构造函数的原型jQuery.fn.init.prototype,而这个原型被我所们改写,指向jQuery.fn,也就是一个对象,对象里拥有init和所有的功能方法。这就实现了我们想返回一个拥有所有功能方法的对象。
我们也可以这样
var jquery = function(){
if(!(this instanceof jquery)) return new jquery();
console.log("初始化完成");
}
jquery.fn = jquery.prototype = {
//功能方法
}
console.log(jQuery());//{...}
其实,根本要解决的问题是返回一个对象,这个对象默认要拥有功能方法。为了最大效率,两个例子都选择不把功能方法写在对象里,而是通过对原型的改写,让实例化默认继承。
链式调用
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
};
jQuery.fn = jQuery.prototype = {
init: function(){
console.log("初始化完成");
return this;
},
add:function(){
console.log("add完成")
return this;
}
}
jQuery.fn.init.prototype = jQuery.fn
console.log(jQuery().add().add());
javascript中,函数中的this指向调用它的对象。本例,jQuery()实例化了一个对象,这个对象调用了add()方法,输出add,然后返回this,这个this实际就是调用它的对象jQuery(),因此无论执行了多少方法,只要返回this,那之前的结果都是最初的对象,都可以继续使用最初这个对象里功能方法。
向对象里添加方法的函数
var object = {
name: "winderby"
}
object.extend = function(obj){
for (var key in obj)
this[key] = obj[key];
return this;
}
object.extend({
getName:function(){
console.log(this.name);
}
})
object.getName();
合并对象
function extend() {
for (var i = 1; i < arguments.length;i++){
for(var key in arguments[i]){
arguments[0][key] = arguments[i][key]
}
}
}
var student = {
name:"winderby",
age: "18"
}
var arrangement = {
name:"winderby",
lesson:"english"
}
extend(student,arrangement);
console.log(student)
jQuery的extend
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
};
jQuery.fn = jQuery.prototype = {
init: function(){
return this;
}
}
jQuery.fn.init.prototype = jQuery.fn
jQuery.fn.extend = jQuery.extend = function(){//指向同一个方法
var i = 1;
var target = arguments[0];
var length = arguments.length;
if(length === 1){ //1个参数时
target = this;
i--;
}
for (; i < arguments.length;i++){ //主要功能体,遍历,赋值
for(var key in arguments[i]){
target[key] = arguments[i][key]
}
}
} //jQuery.extend合并对象测试
var student = {
name:"winderby",
age: "18"
}
var arrangement = {
name:"winderby",
lesson:"english"
}
jQuery.extend(student,arrangement);
console.log(student); //jQuery.fn.extend添加jQuery方法测试
jQuery.fn.extend({
setName: function(myName) {
this.myName = myName
return this;
},
getName: function() {
console.log(this.myName)
return this;
}
})
jQuery().setName("winderby").getName();
将前面两个功能合并到一个jQuery函数里就成了jQuery的extend。目前这个extend可以通过jQuery.extend合并对象,也可以通过jQuery.fn.extend,向jQuery.fn添加方法。
至于第三种用法jQuery(true,{..}),也很简单,就不赘述了。