一、函数内 this 的指向
1、 this 的指向是当调用函数时确定的,调用的方式不同,this 的指向也就不同。
1.1 this 一般是指向调用者。
函数类型 | this 的指向 |
普通函数 | Window |
定时器函数 | Window |
立即执行函数 | Window |
对象方法 | 对象本身 |
构造函数(原型对象) | 实例对象 |
2、改变函数内部 this 指向
常用的 3 种方法:call()、apply()和bind()。
2.1 call(‘this 指向的对象’,’参数1′,’参数2′)
- 改变 this 指向,调用自身函数
let obj = { name:'Coder Yarn'; }; function fn(a,b){ console.log(this); console.log(a + b); }; fn.call(obj,2,5); //输出结果 {name:'Coder Yarn';} 7
- 可以实现继承
function Father(username,age,sex){ this.username = username; this.age = age; this.sex = sex; }; function Son(username,age,sex){ Father.call(this,username,age,sex); }; //实例化对象 let son = new Son('Coder Yarn','22','男'); console.log(son); //结果输出 Coder Yarn 22 男
2.2 apply(thisArg, [argArray])
thisArg: 在 fun 函数运行时指定的 this 值。 argArray:传递的参数,必须包含在数组中
返回值就是函数的返回值,因为他就是调用函数
- 改变 this 指向,调用自身的函数
- 传的参数必须是数组(伪数组)
//通过数学的内置方法求数组的最大值// let arr = [3,55,88,7,9]; let max = Math.max.apply(Math,arr); //this 指向 Math 实例 console.log(max); //输出结果 88
2.3 bind(thisArg,arg1,arg2,….)
thisArg:在 fun() 函数运行时指定的 this 值。 arg1,arg2:传递其他参数
返回由指定的 this 值和初始化参数改造的原函数拷贝,即返回一个新的函数
- 可以改变 this 的指向,但是不能调用自身的函数,只有返回的新函数可以调用自身的函数
let obj = { name:'Coder Yarn'; }; function fun(a,b){ console.log(this); console.log(a + b); }; let newfun = fun.bind(obj,2,3); newfun(); //输出结果 {name:'Coder Yarn';} 5
- bind() 的应用:函数不需要立即调用,但是想改变函数内部的 this 指向。 如:点击按钮后禁用按钮,经过 1 秒后在启用按钮
//获取 button 按钮元素 let btn = document.querySelector('button'); btn.onclick = function(){ this.disabled = true; //this 指向的是 btn //计时器 setTimeout(function(){ this.disabled = false; //没有 bind() 方法时 this 的指向是 window ,使用 bind() 方法后 this 指向 btn }.bind(this),1000); }; //输出结果自己去实现一下吧
三、3 者的区别
- call() 和 apply() 相同点:都会到用自身函数,并且该别函数内部 this 的指向;
- call() 和 apply() 不同点:传入的参数不一样,call 是正常传参,而 apply 必须传入的是数组形式 [];
- bind() 不会调用自身函数,但可以改变函数内部的 this 指向。