Question

我有一个问题，让这个OOP工作。基本上，这个$("notfound")不在文档上。它犯了一个错误。但如果将其更改为$("parent")，则可以使用，因为它位于文档上。

检查这个小提琴：

在console.log中

未定义子项。

如何让这件事有效？

我的代码出了什么问题？

"use strict"

var $, i;

(function() {

    $ = function(el, context) {
    		context = context || document;
        return new obj$(el, context);
    };

    var obj$ = function(el, context) {
       var cl   = context.getElementsByClassName(el),
           loop = cl.length;

       this.length = loop;

       for (i = 0; i < loop; i++) {
           this[i] = cl[i];
       }

   };

   obj$.prototype = {

       find : function(el) {

           if (this.length == 1) {

               return $( el, this[0] );
           }

       },
       css : function(obj, data) {

           if (this.length == 1) {
               this[0].style[obj] = data;
               return this;
           }

        }
    };


})();

var parent = $("notfound"), // this one cause error
    child  = parent.find("child"); // throw an error child is undefined

child.css("color", "orange");
parent.css("color", "purple");

<div class="parent">parent
    <div class="child">child</div>
</div>

Answer 1

您所说的导致错误的行不会导致错误。

导致错误的行是：

child.css("color", "orange");

导致错误，因为这一行：

var parent = $("notfound"),

...返回parent对象length == 0，所以这一行：

child  = parent.find("child"); // throw an error child is undefined

...在find不是this.length的对象上调用1，因此find中的代码不会进入if的正文{1}}声明并且您不会返回任何内容。这意味着调用parent.find(...)会导致undefined，您已将其分配给child。因此，child.css(...)是尝试在css上致电undefined。

如果你想制作类似jQuery的东西，你会想要添加

return $();

...如果parent.find为0（至少），则查找this.length：

find : function(el) {
    if (this.length == 1) {
        return $( el, this[0] );
    }
    return $();
}

同样，如果您想模仿jQuery，那么始终希望return this函数中的css，而不仅仅是您有一个元素。< / p>

以下是必要的最低更改的更新：

＆＃13;

"use strict"

var $, i;

(function() {

    $ = function(el, context) {
    		context = context || document;
        return new obj$(el, context);
    };

    var obj$ = function(el, context) {
       var cl   = context.getElementsByClassName(el),
           loop = cl.length;

       this.length = loop;

       for (i = 0; i < loop; i++) {
           this[i] = cl[i];
       }

   };

   obj$.prototype = {

       find : function(el) {

           if (this.length == 1) {

               return $( el, this[0] );
           }

           return $();                       // Added
       },
       css : function(obj, data) {

           if (this.length == 1) {
               this[0].style[obj] = data;
           }
           return this;                      // Moved

        }
    };


})();

var parent = $("notfound"), // this one cause error
    child  = parent.find("child"); // throw an error child is undefined

child.css("color", "orange");
parent.css("color", "purple");

＆＃13;

<div class="parent">parent
    <div class="child">child</div>
</div>

＆＃13;

Javascript链接返回undefined

1 个答案: