TypeError: "x" is not a function

错误类型
TypeError

哪里出错了?
问题出在你试图去调用一个像函数一样的值，但是该值实际上不是函数，有时候你的代码需要调用一些函数，但是那种值并不能当作函数来被调用。

也许函数名称上有错别字？ 也许你正在调用Object对象没有这个方法？ 例如，在JavaScript中单纯的对象(Object)没有map函数，但是JavaScript数组(Array)对象却有这个函数。

在比如，在JavaScript中很多原生对象的内置方法需要你提供一个（回调）函数。 所以你必须提供一个函数，以使这些方法正常工作：

当你在使用 Array 或 TypedArray 对象时:
Array.prototype.every(), Array.prototype.some(), Array.prototype.forEach(), Array.prototype.map(), Array.prototype.filter(), Array.prototype.reduce(), Array.prototype.reduceRight(), Array.prototype.find()
当你在使用 Map 和 Set 对象时:
Map.prototype.forEach() and Set.prototype.forEach()

函数的名称错误
函数的名称拼写错误，这种情况是经常发生的：

1
2

<code class=" language-js"><span class="token keyword">var x <span class="token operator">= document<span class="token punctuation">.<span class="token function">getElementByID<span class="token punctuation">(<span class="token string">"foo"<span class="token punctuation">)<span class="token punctuation">;
<span class="token comment">// TypeError: document.getElementByID is not a function</span></span></span></span></span></span></span></span></span></code>

正确的方法名应该是 getElementById：

<code class=" language-js"><span class="token keyword">var x <span class="token operator">= document<span class="token punctuation">.<span class="token function">getElementById<span class="token punctuation">(<span class="token string">"foo"<span class="token punctuation">)<span class="token punctuation">;</span></span></span></span></span></span></span></span></code>

调用Object类型中不存在的方法
对于某些特殊的方法，它只属于某些特定的原生对象中，你必须提供一个回调函数才能正常运行。例如：这里调用了一个 Array.prototype.map() 方法，但是这方法只能被 Array 对象所调用。

<code class=" language-js"><span class="token keyword">var obj <span class="token operator">= <span class="token punctuation">{ a<span class="token punctuation">: <span class="token number">13<span class="token punctuation">, b<span class="token punctuation">: <span class="token number">37<span class="token punctuation">, c<span class="token punctuation">: <span class="token number">42 <span class="token punctuation">}<span class="token punctuation">;
 
obj<span class="token punctuation">.<span class="token function">map<span class="token punctuation">(<span class="token keyword">function<span class="token punctuation">(num<span class="token punctuation">) <span class="token punctuation">{
  <span class="token keyword">return num <span class="token operator">* <span class="token number">2<span class="token punctuation">;
<span class="token punctuation">}<span class="token punctuation">)<span class="token punctuation">;
 
<span class="token comment">// TypeError: obj.map is not a function</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>

正确的做法，使用一个数组来代替:

<code class=" language-js"><span class="token keyword">var numbers <span class="token operator">= <span class="token punctuation">[<span class="token number">1<span class="token punctuation">, <span class="token number">4<span class="token punctuation">, <span class="token number">9<span class="token punctuation">]<span class="token punctuation">;
 
numbers<span class="token punctuation">.<span class="token function">map<span class="token punctuation">(<span class="token keyword">function<span class="token punctuation">(num<span class="token punctuation">) <span class="token punctuation">{ 
  <span class="token keyword">return num <span class="token operator">* <span class="token number">2<span class="token punctuation">; 
<span class="token punctuation">}<span class="token punctuation">)<span class="token punctuation">; 
 
<span class="token comment">// Array [ 2, 8, 18 ]</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code>