一个关于js链式调用的问题_百度知道
一个关于js链式调用的问题
varoptions={smg1:'Hello',smg2:'world'};functionchangeText(el,stg1,stg2){el.innerText=stg1+''+stg2+'!';};varplugin={config:function(opts){//参数覆盖for(varkeyinopts){optio...
var options = {
smg1: 'Hello',
smg2: 'world'
function changeText(el, stg1, stg2) {
el.innerText = stg1 + ' ' + stg2 + '!';
var plugin = {
config: function(opts) { //参数覆盖
for (var key in opts) {
options[key] = opts[key];
listen: function(elem) { //监听dom元素
var elems = document.querySelectorAll(elem);
var i = elems.
while (i--) {
changeText(elems[i], options.smg1, options.smg2);
};有这么一段代码，其中config和listen是对象api的函数，而且都return this以便于链式调用。但是只有plugin.config({smg1:'Hey',smg2:'Jack'}).listen('.demo');有效，如果调换一下顺序，plugin.listen('.demo').config({smg1:'Hey',smg2:'Jack'});就无效了。。球解答- -实在没财富值了。。。拜谢
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
方法（）.方法（）.方法（）；中间直接用点链接；直接调用方法（）；
为你推荐：
其他类似问题
您可能关注的内容
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
通过代码如下:
function functionFunction(str1) {
return function(str2) {
return str1 + ', ' + str2;
这道题只是了传入两个参数，但是如果要实现这样呢
functionFunction('a')('b')('b')('d')...
//打印出a, b, c, d....
常规的链式调用都是形如fn.a().b().c()... 这种形式不知道该如何实现functionFunction('a')('b')('b')('d')...这种形式？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
const functionFunction = (s) =& {
const func = (str) =& {
s += ',' +
func.toString = func.valueOf = () =&
alert(functionFunction(2)(3)(4)) // 2,3,4
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。JS 链式调用
zYUI3 Node对象实现链式调用的方式如下：
Y.one('#id').setStyle('border','1px').setAttribute('title','test');
大家都知道，JavaScript链式调用只是语法的招数。依据JavaScript的灵活性，实现的方法也不止一种，一起来看。
注：前两种实现我直接拷贝了 的文章
中的代码，在此谢过。
第一种链式调用方法，代码如下。缺点是每个需要链式调用的方法都要返回当前对象。
&span&function ClassA(){
this.prop1 = null;
this.prop2 = null;
this.prop3 = null;
ClassA.prototype = {
method1 : function(p1){
this.prop1 = p1;
return this;
method2 : function(p2){
this.prop2 = p2;
return this;
method3 : function(p3){
this.prop3 = p3;
return this;
var obj = new ClassA();
&/span&obj.method1(1).method2(2).method(3);
第二种方法可以在不改变原有方法的情况下模拟链式调用。无论原有方法是否返回当前对象，都可以使用。
但使用的风格略有不同。如下：
function chain(obj){
var fn = function(method){
if(arguments.length &= 0){
var args = Array.prototype.slice.call(arguments, 1);
obj[method].apply(obj, args);
function ClassB(){
this.prop1 = null;
this.prop2 = null;
this.prop3 = null;
ClassB.prototype = {
method1 : function(p1){
this.prop1 = p1;
method2 : function(p2){
this.prop2 = p2;
method3 : function(p3){
this.prop3 = p3;
var result = chain(obj)('method1',4)('method2',5)('method3',6)();
接下来介绍YUI中Node类实现的链式调用方法。
在YUI3中，Node类的基础是Dom，很多Node类的方法都是调用Dom类的同名方法，如上面提到的setAttribute、setStyle等，
在Dom类源码中也未设置返回本对象，在Node类提供了importMethods方法来导入Dom中相同的方法并支持链式调用。示例代码如下：
function Dom(id){
this.dom = document.getElementById(id);
Dom.setStyle = function(node,name,value){
node.dom.style[name] =
Dom.setAttribute = function(node,name,v){
node.dom.setAttribute(name,v);
function Node(id){
this.dom = document.getElementById(id);
Node.addMethod = function(method,fn){
Node.prototype[method] = function(){
var me = this;
arguments = Array.prototype.slice.call(arguments);
arguments.unshift(me);
fn.apply(me,arguments);
Node.importMethods = function(host,methods){
for(var i in methods){
var m = methods[i];
var fn = host[m];
Node.addMethod(m,fn);
var methods = ['setStyle','setAttribute'];
Node.importMethods(Dom,methods);
var n = new Node('log').setStyle('border','2px solid red').setAttribute('t',22);
在实际使用中，可以对原有的对象方法（如Dom中的方法）扩展到另一个类中（如Node类），在Node类中进行链式调用。当然也可以使用同样的方式（importMethods）不扩展而是覆盖Dom中的方法。
JavaScript设计模式 --- 方法的链式调用
js链式调用
js链式调用的原理
js的链式调用-如何实现类似jquery的链式调用
jquery特殊效果、链式调用
js 链式操作
javascript实现简单的链式调用
链式语法的使用
jQuery链式语法
用js生成页面 并且响应click事件
没有更多推荐了，在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
举个栗子：
比如说获取属性这个功能。一般是obj.style.属性名。扩展开来，IE有obj.currentStyle.属性名,其他浏览器是getComputedStyle()方法。这里我有个疑问，方法的实现好理解，就是属性名对应一个函数，直接传参调用就可以了。但是JS了里面的点式调用内部是如何实现的呢？在比如，str.length就能直接返回长度，这个我猜测是一个length对应的立即执行函数所以不要加小括号，但是str.charAt(),这种就是一个一个属性名对应的一个函数。
总的来说，我就是不清楚a.b.c.d这种在JS里面该怎么实现。
ps：前端小白，理解应该会有很多不到位的地方，应该也会有很多错误，请各位见谅！
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
一般就是return this
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可以用函数式的方式实现：
var Container = function(x) {
this.value =
Container.of = x =& new Container(x);
var a = Container.of(1);
Container.prototype.map = function(f) {
return Container.of(f(this.value))
var b = Container.of(3)
.map(x =& x + 2)
.map(x =& x + '?'); //5?
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
就像是链式运动一样，js里面有封装好的，并且jq里面的事件或者运动都有链式的，理解起来就是干了a事件紧接着干b事件，依次执行
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
搜一下练市函数语法
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
str.length 是调用str(或者是原型链的)length的属性。str.charAt() 是它的方法。跟立即执行函数毫无关系。
你要理解属性与方法的概念。例如：
length: 2,
charAt: function() {
console.log('调用了charAt函数')
length 是属性，charAt是方法。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
链式调用，用过jquery的都知道这很方便
模拟一下就是
var obj={};
obj.a=function(){
console.log("a")
return this
obj.b=function(){
console.log("n")
return this
obj.a().b();
至于楼主不理解的 a.b.c.d怎么实现,我觉得就没必要，返回对象本身有什么意义。。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
方法链，当方法的返回值是一个对象，这个对象就可以继续调用它的方法。一般当函数不需要返回值时，直接return this，余下的方法就可以基于此继续调用。如：shape.setX(100).setY(100).setSize(100)
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
如果是一般的对象比如jq对象的链式调用的话会在方法里面写上 return this把原对象返回做调用的，也不一定是原对象也可能是数组或者是字符串取决于你的函数到底是干什么用的。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
链式调用在 JS 里面是一个专有名词，指 $('#demo').css('color', 'red').show() 这种形式的，通过链式来执行多个函数。
你想问的是JS 中的对象方法和对象属性吧？
var obj = {
name: 'test',
say: function(){
alert('my name is'+ this.name);
obj. // 访问 obj 的 name 属性
obj.say(); // 执行 obj 的 say 方法
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。&&&&&&&&&&&
(1).链式调用
&&&&&&&&$("#mybtn").css("width","100px")
&&&&&&&&&&&&&&&&.css("height","100px")
&&&&&&&&&&&&&&&&.css("background","red");
(2).在对属性进行操作时建议使用JSON形式控制样式
$("#mybtn").css({&&&&width:200,&&&&height:"200",&&&&"background-color":"red"})
(3).事件中this的指向
//事件中this的指向
//JQuery中提示了一个方法,该方法可以将原生JS元素对象
转换成JQ对象
//语法结构:$(原生JS元素对象)
console.log($(this).html());
//css方法若传递一个参数可以获取属性名的属性值
//当使用JQ中的方法取值是一般都无法进行链式调用,
//原因是方法内部return的已经不是JQ实例本身了
var $result1 = $("div").css("width");
console.log($result1);
(4).以下是链式调用原理
&var MyJQ = function(){&&&&&&&}&&&&&&&&MyJQ.prototype = {&&&&&&&&&&&&css:function(){&&&&&&&&&&&&&&&console.log("设置css样式");&&&&&&&&&&&&&&&&&&&&&&&&&&&&},&&&&&&&&&&&show:function(){&&&&&&&&&&&&&&&&console.log("将元素显示");&&&&&&&&&&&&&&&&&&&&&&&&&&&},&&&&&&&&&&&hide:function(){&&&&&&&&&&&&&&&&console.log("将元素隐藏");&&&&&&&&&&&}&&&&&&&};&&&&&&&&var myjq = new MyJQ();&&&&&&&&myjq.css().css().show().hide();
阅读(...) 评论()