ES6中this指向（ccall/bind/apply）

1、函数定义方式

//1.自定义函数（命名函数）
function fn(){

}
//2.函数表达式（匿名函数）
var fun = function(){
	console.log("fun");
}
fun();
//3.利用new Function('参数1','参数2','函数体')
var f = new Function('a','b','console.log(a+b)');
f(1,2);

函数也属于对象。

2、函数的调用

//1.普通函数
function fn(){
	console.log("this is a fun");
}
fn();//或采用fn.call();
//2.对象的方法
var o ={
	sayHi :function(){
		console.log("this is a object fun");
	}
}
o.sayHi();
//3.构造函数
function Star(){
	console.log('constructor fun');
}
let ldh = new Star();
//4.绑定事件函数
btn.onclick = function(){
	console.log('btn click fun')
};//点击了按钮就可以调用这个函数
//5.定时器函数
setInterval(function(){console.log('setInterval fun')},1000);
//6.立即执行函数
(function(){
	console.log('lijizhixing ');
})()

3、this的指向问题

//1.普通函数-this指向window
function fn(){
	console.log('1fn:'+this);
}
window.fn();
//2.对象的方法-this指向o这个对象
var o ={
	sayHi :function(){
		console.log(this);
	}
}
o.sayHi();
//3.构造函数-this指向ldh这个实例对象
function Star(){
	console.log(this);
}
let ldh = new Star();
//4.绑定事件函数-this指向btn这个按钮
btn.onclick = function(){
	console.log(this);
};
//5.定时器函数-this指向window
window.setTimeout(function(){console.log(this);},1000);
//6.立即执行函数-this指向window
(function(){
	console.log(this);
})()

总结：

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

4、改变函数内部this指向

常用的有call()、apply()、bind()三种方法

1、call方法

var o ={
	name:'liming',
	fun:function(){console.log('object');}
}
function fn(a,b)
{
	console.log(this);
	console.log(a+b);
}
fn.call(o,1,2);//call的使用方法
//主要应用-继承
function Father(uname,age)
{
    this.uname = uname;
    this.age = age;
}

function Son(uname,age)
{
    Father.call(this,uname,age);
    console.log('this name:'+this.uname);
}
let son1 = new Son('liming',18);

2、apply方法

var o ={
	name:'liming',
	fun:function(){console.log('object');}
}
function fn(a,b)
{
	console.log(this);
	console.log(a+b);
}
fn.apply(o,[2,3]);//apply的用法，后面参数必须为数组
//主要应用案例-利用Math求最大值
var arr =[1,3,5,66,23,123];
let maxNum = Math.max.apply(Math,arr);
let minNum = Math.min.apply(Math,arr);
console.log("maxNum:"+maxNum+',minNum:'+minNum);

JavaScript 函数 apply的使用_编程界小明哥的博客-CSDN博客_js apply函数 

我手机没电了，借朋友的手机发个短信，注意是借用，当你用完以后你“朋友手机的短信功能”对你来说就失效了，除非你再次借用。

这里就有两个对象我、朋友，那短信功能就是所说的方法。

3、bind方法（使用最多）

var o ={
	name:'liming',
	fun:function(){console.log('object');}
}
function fn(a,b)
{
	console.log(this);
	console.log(a+b);
}
//使用方法一
let newFn = fn.bind(o);//bind的用法，他不调用函数，返回由指定this的原函数的拷贝
newFn(2,3);
//使用方法二
let newFn2 = fn.bind(o,2,3);//bind的用法，他不调用函数，返回由指定this的原函数的拷贝
newFn2();

主要应用案例一

var o ={
    name:'liming',
    fun:function(){console.log('object');}
}
function fn(a,b)
{
    console.log(this);
    console.log(a+b);
}
//使用
let newFn = fn.bind(o);//bind的用法，他不调用函数，返回由指定this的原函数的拷贝
newFn(2,3);
//主要应用
btn.onclick = function(){
    this.disabled = true;//这里的this指向按钮
    setTimeout(function(){
        this.disabled = false;//这里的this指向window
    }.bind(this),3000);//bind绑定后，上面的this改为了按钮
    //等价于
    // let fun =function(){
    //     this.disabled = false;//这里的this指向window
    // }.bind(this);
    // setTimeout(fun,3000);//bind绑定后，上面的this改为了按钮
}

区别点：

• call和apply会调用函数，并且改变函数内部this指向。
• call和apply传递的参数不一样，call传递参数arg1,arg2...，apply必须是数组形式[arg1,arg2...]
• bind不会调用函数，可以改变函数内部的this指向

主要应用场景：

• call经常做继承
• apply经常和数组有关系。例如借助数学对象实现数组最大值最小值
• bind不调用函数，但是还想改变this指向。例如改变定时器内部的this指向。