函数式编程问题是JS(Functional programming issue is JS)

编程入门 行业动态 更新时间:2024-10-24 16:31:35
函数式编程问题是JS(Functional programming issue is JS)

我正在玩bind并apply 。 我试图通过将从一个函数返回的任何内容传递给该对象上的方法来更新对象的属性。

此更新附加到window调整大小事件。

var el = document.getElementById('someElement');

var resolveLeft = function(element) {  
  return element.offsetLeft;
};

var someObject = {
  setDefaultLeft: function(value) {
    this.defaultLeft = value;
    console.log(this.defaultLeft);
  }
};

// this works
window.addEventListener('resize', function() {
  someObject.setDefaultLeft(resolveLeft(el));
});

// this one doesn't
window.addEventListener('resize', someObject.setDefaultLeft.bind(someObject, resolveLeft(el))); 
  
#someElement {
  position: absolute;
  left: 10%;
} 
  
<div id="someElement"></div> 
  
 

我有2个事件绑定。 第一个在每次调整窗口大小时都会记录更新的值,而第二个只记录返回的初始值。

我意识到在第二种情况下,值已经从resolveLeft返回,并且它不再revisit (所以说) resolveLeft函数。 它只是传递从一开始就返回的内容。

这有解决方法吗?

我有一种感觉,currying会解决这个问题吗? 但不确定如何在这种情况下实施。

I'm playing around with bind call and apply. I am trying to update a property of an object by passing whatever is returned from one function to the method on that object.

And this updating is attached to the window resize event.

var el = document.getElementById('someElement');

var resolveLeft = function(element) {  
  return element.offsetLeft;
};

var someObject = {
  setDefaultLeft: function(value) {
    this.defaultLeft = value;
    console.log(this.defaultLeft);
  }
};

// this works
window.addEventListener('resize', function() {
  someObject.setDefaultLeft(resolveLeft(el));
});

// this one doesn't
window.addEventListener('resize', someObject.setDefaultLeft.bind(someObject, resolveLeft(el))); 
  
#someElement {
  position: absolute;
  left: 10%;
} 
  
<div id="someElement"></div> 
  
 

I have 2 event bindings. The first one logs out an updated value every single time the window is resized, whereas the second one only logs the initial value that was returned.

I realize that in the second case, the value was returned from resolveLeft already and it doesn't revisit (so to say) the resolveLeft function again. It just passes whatever was returned from the beginning.

Is there a workaround to this?

I have a feeling that currying would solve this? But not sure how to implement in this case.

最满意答案

你不是在寻找currying,而是在寻找组合 (与你已经在做的bind 部分应用程序一起):

function compose(f, g) { return x => f(g(x)); } var set = someObject.setDefaultLeft.bind(someObject); window.addEventListener('resize', compose(set, resolveLeft).bind(null, el));

You're not looking for currying, but for composition (together with the partial application via bind that you are already doing):

function compose(f, g) { return x => f(g(x)); } var set = someObject.setDefaultLeft.bind(someObject); window.addEventListener('resize', compose(set, resolveLeft).bind(null, el));

更多推荐

本文发布于:2023-04-28 01:19:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1329085.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:问题是   函数   JS   issue   programming

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!