链接返回的对象 Javascript

Question

我正在开发一个 Javascript 框架，使 DOM 的使用更加容易。现在我有一个名为 ez 的对象，它具有使用 DOM 的方法。这是我的代码：

var ez = new Object();
ez.get = function(v,type) {
    switch(type) {
        case 'id': this.elementData = document.getElementById(v);
            break;
        case 'class': this.elementData = document.getElementsByClassName(v);
            break;
        case 'tag': this.elementData = document.getElementsByTagName(v);
            break;
        case 'css': this.elementData = document.querySelectorAll(v);
    }
    return this; //returns itself
}
ez.content = function() {
        alert(this.elementData); //returns undefined
}

然后，在另一个 Javascript 文件中（在 HTML 文件中的这个文件之后）我执行以下代码 onload:

window.onload = function() {
    ez.get('test','id').content(); //"test" is the id of an element in the DOM and it does have a text node called "test" also
}

我想要的是 ez.get() 到 return 本身（它似乎确实如此）然后 保留其elementData属性。问题是属性的值在我 return this 之后没有保留，它变成了 undefined。我正在尝试做一些类似于 JQuery 所做的事情，您可以在其中链接 -link 方法调用，因为每个方法 return 都是对象。

更新

好的，我确实缩短了 post 的代码，但这是完整的代码：

var ez = new Object();
ez.get = function(v,type) {
    switch(type) {
        case 'id': this.elementData = document.getElementById(v);
            break;
        case 'class': this.elementData = document.getElementsByClassName(v);
            break;
        case 'tag': this.elementData = document.getElementsByTagName(v);
            break;
        case 'css': this.elementData = document.querySelectorAll(v);
    }
    return this;
}
ez.isElementSet = function(execute) {
    if(this.hasOwnProperty('elementData')) {
        return execute();
    } else {
        return null;
    }
}
ez.content = function() {
    return this.isElementSet(function() {
        return this.elementData.innerHTML;
    });
}
window.onload = function() {
    alert(ez.get('test','id').content());
}

这里是 HTML:

<!DOCTYPE html>
    <head>
        <title>EzDom</title>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        <link rel='stylesheet' type='text/css' href='css/style.css' />
        <script type='text/javascript' src='ez.js'></script>
        <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
        <p id='test'>Test.</p>
    </body>
</html>

Answer 1

问题出在这个函数中：

ez.isElementSet = function(execute) {
    if(this.hasOwnProperty('elementData')) {
        return execute();
    } else {
        return null;
    }
}

当您调用 execute() 时，this 的值将被重置（就像它在每次函数调用时所做的那样）并且将不再是您想要的值。这就是为什么您必须在该回调中使用 ez.elementData.innerHTML 的原因。如果您希望 this 的值在回调函数中是特定的值，那么您必须特别确保代码以这种方式设置它。这里有几个选项。最简单的可能就是在设置回调时使用.bind()。

ez.content = function() {
    return this.isElementSet(function() {
        return this.elementData.innerHTML;
    }.bind(this));
}

工作演示：https://jsfiddle.net/jfriend00/ejneaa1x/

有关调用函数时如何设置 this 的更多信息，请参阅：When you pass 'this' as an argument

链接返回的对象 Javascript

Chain-Linking Returned Object Javascript

javascript

methods

properties

object