JavaScript链接返回未定义

Question

i have a problem for getting this OOP works. basically, this $("notfound") is not on document. it put an error. but if change it to $("parent") it works because it is on document.

check this fiddle :

https://jsfiddle.net/k6j70f1h/8/

in console.log the child is undefined.

how to get this things works?

what's wrong with my code?

 "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

The line you've said is causing the error is not causing the error.

The line causing the error is:

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

It's causing the error because this line:

var parent = $("notfound"),

...returns a parent object with length == 0 , and so this line:

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

...calls find on an object where this.length is not 1 , so the code in find doesn't go into the body of your if statement and you don't return anything. That means calling parent.find(...) results in undefined , which you've assigned to child . Thus, child.css(...) is an attempt to call css on undefined .

If you want to make something jQuery-like, you'll want to add

return $();

...find parent.find if this.length is 0 (at a minimum):

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

Similarly, if you want to emulate jQuery, you'll always want to return this from your css function, not just if you have an element.

Here's an update with the minimum necessary changes:

 "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"); 

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