JavaScript高级函数进阶_xihuanLilia

大大的周 02-07 4815

函数进阶函数的定义方式‘函数的调用方式函数中的this指向问题改变this的指向call方法apply()bind()bind()方法的应用三种方法的区别

函数的定义方式‘

我们常用的函数定义有两种一种是自定义函数也叫命名函数如下

function fn(){}

一种是函数表达式也叫匿名函数如下

var fun = function (){}

但是我们也有第三种方式利用new关键字创造函数

var fun = new Function（）

我们都知道函数有参数和形式体那么我们用new创造的函数一定也有参数和函数体利用new function （参数1 参数2 函数体）要记住的是参数和函数体都需要以字符串的方式即必须加引号案例如下虽然这种方法很麻烦性能也差但是由此我们可以得知所有函数都是Function(第三种方法展示的函数)的实例（对象）简单总结为函数也是一个对象

函数的调用方式 // 1 普通函数调用 function fn(){ console.log('好困'); } fn(); fn.call() // 2 对象中的函数 var obj = { say : function(){ console.log('好困'); } } // 3 构造函数 function Say(){ } new Say(); // 4 绑定事件 btn.onclick = function(){} // 5 定时器函数 setInterval(function() { }, 1000); ### 6 立即执行函数 (function () { })() 函数中的this指向问题

对应上面的调用函数的方式如下图所示

改变this的指向 call方法

call()方法可以调用函数可以简单的理解为调用函数的方式也可以改变函数的this的指向语法如下需要改变指向的函数.call(改变的this指向，参数1 ，参数2)

我们知道普通函数的this指向window 我们创建一个普通函数打印它的this 并调用接着我们使用call方法改变 this指向并加入参数

fn.call(x,2,3)

call() 还有一个注意作用是用来继承如下

function Father(uname, age) { this.uname = uname; this.age = age; } function Son(uname, age, sex) { Father.call(this, uname, age); this.sex = sex; } apply()

apply()方法和call()方法类似可以调用函数和改变this的指向语法如下需要改变指向的函数.apply（thisArg,[argsArray]） thisArg 在fun函数运行时指定的this值 argsArray 传递的值必须包含在数组里面返回值就是函数的返回值因为它调用了函数案例如下

apply()方法主要应用于将数组利用于其他数据的类型的方法

比如说我们有一个数字型的方法 Math.max 我们想数组求最大值

我们就可以利用apply()来解决这个问题

bind()

bind()方法不会调用函数但是也可以改变内部的this指向语法：需要改变this指向的函数.bind(改变的this值，参数1，参数2) 返回由指定的this值和初始化函数改造的原函数拷贝案例如下

bind()方法的应用

bind()方法看似麻烦其实是我们实际开发中最方便常用的案例如下我们有一个按钮当我们点击后禁用三秒

<button>点击</button> <script> var btn = document.querySelector('button'); btn.onclick = function(){ this.disabled = true; setTimeout(function(){ this.disabled = false; }.bind(this),3000) } </script> 三种方法的区别

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

区别点 call 和apply 都会调用函数并且改变函数内部this的指向 call和appky会传递的参数不一样 call传递的是参数但是apply传递参数必须以数组的形式 bind不会调用函数

call主要用来做继承 apply经常和数组有关系 bind不调用函数但是还想改变this指向比如改变定时器中的this指向