欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

this和apply、call、bind

程序员文章站 2022-06-19 17:08:42
JavaScript 的 this 总是指向一个对象,而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的。this的使用场景1. 普通函数调用const name = "oliver";function getName(){alert ( this === window ); // 输出:truealert ( this.name ) //输出: oliver}getName();/*当函数不作为对象的属性被调用时,也就是普通函数方式,此时的 this 总是指向全局对象。....

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

相关标签: js bind es6