我对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";
为什么?
答案 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";
var element = document.createElement("li");
console.log(element)
var classList = element.classList
console.log(classList)
var add = classList.add('dummy');
console.log(add)
&#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')