您的位置:首页 > Web前端 > JQuery

jquery几个基本概念

2012-11-22 09:21 337 查看
prototype是function对象中专有的属性。
_proto_是普通对象的隐式属性,在new一个对象,构造函数在创建对象时,把构造函数中的prototype引用赋给创建的普通对象,会指向prototype所指的对象;
普通对象中的constructor属性指向构造函数,因此一个用构造函数创建的对象可能有两种方式关联到prototype.但继承应该是根据_proto_关联到prototype属性;

如图:


此观点的文章: 参看 李站的文章:悟透javascript中的" 我们已经知道,用 var anObject = new aFunction() 形式创建对象的过程实际上可以分为三步:

第一步是建立一个新对象;

第二步将该对象内置的原型对象设置为构造函数prototype引用的那个原型对象;

第三步就是将该对象作为this参数调用构造函数,完成成员设置等初始化工作。

对象建立之后,对象上的任何访问和操作都只与对象自身及其原型链上的那串对象有关,与构造函数再扯不上关系了" 以及 “语法甘露 中的:上面代码的最后一句证明,新创建的对象的constructor属性返回的是Object函数。其实新建的对象自己及其原型里没有constructor属性,那返回的只是最顶层原型对象的构造函数,即Object。”

综上所述:根据贴子:领悟 JavaScript 中的面向对象 中作者 afcn0的回贴“其实还有补充,就是如果构造函数返回object类型,那new对象无效,prototype问题是楼主还不太了解prototype继承方式,__proto__属性,以及isPrototypeOf方法所至 ” 的提示,查阅了文章:javascript中的继承

Html代码


此文中提到:jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");

  调用这句时,都发生了什么:

  1  当js看见new操作符,它创建一个新的普通对象,并且设置它的__proto__ 属性为Engineer.prototype。

  2 new 操作符传递这个新的对象作为Engineer 构造器的this的值。

  其实最主要做的事就是上面的两件,剩下的都是很简单的函数调用.

根据上文的提示作了简单测试:

Javascript代码


function person(name,b){
this.name=name;
}

person.prototype.sayHello=function(a){
//alert("hello,i am "+this.name);
alert(this==a);
}

function employee(name, salary)
{
person.call(this, name); //调用上层构造函数
this.salary = salary; //扩展的成员
};

var p=new person("yangsp",p);
//p.sayHello(p);
//alert(p.constructor);

//下面两句验证了普通对象中确有_proto_属性,且引用的是prototype对象;(在ff下调试,ie下不可);
alert(p.__proto__==person);
alert(p.__proto__==person.prototype))

//alert("p有prototype属性吗? "+p.prototype); //表明普通对象中没有prototype属性;

另外:ecma-262中提到:every object created by that constructor has an implicit reference to the prototype (called the object's prototype) associated with its constructor 以及其图示;不敢肯定它的implicit
reference间接还是隐式链接;

Jquery中:

1. $是Jquery的简写形式,所以,Jquey()和$()的意思是一样的;所有用$()的地方,$都可以用Jquery代替;

2. 因为不能假定$在任何环境中都是有效的,所以,插件中一般用Jquery定义,而不用$定义;、

3. 用Jquery.extend增加的函数,或者说扩展的函数,可以理解成添加类方法——用类名调用

4. 用Jquery.fn.extend增加的函数,或者说扩展的函数,可以理解成添加对象方法,即添加成员函数,用对象名调用

5. Jquery.fn=Jquery.prototype,所以,Jquery.fn是Jquery.prototype的别名;

6. 那么Jquery.prototype是什么呢? 这个牵涉到Javascript的对象生成过程,以及结构:

建立Javascript普通对象-》Javascript普通对象的constructor属性指向constructor对象,constructor对象的prototype属性指向

prototype对象,Javascript普通对象的隐藏属性_proto_指向prototype对象,具体结果图可以参考

7. 以下代码:

var $jc = $.jcarousel;//$有一个jcarousel属性,该属性也是一个对象(摘自Jcarousel插件),并起别名为$jc

$jc.fn.extend = $jc.extend = $.extend;// $jc 的对象方法=$jc 的类方法=Jquery的类方法;

// 即扩展方法可以使用上面3个方式调用,但意义不同。

8. 代码形式:

(function($){.....})(Jquery)

//用上面的函数形式作为包裹器,把代码包含在内部,含义是:

function($){....}函数定义,有一个形式参数$;

(function($){....})(Jquery)用Jquery作为实参调用上述函数

用途:在该函数内部用$不会引起冲突,所以起到包裹器的作用。

jquery $.fn $.fx是什么意思

$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。

如扩展$.fn.abc()

那么你可以这样子:$("#div").abc();

通常使用extend方法扩展,详细请看API.

$.fx是指jquery的特效。

如果使用显示、滑动、淡入淡出、动画等。

$.fx.off可以关闭动画,其实是直接显示结果。

jquery的extend和fn.extend

jQuery为开发插件提拱了两个方法,分别是:

jQuery.fn.extend(object);

jQuery.extend(object);

jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

jQuery.fn.extend(object);给jQuery对象添加方法。

fn 是什么东西呢。查看jQuery代码,就不难发现。

jQuery.fn = jQuery.prototype = {

   init: function( selector, context ) {//.... 

   //......

};

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。

虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。

jQuery便是一个封装得非常好的类,比如我们用 语句 $("#btn1") 会生成一个 jQuery类的实例。

jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:

$.extend({

  add:function(a,b){return a+b;}

});

便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,

$.add(3,4); //return 7

jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。

jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:

Java代码

$.fn.extend({

alertWhileClick:function(){

$(this).click(function(){

alert($(this).val()); });

}

});

$("#input1").alertWhileClick(); //页面上为:<input id="input1" type="text"/>

$("#input1") 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

真实的开发过程中,当然不会做这么小白的插件,事实上jQuery提拱了丰富的操作文档,事件,CSS ,Ajax、效果的方法,结合这些方法,便可以开发出更加 Niubility 的插件。

jquery(function(){})与(function(){}(jQuery)的区别

1.

jQuery(function(){});

全写为

jQuery(docunemt).ready(function(){

});

意义为在DOM加载完毕后执行ready()方法

2.

(funtion(){

}(jQuery);

实际执行()(para)匿名方法,只不过传递了jQuery对象。

总结:jQuery(funtion(){});用于存放DOM对象的代码,执行其中代码时DOM对象已经存在。

不可用于存放开发插件代码。因为jQuery对象没有得到传递,外部通过jQuery.methodye

调用不来其中方法。

(funtion(){

}(jQuery);用于存放开发插件的代码,执行其中代码DOM不一定存在,直接自动执行DOM操作代码请小心使用

init是fn和prototype的一个方法。想调用只能jQuery.fn.init()或者是jQuery.prototype.init(),那想实现连写形式怎么办呢?

你看我们一般都是这样调用fn里面的函数,$().xxx(),那就要想办法在jQuery中返回fn或者是protoype对象,为了达到这个目的实际上return jQuery.prototype就可以实现,但是程序本身还需要执行init这个方法,那就是下边的代码起了作用,把fn在绑定到init的prototype原型上,这时候就相当月申明了一个jQuery.fn.init类,而且原型指向fn对象,是不是就统一了?这句效果就相当于

jQuery.fn.init=function(selector, context){
//...................
return jQuery().find(selectot);
////其他的fn方法
}
jQuery.fn.init.prototype = jQuery.fn;
fn的init方法和大多数的方法又是返回jQuery数组对象,实现了连写,实际上这里fn属性的定义完全可以去掉。jQuery.fn.init.prototype = jQuery.fn;可以改成jQuery.fn.init.prototype = jQuery.protoype;效果一样,以后的扩展函数可以写成jQuery.protoype.xxx=function(){}但是为了兼容版本就不得不这样写了。
现在是不是大概有点明白了?这个只是从对象引用的角度分析,因为这样分析更容易接受,所以上边讲的调用都是静态调用,jQuery.fn.init();在静态调用的时候prototype就可以理解成一个静态的属性,如果加了new就不一样了,那就是类之间的继承

jQuery.extend和jQuery.fn.extent的区别

西风瘦马 发布于 七月 22, 2009

看完jQuery中文手册和jQuery官方网站后,我觉得里面的jQuery.extend和jQuery.fn.extend的区别有点难,从Google中找了一些资料,加上自己的理解,做以下心得笔记:

jQuery.extend

对jQuery对象的扩展,可以理解为静态方法,是全局的,不需要实例jQuery就可以使用。

PLAIN TEXT
JAVASCRIPT:

<!--

jQuery.extend({

add:
function(a, b)
{

return a + b;

}

});

alert($.add(3,
4));
//7

//-->

jQuery.fn.extend

对jQuery元素的扩展,只能用在jQuery元素上,可以理解为普通方法。定义插件时需要返回this,以支持jQuery的链式操作。

PLAIN TEXT
JAVASCRIPT:

<!--

jQuery.fn.extend({

red:
function()
{

return $(this).css('color',
'#ff0000');

}

});

$('#test').red();

//-->

jQuery元素相当于对象,jQuery相当于对象的构造函数
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: