add: 函数的调用

2019-12-11 15:22:20 +08:00
parent 0bbb6c66de
commit aa6ef99b5f
4 changed files with 215 additions and 29 deletions
--- a/04-JavaScript基础/09-函数.md
+++ b/04-JavaScript基础/09-函数.md
@@ -106,10 +106,11 @@ var fun2 = function() {
 语法：

 ```javascript
-var 变量名/函数名  = new Function('形参1', '形参2', '函数体']);
+var 变量名/函数名  = new Function('形参1', '形参2', '函数体');
 ```

-注意，这里是直接将函数体放在**字符串**里包裹起来，放在 Function 的最后一个参数的位置；而且，形参也必须放在**字符串**里。
+注意，Function 里面的参数都必须是**字符串**格式。也就是说，形参也必须放在**字符串**里；函数体也是放在**字符串**里包裹起来，放在 Function 的最后一个参数的位置。
+

 代码举例：

@@ -140,18 +141,138 @@ fun3(1, 2); // 调用函数

 2、函数既然是实例对象，那么，**函数也属于“对象”**。还可以通过如下特征，来佐证函数属于对象：

- 我们直接打印某一个函数，比如 `console.log(fun2)`，发现它的里面有`__proto__`。（这个是属于原型的知识，后续再讲）
+（1）我们直接打印某一个函数，比如 `console.log(fun2)`，发现它的里面有`__proto__`。（这个是属于原型的知识，后续再讲）

- 我们还可以打印 `console.log(fun2 instanceof Object)`，发现打印结果为 `true`。这说明 fun2 函数就是属于 Object。
+（2）我们还可以打印 `console.log(fun2 instanceof Object)`，发现打印结果为 `true`。这说明 fun2 函数就是属于 Object。

 ## 函数的调用

+
+### 方式1：普通函数的调用
+
 函数调用的语法：

 ```javascript
 函数名();
 ```

+或者：
+
+```
+函数名.call();
+```
+
+代码举例：
+
+```javascript
+function fn1() {
+	console.log('我是函数体里面的内容1');
+}
+
+function fn2() {
+	console.log('我是函数体里面的内容2');
+}
+
+fn1(); // 调用函数
+
+fn2.call(); // 调用函数
+
+```
+
+### 方式2：通过对象的方法来调用
+
+```javascript
+var obj = {
+	a: 'qianguyihao',
+	fn2: function() {
+		console.log('千古壹号，永不止步!');
+	},
+};
+
+obj.fn2(); // 调用函数
+```
+
+如果一个函数是作为一个对象的属性保存，那么，我们称这个函数是这个对象的**方法**。
+
+PS：关于函数和方法的区别，本文的后续内容里有讲到，可以往下面翻。
+
+
+### 方式3：立即执行函数
+
+代码举例：
+
+```javascript
+(function() {
+	console.log('我是立即执行函数');
+})();
+
+```
+
+立即执行函数在定义后，会自动调用。
+
+PS：关于立即执行函数，本文的后续内容里有讲到，可以往下面翻。
+
+
+上面讲到的这三种方式，是用得最多的。接下来讲到的三种方式，暂时看不懂也没关系，可以等学完其他的知识点，再回过头来看。
+
+### 方式4：通过构造函数来调用
+
+代码举例：
+
+```javascript
+function Fun3() {
+	console.log('千古壹号，永不止步~');
+}
+
+new Fun3();
+```
+
+这种方式用得不多。
+
+### 方式5：绑定事件函数
+
+代码举例：
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Document</title>
+    </head>
+    <body>
+        <div id="btn">我是按钮，请点击我</div>
+
+        <script>
+            var btn = document.getElementById('btn');
+            //2.绑定事件
+            btn.onclick = function() {
+                console.log('点击按钮后，要做的事情');
+            };
+        </script>
+    </body>
+</html>
+
+```
+
+这里涉及到DOM操作和事件的知识点。
+
+### 方式6：定时器函数
+
+代码举例：（每间隔一秒，将 数字 加1）
+
+```javascript
+    let num = 1;
+   setInterval(function () {
+       num ++;
+       console.log(num);
+   }, 1000);
+```
+
+这里涉及到定时器的知识点。
+
 ## 函数的参数：形参和实参

 函数的参数包括形参和实参。先来看下面的图就很好懂了：