存储Symbol.iterator引用后调用报错：Can't convert undefined to object原因解析

嘿，这个问题的核心其实是JavaScript里函数调用时的this绑定规则，我给你一步步拆解清楚：

问题根源 #

当你把str[Symbol.iterator]赋值给变量gen时，这个函数就和它原本所属的字符串对象str断开了上下文关联。Symbol.iterator方法的内部逻辑依赖于调用它时的this指向——它需要this是一个字符串对象，才能创建对应的迭代器。

但当你直接调用gen()时，在现代JS默认的严格模式下，函数的this会变成undefined，方法内部尝试把undefined当作对象来处理，自然就抛出了Can't convert undefined to object的错误。

对比一下：直接调用str[Symbol.iterator]()是正常的，因为此时this明确指向str这个字符串对象。

解决方法 #

这里有几种简单的方式来修复这个问题：

1. 用bind绑定上下文
   把函数和原对象的上下文绑定在一起，这样调用gen()时this始终指向str：

   let str = 'foo';
   let gen = str[Symbol.iterator].bind(str);
   console.log(typeof gen); // 'function'
   let it = gen();
   console.log(it.next()); // { value: 'f', done: false }
   

2. 用箭头函数包裹
   箭头函数会继承外部作用域的上下文，这里我们直接在箭头函数里调用带正确上下文的方法：

   let str = 'foo';
   let gen = () => str[Symbol.iterator]();
   let it = gen();
   console.log(it.next()); // { value: 'f', done: false }
   

3. 你提到的生成器函数包裹法
   你自己想到的生成器方案其实也是利用了在函数内部直接调用str[Symbol.iterator]()（此时this指向正确），然后转发迭代结果，这种方式当然也是可行的：

   let str = 'foo';
   let gen = function* () {
     let it = str[Symbol.iterator]();
     let n;
     while (!(n = it.next()).done) {
       yield n.value;
     }
   };
   let it = gen();
   console.log(it.next()); // { value: 'f', done: false }
   

内容的提问来源于stack exchange，提问作者Jim Vargo