第四讲_JavaScript函数

JavaScript函数

  • 1. 函数的概述
  • 2. 无参函数
  • 3. 带参函数
  • 4. 匿名函数
    • 4.1 匿名表达式
    • 4.2 立即执行函数
      • 4.2.1 立即执行函数写法一
      • 4.2.2 立即执行函数写法二
  • 5. 闭包
  • 6. 箭头函数
  • 7. 函数this指定

1. 函数的概述

  • JavaScript 函数是被设计为执行特定任务的代码块。
  • JavaScript 函数通过 function 关键词进行定义。
  • JavaScript 函数会在某代码调用它时被执行。

2. 无参函数

function 关键字后面为方法名,方法名后面的()是参数列表,当参数列表为空时,称为无参函数。

// 定义一个函数名为test的函数,且不带参数
function test() {
	// 函数体
}

// 调用函数
test();

3. 带参函数

当参数列表不为空时,称为带参函数。

调用一个带参函数时,可以传参也可以不传参。当不传参时,形参被赋值为 undefined。

// 定义一个函数名为test的函数,带两个参数
function test(param1, param2) {
	console.log(typeof param1);
  	console.log(typeof param2);
}

// 调用函数,但不传参
test();

定义函数时,不仅可以带参,还可以给参数指定默认值。

调用一个带参函数时,且参数有默认值。调用时,如果不传参,形参使用默认值;否则覆盖默认值。

// 定义一个函数名为test的函数,带两个参数,且有默认值
function test(name = '张三', age = 18) {
  console.log(typeof name);
  console.log(typeof age);
}

定义函数时,可以指定可变参数,可变参数必须放在参数列表的最后。可变参数是一个数组类型,装着所有多余的参数。

可变参数格式:...参数名

// 定义一个函数名为test的函数,带两个参数,且有默认值,最后还有一个可变参数
function test(name = '张三', age = 18, ...hobby) {
  console.log(typeof name);
  console.log(typeof age);
  console.log(typeof hobby)
}

// 调用函数时,传入5个参数,多余的3个参数会放到可变参数中
test('李四', 19, '篮球', '羽毛球', '足球')

4. 匿名函数

没有名称的函数称为匿名函数。

function () {
    console.log('我是匿名函数')
}

4.1 匿名表达式

把一个匿名函数赋值给一个变量,则称为函数表达式。

let test = function () {
    console.log('我是匿名函数')
}

// 调用函数
test();

4.2 立即执行函数

不需要调用立即执行的函数,称为立即执行函数。

4.2.1 立即执行函数写法一

// 立即执行函数方式一
(function() {
    console.log('匿名函数')
})();

4.2.2 立即执行函数写法二

// 立即执行函数方式二
(function() {
    console.log('匿名函数')
}());

5. 闭包

闭包指的是有权访问另一个函数作用域中的变量的函数。被理解为定义在一个函数内部的函数,这样内部函数就可以访问到外部函数的局部变量。

// 外部的函数
function outer() {
    let n = 0;
	
	// 内部的函数
    function inner() {
    	// 可以访问外部函数的参数和变量
        console.log(n++);
    }
    return inner;
}

闭包的作用:用来创建私有的变量,避免全局变量的污染。

闭包的副作用:可能导致大量的变量不被垃圾回收机制回收,造成内存消耗大,甚至可能引起内存泄漏。

6. 箭头函数

箭头函数表达式的语法比传统的函数表达式更简洁:

  • 箭头函数不会创建自己的 this,它只会从自己的作用域链的上一层沿用 this
  • 箭头函数不能用作构造函数。
  • 箭头函数不能在其主体中使用 yield
// () 为箭头函数的参数列表
// {} 为箭头函数的方法体
() => {}
 let students = ['张三', '李四', '王五'];

 // 给每个学生的名字加个学校名前缀
 let newStudents = students.map((student) => {
   return `清华:${student}`
 })

 console.log(newStudents);

7. 函数this指定

默认函数的this 指向其调用者,可以通过以下三个方法,修改其this的指向。

  • call(argThis, param1, param2, …):函数会被调用,修改其this指向argThis
  • apply(argThis, params):函数会被调用,函数参数通过数组接收,修改其this指向argThis
  • bind(argThis):函数不会调用,修改其this指向argThis
  let student1 = {
    name: "张三",
    age: 18
  };

  let student2 = {
    name: "李四",
    age: 19
  };

  let student3 = {
    name: "王五",
    age: 20
  };

  function getStudent() {
    console.log(this)
  }

  // 函数this默认指向调用者
  getStudent();

  // 修改函数this指向student1
  getStudent.call(student1);

  // 修改函数this指向student2
  getStudent.apply(student2);

  // 修改函数this指向student3
  let newGetStudent = getStudent.bind(student3);
  newGetStudent();

你可能感兴趣的:(JavaScript,javascript,开发语言)