Question

function _(e) {
    if (typeof e == 'string') {
        if (e.charAt(0) == '#') {
            return document.getElementById(e.slice(1));
        } else if (e.charAt(0) == '.') {
                var c = document.getElementsByClassName(e.slice(1));
            return (c.length==1)?c[0]:c;
        } else {
                var t = document.getElementsByTagName(e);
            return (t.length==1)?t[0]:t;
        }
    } else {
    console.log('Error. Not a valid string in _.');
    }
}

_.prototype.hide = function() {
//testing 
console.log(this)
}

该函数工作正常，但是当我尝试添加方法hide并尝试像_('#menu').hide();一样调用它时，它会抛出错误：TypeError: Object #<HTMLDivElement> has no method 'hide'我误解了什么？

是的，我确实谷歌这个问题，我只是不明白。非常感谢提示。

Answer 1

~~构造函数需要返回自己（return this;）。目前它返回一个DOM对象，如果没有传递字符串，则返回undefined。~~

试试这个：

function _(e) {
  if (!(this instanceof _)){
    return new _(e);
  }

  if (typeof e == 'string') {
    if (e.charAt(0) == '#') {
      this.el = document.getElementById(e.slice(1));
    } else if (e.charAt(0) == '.') {
      var c = document.getElementsByClassName(e.slice(1));
      this.el = (c.length==1)?c[0]:c;
    } else {
      var t = document.getElementsByTagName(e);
      this.el = (t.length==1)?t[0]:t;
    }
    return this;
  } else {
    console.log('Error. Not a valid string in _.');
    throw e + ' is not a valid string';
  }

}

_.prototype.hide = function() {
  console.log(this);
}

您可以像这样调用构造函数：

e = _('#myDiv');
e.hide();

Answer 2

您使用构造函数作为常规函数，因此它不会创建对象，它只会返回您指定的内容。

您可以将它用作常规函数，但是您需要将其自身称为构造函数来创建要返回的对象，并在将其用作构造函数时进行处理：

function _(e) {
  if (!this instanceof _) {
    if (typeof e == 'string') {
      if (e.charAt(0) == '#') {
        return new _(document.getElementById(e.slice(1)));
      } else if (e.charAt(0) == '.') {
        var c = document.getElementsByClassName(e.slice(1));
        return new _((c.length==1)?c[0]:c);
      } else {
        var t = document.getElementsByTagName(e);
        return new _((t.length==1)?t[0]:t);
      }
    } else {
      console.log('Error. Not a valid string in _.');
    }
  } else {
    this.elements = e;
  }
}

您可能会考虑始终为元素使用数组，即使它是单个元素也是如此。现在elements属性将是元素或元素数组，因此每次使用时都必须检查它...

Answer 3

尝试定义您的函数：

var _ = function (e) { };

修改是的，当然不要忘记返回this。

为什么这个原型失败了？

3 个答案: