与 javascript 和 d3.js 中的范围相关的奇怪行为答案

【问题标题】：Weird behaviour related to scope in javascript and d3.js与 javascript 和 d3.js 中的范围相关的奇怪行为
【发布时间】：2023-03-20 02:57:01
【问题描述】：

我正在结合 d3.js 在 react.js 中编写代码。但是有一个小的，但我不明白它的行为..

 componentWillMount() {
     this.setState({
         dummyData: [{
               price: 13,
               age: 43,
               etc: 99
               },
               {
                price: 33,
                age: 22, 
                etc: 100
               }]
     }


 componentDidMount () {
     this.keys = Object.keys(this.state.dummyData[0]);
     console.log(this.keys) // ["price", "age", "etc"]
   }

  someMethod(){
      console.log(this.keys) // ["price", "age", "etc"]

      this.svg.append('g')
    .selectAll('g')
        .data(this.state.dummyData)
        .enter()
    .append('g')
        .attr('transform', d => { 
            console.log(this.keys); // ["price", "age", "etc"]
            return 'translate(' + this.x0(d.name) + ', 0)';
        })
    .selectAll('rect')
        .data( function(d){ 
            console.log(this.keys); // undefined
            return this.keys.map( function(key){ return { key: key, value: d[key] }; }); }) // This statement causes an error
        .enter()
    .append('rect')
        .attr('x', function(d){ return this.x1(d.key) })
        .attr('y', function(d){ return this.y(d.value) })
        .attr('width', this.x1.bandwidth())
        .attr('height', function(d){ return height - this.y(d.value) })
        .attr('fill', function(d){ return this.z(d.key) });

   }

   ...

从代码中可以看出，this.keys 保持其值，直到它到达第二个数据调用。我真的不明白当时会发生什么。

【问题讨论】：

标签： javascript reactjs d3.js svg scope

【解决方案1】：

这是因为作用域和函数在 javascript 中的工作方式。如果您将函数更改为箭头函数，它将自动绑定范围，您将看到您所期望的。

作为一个简单的解释：箭头函数会自动绑定声明它们的范围，而函数不会，因此您必须显式地将您想要的范围绑定到函数。

【讨论】：