javaScript改变this指向的三种方法

叙述

     call()、bind()、apply()都是js预定义的方法,可以挂载对象或某个属性,来改变函数内部的this指向,他们最大的区别就是传入参数的方式不太一样。

call()

改变fn函数的this指向为obj对象。

let obj = {
     
	name: "小明",
	age: 13
}
function fn() {
     
	console.log(this);
}
fn.call(obj);
/*
* call()参数:
* 		1. 重定义this指向为某个对象或属性。
* 		2. 传入的实参,可以传入多个,逗号隔开。例如:fn.call(obj, "小黑", 18, "163cm")
*/

call()传入实参的语法:

let obj = {
     
	name: null,
	age: null,
	height: null
}
function fn(name, age, height) {
     
	this.name = name;
	this.age = age;
	this.height = height;
	console.log(this); // 返回结果为:{name: 小明, age: 18, height: "183cm"}
}
fn.call(obj, "小明", 18, "183cm"); 

bind()
bind()方法绑定后会返回一会函数。

let obj = {
     
	a: function() {
     
		return "Hellow";
	},
	b: function() {
     
		return "origin";
	}
}
function person() {
     
	console.log(this.a()); // 返回结果为:Hellow
};
person.bind(obj)(); // 重定向this指向为obj对象,因为bind()绑定后会返回一个函数,在写一对小括号进行调用。

bind()传入实参的语法:

let obj = {
     
	a: function() {
     
		return "Hellow";
	},
	b: function() {
     
		return "origin";
	}
}
function person(msg) {
     
	console.log(this.a(), msg); // 返回结果为:Hellow
};
person.bind(obj, "JavaScript")(); // 重定向this指向为obj对象

或者也可以是这样

person.bind(obj)("JavaScript");

apply()

let obj = {
     
	a: function() {
     
		return "Hellow";
	},
	b: function() {
     
		return "origin";
	}
}
function person(msg) {
     
	console.log(this.b()); // 返回结果为:origin
};
person.apply(obj); // 重定向this指向为obj对象

apply()传入实参的语法:
apply()在传入参数时,与上了两中方法不同,apply是以数组的方式传入,数组内的每一个都对应着一个形参。

如下代码例:

let obj = {
     
	a: function() {
     
		return "Hellow";
	},
	b: function() {
     
		return "origin";
	}
}
function person(msg1, msg2, msg3) {
     
	console.log(this.b(),msg1, msg2, msg3); // 返回结果为:origin 哈哈哈 嘻嘻嘻 呜呜呜
};
person.apply(obj, ["哈哈哈", "嘻嘻嘻", "呜呜呜"]); // 重定向this指向为obj对象

总结一下区别

相同点
     call()、bind()、apply()都是重定向function中的this指向,并且都可以进行传递参数。
不同点

  1. call() 传入的参数以逗号隔开,可以是任何类型。并且在call()的同时函数会执行。
  2. bind() 传入的参数以逗号隔开,可以是任何类型。在bind()的同时不会执行函数,但是会返回一个函数。
  3. apply() 传入参数的时候必须是一个数组,数组内的每一个值都对应着一个形参,并且在apply()的同时函数会执行。

你可能感兴趣的:(JavaScript)