javascript中的链式调用
作者:bea
jQuery中形如$("#txtName").addClass("err").css("font-size","12px").select().focus();的方式让人不得不为之着迷。其实现机制就是链式调用。链式调用就是调用对象的方法后返回到该对象,严格来讲它并不属于语法,而只是一种语法技巧,js令人着迷的一点就是这里。 没有返回值的方法属于赋值器方法,显然它很容易实现链式调用,前提是正确理解this指针的用法。 代码如下: function W(){ this.n
jQuery中形如$("#txtName").addClass("err").css("font-size","12px").select().focus();的方式让人不得不为之着迷。其实现机制就是链式调用。链式调用就是调用对象的方法后返回到该对象,严格来讲它并不属于语法,而只是一种语法技巧,js令人着迷的一点就是这里。
没有返回值的方法属于赋值器方法,显然它很容易实现链式调用,前提是正确理解this指针的用法。
代码如下:
function W(){
this.name="Wang Hongjian";
this.gender="male";
}
W.prototype.sayHi=function(){
alert("Hello,everybody
My name is " + this.name);
return this;
};
W.prototype.doSomething=function(){
alert("I'm working");
return this;
}
W.prototype.sayGoodbye=function(){
alert("Goodbye,everybody");
return this;
};
var w=new W();
w.sayHi().doSomething().sayGoodbye();
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript链式调用 http:///</title>
<script type="text/javascript">
function W(){
this.name="Wang Hongjian";
this.gender="male";
}
W.prototype.sayHi=function(){
alert("Hello,everybody
My name is " + this.name);
return this;
};
W.prototype.doSomething=function(){
alert("I'm working");
return this;
}
W.prototype.sayGoodbye=function(){
alert("Goodbye,everybody");
return this;
};
var w=new W();
w.sayHi().doSomething().sayGoodbye();
</script>
</head>
<body>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
没有返回值的方法属于赋值器方法,显然它很容易实现链式调用,前提是正确理解this指针的用法。
代码如下:
function W(){
this.name="Wang Hongjian";
this.gender="male";
}
W.prototype.sayHi=function(){
alert("Hello,everybody
My name is " + this.name);
return this;
};
W.prototype.doSomething=function(){
alert("I'm working");
return this;
}
W.prototype.sayGoodbye=function(){
alert("Goodbye,everybody");
return this;
};
var w=new W();
w.sayHi().doSomething().sayGoodbye();
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript链式调用 http:///</title>
<script type="text/javascript">
function W(){
this.name="Wang Hongjian";
this.gender="male";
}
W.prototype.sayHi=function(){
alert("Hello,everybody
My name is " + this.name);
return this;
};
W.prototype.doSomething=function(){
alert("I'm working");
return this;
}
W.prototype.sayGoodbye=function(){
alert("Goodbye,everybody");
return this;
};
var w=new W();
w.sayHi().doSomething().sayGoodbye();
</script>
</head>
<body>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- jquery validator 插件增加日期比较方法
- 判定对象是否为window的js代码
- javascript 定义新对象方法
- javascript inneHTML的地雷
- javascript 包裹节点 提高效率
- Jquery乱码的一次解决过程 图解教程
- JavaScript CSS修改学习第六章 拖拽
- JavaScript CSS修改学习第五章 给“上传”添加样式
- JavaScript CSS 修改学习第四章 透明度设置
- JavaScript CSS修改学习第三章 修改样式表
- JavaScript CSS修改学习第二章 样式
- JavaScript CSS修改学习第一章 查找位置
- JavaScript DOM 学习第九章 选取范围的介绍
- JavaScript DOM学习第八章 表单错误提示
- JavaScript DOM 学习第七章 表单的扩展
- JavaScript DOM 学习第五章 表单简介
- JavaScript DOM学习第四章 getElementByTagNames
- JavaScript DOM 学习第三章 内容表格
- JavaScript DOM 学习第二章 编辑文本