javascript从链函数中获取属性

Question

我需要创建一个像“device.browser.scroll().top”这样的函数，我如何让函数做到这一点并从对象中获取值，我的代码一直说未定义。

let device = {};
device.browser = {};
device.browser.scroll = (el = window) => {
      
  return {
    top: el.pageXOffset || el.scrollLeft,
    Left: el.pageYOffset || el.scrollTop,
  }
}

console.log('scrollTop', device.browser.scroll().top);

html, body {
  height: 100%;
}

.wrapper div {
  height: 100vh;
}

.wrapper div:nth-child(1) {
  background: red;
}


.wrapper div:nth-child(2) {
  background: green;
}


.wrapper div:nth-child(3) {
  background: blue
}

<div class="wrapper">
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 1

问题是||如果左侧为假，则将评估为右侧，而 0 为假，尽管包含您想要的数字信息。您可以使用 ??相反，如果左侧是 undefined，它只会评估右侧或 null :

return {
  top: el.pageXOffset ?? el.scrollLeft,
  Left: el.pageYOffset ?? el.scrollTop,
}

let device = {};
device.browser = {};
device.browser.scroll = (el = window) => {
      
  return {
    top: el.pageXOffset ?? el.scrollLeft,
    Left: el.pageYOffset ?? el.scrollTop,
  }
}

console.log('scrollTop', device.browser.scroll().top);

html, body {
  height: 100%;
}

.wrapper div {
  height: 100vh;
}

.wrapper div:nth-child(1) {
  background: red;
}


.wrapper div:nth-child(2) {
  background: green;
}


.wrapper div:nth-child(3) {
  background: blue
}

<div class="wrapper">
  <div></div>
  <div></div>
  <div></div>
</div>

或者，对于较旧的浏览器，使用条件运算符来测试 undefined:

return {
  top: el.pageXOffset === undefined ? el.scrollLeft : el.pageXOffset,
  Left: el.pageYOffset === undefined ? el.scrollTop : el.pageYOffset,
}