带你学习Javascript中的函数进阶（一）

1. 函数的定义和调用

1.1 函数的定义方式

1. 函数声明方式function关键字（命名函数）
2. 函数表达式（匿名函数）
3. new Function()

var fn = new Function('参数1', '参数2',...,'函数体')
复制代码

• Function里面参数都必须是字符串格式
• 第三种方式执行效率低，也不方便书写，用的比较少
• 全部函数都是Function的实例（对象）

//函数声明方式
function fn() {}

//函数表达式（匿名函数）
var fn = function() {}

//利用new Function('arg1','arg2', 'fn')
var f = new Function('a','b',console.log(a+b)')
f(1,2) // 3
复制代码

全部的函数都是Function实例对象

1.2 函数的调用方式

1. 普通函数
2. 对象的方法
3. 构造函数
4. 绑定事件函数
5. 定时器函数
6. 当即执行函数

// 普通函数
function fn() {
	console.log('前端岚枫博客')
}
fn() //前端岚枫博客

//对象的方法
var obj = {
	say: function () {
  	console.log('前端岚枫博客')
  }
}
obj.say() //前端岚枫博客

//构造函数
function Star() {
}
new Star()

//绑定的事件函数
btn.onclick = function() {} //点击了按钮就能够调用该函数

//定时器函数
setInterval(function() {}, 1000)

//当即执行函数
(function() {
	console.log('前端岚枫博客') //自动调用
})()
复制代码

2. this

2.1 函数内this的指向

这些this的指向，是当调用函数的时候肯定的调用方法的不一样决定了this的指向不一样，通常指向调用者。
调用方式

调用方式	this指向
普通函数调用	window
构造函数调用	实例对象 原型对象里面的方法也指向实例对象
对象方法调用	该方法所属对象
事件绑定方法	绑定事件对象
定时器函数	window
当即执行函数	window

2.2 改变函数内部this指向

Javascript为提供了一些函数方法来帮助咱们更优雅地处理函数内部this的指向问题，经常使用的有bind()、call()、apply()三种方法。接下来，咱们来详细的介绍一下这三种方法的用法，看看它们是如何改变this指向的。

1. call方法

call()方法调用一个对象，简单理解为调用函数的方式，可是它能够改变函数的this指向。

fn.call(thisArg, arg1, arg2, ...)
复制代码

var obj = {
		name: 'lanfeng'
}
function fn(a, b) {
	console.log(this) 
  console.log(a+b) 
}
fn(1,2)//指向window, 3
fn.call(obj, 1, 2) //指向obj, 3

//实现继承
function Father(uname, age, sex) {
	this.uname = uname
  this.age = age
  this.sex = sex
}
function Son () {
	Father.call(this,uname, age, sex)
}
var son = new Son('柳岩',18,'女')
复制代码

call：第一个能够调用函数，第二个能够改变函数内的this指向
call的主要做用能够实现继承

2. apply方法

apply（）方法调用一个函数。简单理解为调用函数的方式，它与call方法同样能够改变函数的this的指向，可是它跟call传参数方式不同，它是传的参数必须在一个数组里

fun.apply(thisArg, [argsArray])
复制代码

• thisArg：在fun函数运行时指定this的值
• argsArray: 传递的值，必须包含在数组里面
• 返回值就是函数的返回值，由于它就是调用函数

var obj = {
		name: 'lanfeng'
}
function fn(a, b) {
	console.log(this) 
  console.log(a+b) 
}
fn(1,2)//指向window, 3
fn.apply(obj, [1, 2]) //指向obj, 3
复制代码

apply：第一个能够调用函数，第二个能够改变函数内的this指向
apply的参数必须时数组（伪数组）
apply的主要应用，求数数组中的最大值,最小值

var arr = [1, 66, 3, 99, 4]
var max = Math.max.apply(Math, arr) 
var min = Math.min.apply(Math, arr) 
console.log(max, min) //99 1
复制代码

3. bind方法

bind()方法不会调用函数，可是能改变函数内部this指向

fn.bind(thisArg, arg1, arg2, ...)
复制代码

• thisArg: 在fn函数运行时指定的this值
• arg1, arg2: 传递的其余参数
• 返回由指定的this值和初始化参数改造的原函数拷贝

var obj = {
		name: 'lanfeng'
}
function fn(a, b) {
	console.log(this) 
  console.log(a+b) 
}
fn(1,2)//指向window, 3
var f = fn.bind(obj, 1, 2)
f()

复制代码

bind: 不会调原来的函数，能够改变this指向，返回的函数是改变this以后产生的新函数
bind的应用： 若是有的函数咱们不须要当即调用，可是又想改变这个函数内部的this指向此时用bind

var btn = document.querySelector('button')
//之前的用法
btn.onclick = function() {
  var that = this
	this.disabled = true
  setTimeout(function(){
  	that.disabled = false
  }, 3000)
}

// bind用法
btn.onclick = function() {
	this.disabled = true
  setTimeout(function(){
  	this.disabled = false
  }.bind(this), 3000)
}
复制代码

2.3 call apply bind 总结

相同点：
均可以改变函数内部的this指向
区别点：

1. call 和apply 会调用函数，而且改变函数内部的this指向
2. call和apply传递的参数不同，call传递参数形式arg1, arg2, ...形式，apply必须数组形式
3. bind不会调用函数，能够改变函数内部的this指向

主要应用场景：

1. call常常作继承
2. apply常常跟数组有关系，好比借助于数学对象实现数组的最大值最小值
3. bind不调用函数，可是还想改变this指向，好比改变定时器的内部this指向

总结

本篇文章主要分享了javascript的函数定义、用法、this及改变this指向的几种方法、如想了解更多，请扫描二维码：