diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/.keep" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/.keep" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/\344\275\234\344\270\232/.keep" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/\344\275\234\344\270\232/.keep" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/.keep" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/.keep" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/2022-10-22-\345\207\275\346\225\260.md" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/2022-10-22-\345\207\275\346\225\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..ba078b7ed2c519357ac76264ba88711a8c0505a9 --- /dev/null +++ "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\344\272\224\346\254\241\344\275\234\344\270\232/\347\254\224\350\256\260/2022-10-22-\345\207\275\346\225\260.md" @@ -0,0 +1,164 @@ +# 函数 + +### 定义函数 + +一个**函数定义**(也称为**函数声明**,或**函数语句**)由一系列的[`function`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/function)关键字组成,依次为: + +- 函数的名称。 +- 函数参数列表,包围在括号中并由逗号分隔。 +- 定义函数的 JavaScript 语句,用大括号`{}`括起来。 + +``` +function square(number) { + return number * number; +} +``` + +**原始参数**(比如一个具体的数字)被作为**值**传递给函数;值被传递给函数,如果被调用函数改变了这个参数的值,这样的改变不会影响到全局或调用函数。 + +如果你传递一个对象(即一个非原始值,例如[`Array`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array)或用户自定义的对象)作为参数,而函数改变了这个对象的属性,这样的改变对函数外部是可见的,如: + +``` +function myFunc(theObject) { + theObject.make = "Toyota"; +} + +var mycar = {make: "Honda", model: "Accord", year: 1998}; +var x, y; + +x = mycar.make; // x 获取的值为 "Honda" + +myFunc(mycar); +y = mycar.make; // y 获取的值为 "Toyota" + // (make 属性被函数改变了) +``` + +### 函数表达式 + +虽然上面的函数声明在语法上是一个语句,但函数也可以由函数表达式创建。这样的函数可以是**匿名**的;它不必有一个名称。例如,函数`square`也可这样来定义: + +``` +const square = function(number) { + return number * number; + }; +var x = square(4); // x gets the value 16 +``` + +然而,函数表达式也可以提供函数名,并且可以用于在函数内部代指其本身,或者在调试器堆栈跟踪中识别该函数: + +``` +const factorial = function fac(n) { + return n<2 ? 1 : n*fac(n-1) + }; + +console.log(factorial(3)); +``` + +当将函数作为参数传递给另一个函数时,函数表达式很方便。下面的例子演示了一个叫`map`的函数如何被定义,而后使用一个表达式函数作为其第一个参数进行调用: + +``` +function map(f,a) { + let result = []; // 创建一个数组 + let i; // 声明一个值,用来循环 + for (i = 0; i != a.length; i++) + result[i] = f(a[i]); + return result; +} +``` + +## 调用函数 + +``` +console.log(square(5)); +/* ... */ +function square(n) { return n*n } +``` + +# 箭头函数 + +### **箭头函数允许我们编写更短的函数** + +#### 定义箭头函数的语法 + +语法: + +```text +(参数1, 参数2 ...) => { 函数体 } +``` + +解释: + +- 如果有且仅有 1 个形参,则`()`可以省略 +- 如果函数体内有且仅有 1 条语句,则`{}`可以省略,但前提是,这条语句必须是 return 语句。 + +注:箭头函数可以没有函数名,可以将箭头函数赋值给一个变量,通过变量名调用函数;也可以直接使用箭头函数。 + +### 举例 + +写法 1、定义和调用函数:(传统写法) + +```js +function fn1(a, b) { + console.log('haha'); + return a + b; +} +console.log(fn1(1, 2)); //输出结果:3 +``` + +写法 2、定义和调用函数: + +```js +const fn2 = (a, b) => { + console.log('haha'); + return a + b; +}; +console.log(fn2(1, 2)); //输出结果:3 +``` + +另外,箭头函数的写法还可以更精简,继续往下看。 + +在箭头函数中,如果方法体内只有一句话,且这句话是 return 语句,那就可以把 `{}`省略。写法如下: + +```js +const fn2 = (a, b) => a + b; +console.log(fn2(1, 2)); //输出结果:3 +``` + +在箭头函数中,如果形参只有一个参数,则可以把`()`省略。写法如下: + +```js +const fn2 = a => { + console.log('haha'); + return a + 1; +}; +console.log(fn2(1)); //输出结果:2 +``` + +## 箭头函数的 this 的指向 + +this 指向的是函数被调用的对象(也就是说,谁调用了函数,this 就指向谁)。 + +**箭头函数本身不绑定 this**,this 指向的是**箭头函数定义位置的 this**(也就是说,箭头函数在哪个位置定义的,this 就跟这个位置的 this 指向相同)。 + +举例: + +```js +const obj = { name: '千古壹号' }; +function fn1() { + console.log(this); // 第一个 this + return () => { + console.log(this); // 第二个 this + }; +} +const fn2 = fn1.call(obj); +fn2(); +``` + +打印结果: + +```js +obj +obj +``` + +上面的代码中,箭头函数是在 fn1()函数里面定义的,所以第二个 this 跟 第一个 this 指向的是**同一个位置**。又因为,在执行 `fn1.call(obj)`之后,第一个 this 就指向了 obj,所以第二个 this 也是指向 了 obj。 \ No newline at end of file diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/.keep" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/.keep" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/\344\275\234\344\270\232/.keep" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/\344\275\234\344\270\232/.keep" new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git "a/22 \346\235\250\345\207\214\347\277\224/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/\344\275\234\344\270\232/test.html" "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/\344\275\234\344\270\232/test.html" new file mode 100644 index 0000000000000000000000000000000000000000..5111678f2e8957b3054d9d33fd1bd67c99e7e2ce --- /dev/null +++ "b/22 \346\235\250\345\207\214\347\277\224/\347\254\254\345\233\233\346\254\241\344\275\234\344\270\232/\344\275\234\344\270\232/test.html" @@ -0,0 +1,30 @@ + + +
+ + + +