02-javascript基础----js函数

一、什么是函数

函数也是对象的一种，但是函数区分与对象最重要的一点：函数具有可执行性

对象：

var a = {
    name: 'wang'
}

函数：

function a() {
	var a = 'wang'
    console.log(a)
}
a()

二、为什么要设计函数

1. 简化代码的编写，减少重复代码
2. 功能点明确，复用，一个函数通常只有一个指定的功能
3. 隔离变量，减少命名污染

function a() {
	var name = 'wang'
}
function b() {
	var name = 'chen'
}
// 两个 name 不一样

三、函数的this

3.1、this是什么

this是一个关键字，就是一个变量，指向当前的作用域

3.2、几种方式this的指向

1. func()：指向window

单纯定义一个函数，并且调用的this的时候，this指向window

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

test()  // window

因为test() ==> window.test()

2. new func()：指向这个函数

new func()是将这个函数作为构造函数，this指向当前构造函数的实例对象

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

new test()  // test

3. obj.func()：指向obj

xx.func()，就指向xx

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

var obj = {
    test: test
}

obj.test()  // obj

4. func.call/apply(xxx)：指向xxx

这个是改变函数的this指向

3.3、改变函数this执行

如果要改变函数的this指向，需要使用call/apply

    var obj = {
      name: 'wang'
    }

    function test(param1, param2) {
      console.log(this)
      console.log(param1, param2)
    }


    test.call(obj, 1, 2)    // obj
    test.apply(obj, [1, 2]) // obj

call 和 apply 唯一不同就是传参不同

• call：call( this指向的对象， 参数1， 参数2 )：直接写在后面

• apply： apply( this指向的对象， [参数1， 参数2] )：参数用数组包裹

四、回调函数

回调函数是指：

1. 定义好了
2. 不需要自己调用
3. 满足一定条件才执行

常见回调函数如：

• 事件函数
• 定时器、延时器函数
• ajax回调函数
• 生命周期回调函数：如vue、微信小程序等

// DOM事件函数
document.getElementById("box").onclick = function() {
  console.log('onclick')
}

// 定时器、延时器函数
setTimeout(() => {
  console.log('setTimeout')
}, 1000);
setInterval(() => {
  console.log('setInterval')
}, 1000);

// ajax函数
$.ajax({
  url: '',
  method: '',
  success: function() {
    console.log('ajax')
  }
})

五、立即执行函数（IIFE）

• 名称：立即执行函数、匿名执行函数
• 缩写：IIFE
• 作用：隔离变量
• 写法

(function(i) {
	console.log(i)
})(1)

或：

(function(i) {
	console.log(i)
}(1))