AJax技术

Ajax标签导航实例详解(2)

字号+ 作者:H5之家 来源:H5之家 2015-09-24 08:10 我要评论( )

调用alert(sum(9));时,其中函数内部包含了对sum自身的引用,函数名仅仅是一个变量名,在函数内部调用sum即相当于调用一个全局变量,不能很好的体现出是调用自身,这时使用callee会是一个比较好的方法。 apply 和 c

调用alert(sum(9));时,其中函数内部包含了对sum自身的引用,函数名仅仅是一个变量名,在函数内部调用sum即相当于调用一个全局变量,不能很好的体现出是调用自身,这时使用callee会是一个比较好的方法。

apply 和 call 它们的作用都是将函数绑定到另外一个对象上去运行,两者仅在定义参数方式时有所区别:

apply(thisArg,argArray);

call(thisArg[,arg1,arg2…] ]);

即所有函数内部的this指针都会被赋值为thisArg,这可实现将函数作为另外一个对象的方法运行的目的

apply的说明:如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。如果没有提供 argArray 和 thisArg 任何一个参数,那么 Global 对象将被用作 thisArg,并且无法被传递任何参数。

call的说明:call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisArg 指定的新对象。 如果没有提供 thisArg 参数,那么 Global 对象被用作 thisArg。

应用call和apply还有一个技巧在里面,就是用call和apply应用另一个函数(类)以后,当前的函数(类)就具备了另一个函数(类)的方法或者是属性,这也可以称之为“继承”。看下面示例:

// 继承的演示
function base() {
this.member = "dnnsun_Member";
this.method = function() {
alert(this.member);
}
}

function extend() {
base.call(this);
alert(member);
alert(this.method);
}

上面的例子可以看出,通过call之后,extend可以继承到base的方法和属性。

呵呵,你可能发现了,在javascript框架prototype里就使用apply来创建一个定义类的模式,其实现代码如下:

var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}

从代码看,该对象仅包含一个方法:Create,其返回一个函数,即类。但这也同时是类的构造函数,其中调用initialize,而这个方法是在类创建时定义的初始化函数。通过如此途径,就可以实现prototype中的类创建模式,示例代码:

var vehicle=Class.create();

vehicle.prototype={
initialize:function(type){
this.type=type;
}

showSelf:function(){
alert("this vehicle is "+ this.type);
}
}

var moto=new vehicle("Moto");
moto.showSelf();

呵呵,越扯越多了,现在清楚了arguments对象的用法了吧!哈哈,还是有些收获的吧?^-^!!! 不过该回到我们的主题了,怎么实现点击标签(li)触发更改样式的事件。还是接着看我们的ajaxtab.js的代码吧:

for(var i=0;i<arguments.length;i++){
var tabs = (arguments[i]);
}

看看上面讲的arguments的用法,呵呵,这里我们就获取了全部的标签导航菜单了。arguments.length = ?等于2,arguments[i]是什么,就是我们传的参数本身(tabsEvent("news","sports");),那么(arguments[i])就是我们的标签菜单,具体点就是("news")和("sports")了

相关链接:

Ajax标签导航实例详解-代码篇

Ajax标签导航实例详解-CSS技巧篇

Ajax标签导航实例详解-Javascript技巧篇

Ajax标签导航实例详解-DOM技巧篇

Ajax标签导航实例详解-大结局

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JQuery实现Ajax加载图片的方法

    JQuery实现Ajax加载图片的方法

    2016-02-24 17:01

  • 判断用户是不是为ajax请求

    判断用户是不是为ajax请求

    2016-02-24 17:00

  • Ajax与WEB开发 by alixixi.com

    Ajax与WEB开发 by alixixi.com

    2016-02-11 11:02

  • jQuery.ajax()的相关参数及使用

    jQuery.ajax()的相关参数及使用

    2016-02-08 16:00

网友点评