为什么我不能在 JavaScript 中使用 "x = $("p").offset; Top = x().top"？答案

【问题标题】：Why can't I use "x = $("p").offset; Top = x().top" in JavaScript?为什么我不能在 JavaScript 中使用 "x = $("p").offset; Top = x().top"？
【发布时间】：2018-07-19 02:13:21
【问题描述】：

我正在使用 jQuery，需要获取一个元素的位置。

我先写了这样的代码：

 x=$("p").offset;
 Top = x().top; // bug here

我发现浏览器找不到顶部，因为这里的 x() 为空。

所以我改写成这样：

x=$("p").offset;
y=$("p").offset();
Top = y.top;

好的，现在可以了。

但是为什么？？？我认为 y.top 应该与 x().top 相同，因为 x() 是 $("p").offset()。

【问题讨论】：

offset 是一个方法而不是一个属性，这就是它起作用的原因
它返回一个具有left和top属性的对象。阅读文档会自己回答这个问题
从它的 jQuery 对象中删除 offset 方法会丢失 this 上下文。我怀疑报告的错误消息中会有相关信息
我很好奇为什么x=$("p").offset 不能作为函数参考。我知道不是我只是好奇为什么
等效的调用是p = $('p'); x = p.offset; x.call(p).top。见developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript jquery frontend offset

【解决方案1】：

这是一个例子

function P() {
  this.pos = {top: 1, left: 1}
}
P.prototype.offset = function() {
  return this.pos
}

const p = new P()
console.info('p.offset().top:', p.offset().top)

const fn = function() {
  return this.pos // won't work when called normally, ie fn()
}

console.info('fn.call(p).top:', fn.call(p).top) // works

const x = p.offset // x is equivalent to fn
console.info('x.call(p).top:', x.call(p).top)
console.info('x().top:', x().top) // doesn't work

最后一个错误是因为方法offset（现在分配给x）没有this 上下文以使return this.pos 工作。

这就是 this 在该调用中未定义的原因。

见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

【讨论】：