this和apply、call、bind

JavaScript 的 this 总是指向一个对象，而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的。

this的使用场景

1. 普通函数调用

const name = "oliver"；
function getName(){
	alert ( this === window ); // 输出：true
	alert ( this.name ) //输出： oliver
}
getName()；
/*
当函数不作为对象的属性被调用时，也就是普通函数方式，此时的 this 总是指
向全局对象。在浏览器的环境下，这个全局对象是 window 对象。
*/

2.对象的方法调用

const obj = {
 a: 1,
 getA: function(){
	 alert ( this === obj ); // 输出：true
	 alert ( this.a ); // 输出: 1
 }
};
obj.getA();
/*
this指向调用该函数的对象
*/

3.构造器调用

const MyClass = function(){
 this.name = 'oliver';
};
const obj = new MyClass();
alert ( obj.name ); // 输出：oliver
/*
构造器里的 this 指向它的构造函数
*/

const MyClass = function(){
 this.name = 'oliver';
 return { // 显式地返回一个对象
 name: 'anne'
 }
};
const obj = new MyClass();
alert ( obj.name ); // 输出：anne 
/*
如果构造器显式地返回了一个 object 类型的对
象，那么this会指向返回的这个对象
*/

4.箭头函数调用

const name = 'oliver';
const obj = {
	name: 'anne',
	say: function () {
		setTimeout(function () {
			const sayName = () => this.name;
			alert(sayName()); // 输出：anne
		}, 100);
	}
}
obj.say();
/*
1.箭头函数的this指向在定义时就已经绑定，和执行无关
2.箭头函数没有自己的this,继承了当前所在环境执行时的this指向（栗子中setTimeout的执行环境）
*/

5.call，apply，bind调用

const obj1 = {
	name: 'oliver',
	getName: function () {
		return this.name;
	}
};
const obj2 = {
	name: 'anne'
};
console.log(obj1.getName()); // 输出: oliver
console.log(obj1.getName.call(obj2)); // 输出：anne
/*
call，bind，apply 可以动态地改变传入函数的 this
*/

call,apply,bind的作用与区别

call,apply,bind是Function的原型方法，它们的作用基本一样，改变函数的执行上下文，区别在于传入参数形式和返回值不同。

const obj1 = {
	name: 'oliver',
	speak: function (sex) {
		alert("i'm" + name + ", i am " + sex);
	}
};
const obj2 = {
	name: 'anne'
};

1.call

obj1.speak.call(obj2,'women');//输出： i'm anne, i am women

2.apply

obj1.speak.apply(obj2,['women']);//输出： i'm anne, i am women

3.bind
相比call和apply，bind的兼容性要差一些(Ie6-8不支持)。不过最大的不同点是，bind返回的是一个函数，可以赋给一个对象，以便于之后调用，而不是直接执行函数。如果要直接生效需要再加一对括号才行。

const obj1 = {name:'anne'};
const obj2 = {
	name : 'oliver',
	say : function(){
		setTimeout(function(sex){
			alert("i'm " + this.name + ", i am " + sex )// 输出： i'm anne, i can meow
		}.bind(obj1,'women'),1000)
	}
}
obj2.say();

本文地址：https://blog.csdn.net/QT1218/article/details/111876768