Question

我们经常执行一种方法来运行$('div').show();之类的功能。这里show方法会在调用div时显示div。但是$('div').length;呢？长度是属性而不是方法，但也用于获取div的大小。那么，该属性如何被称为方法？任何新的例子对我来说都会更加清晰。

Answer 1

jQuery集合只是元素的数组。 length属性来自数组。 jQuery在需要时更新长度。例如，使用非常简化版本的jQuery：

var $ = (function(){

  function jQuery(sel) {
    // an array to hold the elements queried from the DOM
    this.el = [].slice.call(document.querySelectorAll(sel));
    // set the length of the array
    // as a property on the current instance
    this.length = this.el.length;
  }

  jQuery.prototype = {
    // a method that does not modify the length
    show: function() {
      this.el.forEach(function(x){
        x.style.display = 'block';
      });
      return this;
    },
    // a method that modifies the length
    parent: function() {
      this.el = this.el.map(function(x){
        return x.parentNode;
      });
      this.length = this.el.length; // update length
      return this;
    }
  };  

  return function(sel) {
    return new jQuery(sel);
  };
}());

$('ul').length; //=> the constructor set up the length
$('ul li').parent().length //=> the parent method updated the length

Answer 2

正如下面的评论中指出的那样，jQuery的length属性不是特殊属性：它只是jQuery上的常规数字属性。如果要查看相关证明，请打开控制台窗口（在已链接jQuery的站点上），然后键入以下内容：

Object.getOwnPropertyDescriptor($, 'length')

你会发现它只是一个普通的数字属性。

当你使用jQuery选择器时，它会针对DOM运行选择器并正确设置length属性：没有魔法。

但是，JavaScript确实可以拥有具有get和set功能的属性，这是非常好的功能。

您可以将Object.defineProperty用于此目的：

var o = {}

Object.defineProperty(o, 'foo', {
    get: function() { return 'bar'; },
    set: function(val) { console.log('setting value to '+val); },
});

然后你可以把它称为财产：

o.foo             // returns 'bar'
o.foo = 'baz';    // prints to console

有关详细信息，请参阅MDN documentation。

这是一个将颜色名称转换为RGB字符串的愚蠢示例：

Object.defineProperty(o, 'color', {
    get: function() { return this._color; },
    set: function(val) {
        if(val.match(/^#/)) this._color = val;
        switch(val){
            case 'red': this._color = '#f00'; break;
            case 'green': this._color = '#0f0'; break;
            case 'blue': this._color = '#00f'; break;
            case 'white': this._color = '#fff'; break;
            case 'black': this._color = '#000'; break;
        }
    },
});

财产如何作为一种方法？

2 个答案: