为什么你可以链接一些JavaScript方法而不是其他方法?

时间:2016-11-03 11:03:42

标签: javascript

我对JavaScript比较陌生,我想知道什么时候可以链接JavaScript方法,什么时候不能,以及什么时候你可以......

我正在创建一个元素,并希望分配一个类名,然后在元素中放入一些文本。但由于某种原因,你无法将这些方法联系起来。 理想情况下,我会做这样的事情:

var li = document.createElement("li").classList.add("className").innerHTML = "Some string";

我理解为什么你不能链接最后一部分,因为你不能分配两次。但我甚至不能连接第二种方法,而是我必须这样做:

var li = document.createElement("li");
li.classList.add("className");
li.innerHTML = "Some string";

为什么?

5 个答案:

答案 0 :(得分:2)

链接并不特别。它只是使用函数的返回值。如果函数返回一个对象上有一个方法,那么你可以通过调用函数的结果直接调用它来使用该方法。也就是说,

foo().bar();

...如果foo返回一个名为bar的方法的对象,则有效。

你不能做你在第一个代码块中显示的内容,因为:

  • add不会返回任何内容,因此调用它的结果为undefined
  • 如果add 确实返回了某些内容,则几乎肯定不会创建元素createElement。 (它可能应该返回对您调用它的DOMTokenList的引用,但它不会。)
  • 即使这样,分配操作(innerHTML = ...)的结果也是分配的值,而不是对元素的引用。

附注:如果您喜欢链接API,请查看使用jQuery。它可以让你这样做:

var li = $("<li>").addClass("className").html("Some string");

...因为它的大多数API方法都会返回调用它们的jQuery实例,或者返回另一个有用的jQuery实例(并且$()返回包含它在{{中创建的单个元素最外层元素的集合1}}例子)。 API专门针对链接而设计。 DOM API不是。

答案 1 :(得分:0)

取决于函数的 return 值。在您的情况下,li.classList是一个属性,而不是返回方法本身的函数。因此你不能把它链起来。

答案 2 :(得分:0)

li.classList.add("className");此行不返回对象(例如li.classList或仅li的结果),而是根据此doc返回undefined:{ {3}}。因此,您无法在结果上调用任何方法。

答案 3 :(得分:0)

链接取决于被调用函数的返回类型

document.createElement("li")

将返回一个HTML元素,该元素具有名为classList

的属性

.classList将返回DOMTokenList。这又具有属性.add。但.add不会返回任何内容。因此,您无法拨打.innerHTML

document.createElement("li").classList.add("className").innerHTML = "Some string";

示例

&#13;
&#13;
var element = document.createElement("li");
console.log(element)

var classList = element.classList
console.log(classList)

var add = classList.add('dummy');
console.log(add)
&#13;
&#13;
&#13;

答案 4 :(得分:0)

为了使用链接,最后一个方法必须返回一个值。如果要创建对象的实例,则每个方法都必须返回对象。

var Dog= function() {
  this.name = 'Buck';
  this.color = 'brown';
};

Dog.prototype.setName = function(name) {
  this.name = name;
  return this;
};

Dog.prototype.setColor = function(color) {
  this.color = color;
  return this;
};

因此,链接将会是这样的

new Dog()
  .setName('Bob')
  .setColor('black')