1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
|
---
title: 'TypeError: "x" is not a function'
slug: Web/JavaScript/Reference/Errors/Not_a_function
tags:
- Errors
- JavaScript
- TypeError
translation_of: Web/JavaScript/Reference/Errors/Not_a_function
---
<div>{{jsSidebar("Errors")}}</div>
<div>JavaScript异常"is not a function"会在试图去调用一个像函数一样的值，但是该值实际上不是函数时被抛出.</div>
<h2 id="信息">信息</h2>
<pre>TypeError: Object doesn't support property or method {x} (Edge)
TypeError: "x" is not a function</pre>
<h2 id="错误类型">错误类型</h2>
<p>{{jsxref("TypeError")}}</p>
<h2 id="哪里出错了">哪里出错了?</h2>
<p>问题出在你试图去调用一个像函数一样的值，但是该值实际上不是函数，有时候你的代码需要调用一些函数，但是那种值并不能当作函数来被调用。</p>
<p>也许函数名称上有错别字？ 也许你正在调用Object对象没有这个方法？ 例如，在JavaScript中单纯的对象(Object)没有<strong>map</strong>函数，但是JavaScript数组(Array)对象却有这个函数。</p>
<p>再比如，在JavaScript中很多原生对象的内置方法需要你提供一个（回调）函数。 所以你必须提供一个函数，以使这些方法正常工作：</p>
<ul>
<li>当你在使用 {{jsxref("Array")}} 或 {{jsxref("TypedArray")}} 对象时:
<ul>
<li>{{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.forEach()")}}, {{jsxref("Array.prototype.map()")}}, {{jsxref("Array.prototype.filter()")}}, {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}}, {{jsxref("Array.prototype.find()")}}</li>
</ul>
</li>
<li>当你在使用 {{jsxref("Map")}} 和 {{jsxref("Set")}} 对象时:
<ul>
<li>{{jsxref("Map.prototype.forEach()")}} and {{jsxref("Set.prototype.forEach()")}}</li>
</ul>
</li>
</ul>
<h2 id="例子">例子</h2>
<h3 id="函数的名称错误">函数的名称错误</h3>
<p>函数的名称拼写错误，这种情况是经常发生的：</p>
<pre class="brush: js example-bad">var x = document.getElementByID("foo");
// TypeError: document.getElementByID is not a function
</pre>
<p>正确的方法名应该是 <code>getElementByI<strong>d：</strong></code></p>
<pre class="brush: js example-good">var x = document.getElementById("foo");
</pre>
<h3 id="调用Object类型中不存在的方法">调用Object类型中不存在的方法</h3>
<p>对于某些特殊的方法，它只属于某些特定的原生对象中，你必须提供一个回调函数才能正常运行。例如：这里调用了一个 {{jsxref("Array.prototype.map()")}} 方法，但是这方法只能被 {{jsxref("Array")}} 对象所调用。 </p>
<pre class="brush: js example-bad">var obj = { a: 13, b: 37, c: 42 };
obj.map(function(num) {
return num * 2;
});
// TypeError: obj.map is not a function</pre>
<p>正确的做法，使用一个数组来代替:</p>
<pre class="brush: js example-good">var numbers = [1, 4, 9];
numbers.map(function(num) {
return num * 2;
});
// Array [ 2, 8, 18 ]
</pre>
<h3 id="函数与已有属性重名">函数与已有属性重名</h3>
<p>当您在创建类时,可能会存在某个属性和某个方法的名称相同,当您在调用该函数时,编译器会认为该函数不存在.</p>
<pre class="brush: js example-bad">var Dog = function () {
this.age = 11;
this.color = "black";
this.name = "Ralph";
return this;
}
Dog.prototype.name = function(name) {
this.name = name;
return this;
}
var myNewDog = new Dog();
myNewDog.name("Cassidy"); //Uncaught TypeError: myNewDog.name is not a function
</pre>
<p>正确的做法是使用不同的变量名.</p>
<pre class="brush: js example-good">var Dog = function () {
this.age = 11;
this.color = "black";
this.dogName = "Ralph"; //Using this.dogName instead of .name
return this;
}
Dog.prototype.name = function(name) {
this.dogName = name;
return this;
}
var myNewDog = new Dog();
myNewDog.name("Cassidy"); //Dog { age: 11, color: 'black', dogName: 'Cassidy' }</pre>
<h3 id="使用括号进行乘法运算">使用括号进行乘法运算</h3>
<p>在数学中,您可以将 2 × (3 + 5) 写为 2*(3 + 5) 或者省略为 2(3 + 5).</p>
<p>使用后者时将会抛出错误:</p>
<pre class="brush: js example-bad">const sixteen = 2(3 + 5);
alert('2 x (3 + 5) is ' + String(sixteen));
//Uncaught TypeError: 2 is not a function</pre>
<p>您可以添加乘法运算符 <code>*</code> 来改正代码:</p>
<pre class="brush: js example-good">const sixteen = 2 * (3 + 5);
alert('2 x (3 + 5) is ' + String(sixteen));
//2 x (3 + 5) is 16</pre>
<h3 id="正确地导入和导出模块">正确地导入和导出模块</h3>
<p>确保正确导入模块.</p>
<p>以下为一个示例模块 (<code>helpers.js</code>)</p>
<pre>let helpers = function () { };
helpers.groupBy = function (objectArray, property) {
return objectArray.reduce(function (acc, obj) {
var key = obj[property];
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(obj);
return acc;
},
{});
}
export default helpers;</pre>
<p>在 <code>App.js</code>中正确导入该模块:</p>
<pre>import helpers from './helpers'</pre>
<h2 id="相关">相关</h2>
<ul>
<li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li>
</ul>
|
