js （JavaScript）函数声明的几种形式及用法

小小的病毒 發表於 2019-12-28 14:27:00

js （JavaScript）函数声明的几种形式及用法

<h2>1、函数声明</h2>
语法：
<div class="cnblogs_code">
<pre>function functionName(parameters) {
执行的代码
}</pre>
</div>
函数声明后不会立即执行，只是在初始化的时候会将函数声明提升，会在我们需要的时候调用到。
<h2>2、函数表达式（匿名函数）</h2>
语法：
<div class="cnblogs_code">
<pre>var x = function (a, b) {return a * b}; var z = x(4, 3);</pre>
</div>
以上函数实际上是一个 匿名函数 (函数没有名称)。
函数存储在变量中，不需要函数名称，通常通过变量名来调用。
<h2>3、Function() 构造函数</h2>
通过内置的 JavaScript 函数构造器（Function()）定义。
语法：
<div class="cnblogs_code">
<pre>var myFunction = new Function("a", "b", "return a * b");

var x = myFunction(4, 3);</pre>
</div>
如果函数调用前使用了 new 关键字, 则是调用了构造函数。
这看起来就像创建了新的函数，但实际上 JavaScript 函数是重新创建的对象：
<div class="cnblogs_code">
<pre>// 构造函数:
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName= arg2;
}

// This creates a new object
var x = new myFunction("John","Doe");
x.firstName; // 返回 "John"</pre>
</div>
构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。
构造函数中 this 关键字没有任何的值。 this 的值在函数调用实例化对象(new object)时创建。
 
实际上，你不必使用构造函数。上面实例可以写成：
<div class="cnblogs_code">
<pre>var myFunction = function (a, b) {return a * b};

var x = myFunction(4, 3);</pre>
</div>
<h2>4、自调用函数</h2>
函数表达式可以 "自调用"。
自调用表达式会自动调用。
如果表达式后面紧跟 () ，则会自动调用。
不能自调用声明的函数。
通过添加括号，来说明它是一个函数表达式：
<div class="cnblogs_code">
<pre>(function () {
var x = "Hello!!"; // 我将调用自己
})();

//为一个匿名自调用函数</pre>
</div>
<h2>5、箭头函数</h2>
ES6 新增了箭头函数。
箭头函数表达式的语法比普通函数表达式更简洁。
 
语法：
<div class="cnblogs_code">
<pre>(参数1, 参数2, …, 参数N) => { 函数声明 }

(参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }</pre>
</div>
当只有一个参数时，圆括号是可选的：
<div class="cnblogs_code">
<pre>(单一参数) => {函数声明}
单一参数 => {函数声明}</pre>
</div>
没有参数的函数应该写成一对圆括号:
<div class="cnblogs_code">
<pre>() => {函数声明}</pre>
</div>
例：
<div class="cnblogs_code">
<pre>// ES5
var x = function(x, y) {
return x * y;
}

// ES6
const x = (x, y) => x * y;</pre>
</div>
有的箭头函数都没有自己的 this。不适合顶一个 对象的方法。
当我们使用箭头函数的时候，箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的。
箭头函数是不能提升的，所以需要在使用之前定义。
使用 const 比使用 var 更安全，因为函数表达式始终是一个常量。
如果函数部分只是一个语句，则可以省略 return 关键字和大括号 {}，这样做是一个比较好的习惯:
 
 
<h2>6、使用函数注意点</h2>
（1）、函数提升
<ul>
<li>在之前的教程中我们已经了解了 "hoisting(提升)"。</li>
<li>提升（Hoisting）是 JavaScript 默认将当前作用域提升到前面去的的行为。</li>
<li>提升（Hoisting）应用在变量的声明与函数的声明。</li>
<li>因此，函数可以在声明之前调用：</li>
</ul>
<div class="cnblogs_code">
<pre>myFunction(5);

function myFunction(y) {
return y * y;
}</pre>
</div>
注意：使用表达式定义函数时无法提升。
（2）、函数式对象
<ul>
<li>在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。</li>
<li>但是JavaScript 函数描述为一个对象更加准确。</li>
<li>JavaScript 函数有 属性 和 方法。</li>
<li>arguments.length 属性返回函数调用过程接收到的参数个数：</li>
</ul>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">function myFunction(a, b) { //2
return arguments.length;
}
</pre>
</div>
　　toString() 方法将函数作为一个字符串返回:
<div class="cnblogs_code">
<pre>function myFunction(a, b) {
return a * b;
}

var txt = myFunction.toString(); //function myFunction(a, b) { return a * b; }</pre>
</div> 
来源：https://www.cnblogs.com/art-poet/p/12111592.html

頁: [1]

琼殿技术论坛's Archiver

js （JavaScript）函数声明的几种形式及用法