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

落日映苍穹つ 2023-07-10 11:30 16阅读 0赞

### 文章目录 ###

*   *   *  1. 函数的定义和调用
         *   *  1.1 函数的定义方式
             *  1.2 函数的调用方式
         *  2. this
         *   *  2.1 函数内this的指向
             *  2.2 改变函数内部this指向
             *  2.3 call apply bind 总结
         *  总结

### 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实例对象  
\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BJzzyoaF-1583129073592)(https://cdn.nlark.com/yuque/0/2020/png/148146/1583069785134-c58604dc-ecf6-4d54-8cb6-bd43338329db.png\#align=left&display=inline&height=303&name=image.png&originHeight=606&originWidth=1678&size=255639&status=done&style=none&width=839)\]

#### 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的指向不同，一般指向调用者。  
调用方式

<table> 
 <thead> 
  <tr> 
   <th><strong>调用方式</strong></th> 
   <th><strong>this指向</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>普通函数调用</td> 
   <td>window</td> 
  </tr> 
  <tr> 
   <td>构造函数调用</td> 
   <td>实例对象 原型对象里面的方法也指向实例对象</td> 
  </tr> 
  <tr> 
   <td>对象方法调用</td> 
   <td>该方法所属对象</td> 
  </tr> 
  <tr> 
   <td>事件绑定方法</td> 
   <td>绑定事件对象</td> 
  </tr> 
  <tr> 
   <td>定时器函数<br></td> 
   <td>window</td> 
  </tr> 
  <tr> 
   <td>立即执行函数</td> 
   <td>window</td> 
  </tr> 
 </tbody> 
</table>

#### 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的主要作用可以实现继承

1.  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

1.  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指向的几种方法