Question

我使用以下代码，但它经常给我错误：

TypeError：container（＆＃34; accounts＆＃34;）。atPosition（＆＃34;＃left-top＆＃34;）未定义

代码是：

function container(name, position) {
    return {
        pos: null,
        atPosition: function(position) {

            $(position).html(this.newContainer());
            //$(position+" .main").html("yes");
            this.pos = position;
        },
        populateData: function(rdata) {
            $("#left-top .main").html(rdata);
        },
        newContainer: function() {
            //alert(this.pos);
            return '<h3>' + name.toTitleCase() + '</h3>\
                <div class="main">\
                </div>';
        }
    };
}

container('accounts').atPosition('#left-top').populateData("yahoo!!!!");

为什么我收到此错误，我该如何解决？

Answer 1

你应该从链接函数返回this。默认情况下，函数返回undefined（如果你不使用new operator）。通过从没有任何东西返回的函数返回这将有助于链接。

function container(name, position) {
    return {
        pos: null,
        atPosition: function(position) {
            $(position).html(this.newContainer());
            //$(position+" .main").html("yes");
            this.pos = position;

            return this;
        },
        populateData: function(rdata) {
            $("#left-top .main").html(rdata);
            return this;
        },
        newContainer: function() {
            //alert(this.pos);
            return '<h3>' + name.toTitleCase() + '</h3>\
                <div class="main">\
                </div>';
        }
    };
}

Answer 2

您分配给atPosition的功能没有return声明。

因此，当您致电atPosition('#left-top')时，您将获得默认的返回值undefined

您需要返回要拨打populateData的对象（应为this）

Answer 3

函数链是不是特殊的javascript语法，如果需要，可以用Java，Python或任何支持OOP的方法实现它。

a.functionX().functionY()有效，因为functionX()再次返回一个对象，其中方法名为functionY()

在您的情况下，functionX()应返回调用它的同一对象，因此return this;将解决您的问题

但这不是故事的结尾!!!

@Rich S在他的回答中提到：

为了使链接工作，你需要“归还”;在你想要链接的任何函数的末尾。

不必为真，只要您返回对象（或任何对象），链接就会起作用，这是一个示例：

var str ="abc";
var strFromChain = str.replace('a','x').toUpperCase();
// use function chainning
document.write(strFromChain+'\n');
// result should be XBC

var str1 = "abc";
str1.replace('a','x');
var str1NotFromChain = str1.toUpperCase();
// if replace() returned this, str1NotFromChain should also be XBC
document.write(str1NotFromChain)
// but is it???????

显然replace() str方法没有返回this而是返回了一个具有不同值的新字符串，这很容易理解，因为字符串是不可变的，无论您在str调用哪种方法，其值始终为"abc"。

我只是在这里指出一点，链接方法没有必要返回this，如果想要，它可以返回一个新对象。尽管在线教程教你在实现链接函数时使用this（即javascript.issexy），但在使用第三方库时应始终注意返回的内容（即{{3}中的路由链接}）

Answer 4

链接不会自动发生。

为了使链接工作，你需要“归还”;在你想要链接的任何函数的末尾。

实际上，你所做的就是在你返回的任何东西上调用函数。如果你做“归还”;然后你最终会得到一个很好的链接语法，它会影响同一个对象。

jQuery开发者指南是获取高质量JavaScript提示的好地方，鉴于您的问题，我建议您查看http://docs.jquery.com/Plugins/Authoring#Maintaining_Chainability

在javascript中调用链方法

4 个答案: