JS函数基础

一.函数

1.函数是什么

• 具有特定功能的n条语句的封装体。
• 只有函数是可执行的，其它类型的数据是不可执行的。
• 函数也是对象。

2.为什么要用函数

• 提高代码复用
• 便于阅读和交流

3.如何定义函数

• 函数声明
• 表达式

  function fun1(){
    console.log("函数声明定义函数");
  }

  var fun2 = function(){
    console.log("表达式定义函数")
  }

 

4.如何调用函数

• test()
• new test()
• obj.test()
• test.call(objx)/test.apply(objx)

  function fun(){
    console.log("fun执行");
  }

  //1.函数自调用，相当于window.fun()调用方式
  fun();

  //2.回调函数:事件回调，定时器回调
  document.getElementById("btn").onclick = function(){
    console.log("事件回调");
  }

  setTimeout(function(){
    console.log("定时器回调");
  },1000);

  //3.构造函数：实例化对象调用（this指向当前构造函数的实例对象）
  function Person(name,age){
    this.name = name;
    this.age = age;
  }

  var person1 = new Person('小红',17);

  //4.call,apply强制绑定this
  var obj1 = {name:"obj1"};
  function fun2(){
    console.log(this);//用于输出当前this所绑定的对象
  }

  fun2();  //this = window
  fun2.call(obj1);  //this = Object {name: "obj1"}
  fun2.apply(obj1); //this = Object {name: "obj1"}

5.回调函数

（1）什么函数是回调函数

• 你定义的
• 你没有直接执行
• 最终他执行了（在特定条件下）

（2）常见的回调函数

• DOM事件函数
• 定时器函数
• ajax回调函数
• 生命周期回调函数

  document.getElementById("btn").onclick = function(){
    console.log("DOM事件回调");
  }

  setTimeout(function(){
    console.log("定时器回调");
  },1000);

6.IIFE

全称： Immediately-Invoked Function Expression 

别名：函数自调用，立即执行函数，IIFE

特点：

• 只执行一次
• 代码执行到函数是，此函数就执行了
• 函数的数据是私有的

7.this

•  this是关键字，不能用来定义对象
• this本身是一个内置的变量，该变量指向一个对象
• this有两种：
  • 全局this：指向window
  • 局部（函数）this：指向它的调用者（例如：构造函数的this指向实例对象）
• 特殊this：call，apply强制修改this

function fun1(){
  
  console.log("外部fun1:");
  console.log(this);
  this.name = "小红";

}

var obj = {
  fun2: function(){
    console.log("内部fun2:");
    console.log(this);
  }
}

window.fun1(); // this = window
new fun1();   // this = 实例对象（fun1{}）
fun1.call(obj); //this = obj

 

注：使用new 操作符执行步骤：

语法：new fun1();

1. 创建空对象
2. 执行函数
3. 确认this指向
4. 返回执行结果：fun1{} 给空对象 

此图可以看出new fun1();首先创建一个空对象去指向这个fun1，再给予this的name属性创建并赋值。