位置：首页-资讯-前端开发

JavaScript函数中this指向问题详解

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

this关键字

哪个对象调用函数，函数里面的this指向哪个对象。

**严格模式下：**在全局环境中，this指向的是undefined

**非严格模式下：**在全局环境中，this指向的是window

全局定义的函数直接调用，this => window


function fn(){
	console.log(this);
	// 此时 this 指向 window
}
fn();
// 相当于 window.fn()

对象内部的函数调用，this => 调用者


var obj = {
	fn:function(){
		console.log(this);
	}
}
obj.fn();
// 此时 this 指向 obj

定时器的处理函数，this => window


setTimeout(function(){
	console.log(this);	
},0)
// 此时定时器处理函数里面的this 指向 window

事件处理函数，this => 事件源


div.onclick = function(){
	console.log(this);
}
//当你点击 div 的时候，this指向 div

自调用函数，this => window


(function () {
  console.log(this)
})()
// 此时 this 指向 window

改变 this 指向

刚才我们说过的都是函数的基本调用方式里面的 this 指向，我们还有三个方法可以忽略函数本身的 this 指向转而指向别的地方。这三个方法就是 call / apply / bind，是强行改变 this 指向的方法。

call/apply/bind附加在函数调用后面使用，可以忽略函数本身的 this 指向
call和apply使用时会立即自动调用函数，bind使用时会创建一个函数，但是需要另外去手动调用

call

语法：fn.call(fn 函数体内 this 的指向哪里,arg1, arg2, ...);

作用：调用被绑定的函数fn，指定它的 this 指向并传参

参数：

第一个参数：是 this 指向
其余的参数：需要传入的值，可以是多个，用逗号隔开

使用 call 方法不传参


var num = 666;

function fn() {
  console.log('num = ', this.num);
}

fn.call();  // num = 666

使用 call 方法指定this


var name = 'Rose';
var obj = {name:'Jack'};
function fn(){
	console.log(this.name);
}
fn();	// Rose
fn.call();	// Rose
fn.call(obj);  // jack

使用 call 方法指定this并传参


var name = 'Rack';
var obj = {name:'Jack'};
function fn(a,b){
	console.log(this,a,b);
}
fn(1,2);	// window 1 2
fn.call(obj,1,2);	// obj 1 2
fn(1,3);	// window 1 3

apply

apply方法接受的是一个包含多个参数的数组

语法：fn.apply(fn 函数体内 this 的指向哪里,[arg1, arg2, ...]);

作用：调用被绑定的函数fn，指定它的 this 指向并传参

参数：

第一个参数：this 指向的对象
第二个参数：一个包含多个参数的数组


var obj = {name:'jack'};
function fn(a,b){
	console.log(this,a,b);
}
fn(1,2);	// window 1 2
fn.apply(obj,[1,2]);	// obj 1 2

使用 apply 合并数组

使用push将元素追加到数组中，如果参数是数组，它会将该数组作为单个元素添加，而不是将这个数组内的每个元素添加进去，因此我们最终会得到一个数组内的数组


var arr1 = [1,2];
var arr2 = [3,4];
arr1.push(arr2);
console.log(arr1);	//	[1,2,[3,4]]

concat虽然可以合并数组，但它并不是将元素添加到现有数组，而是创建并返回一个新数组。


var arr1 = [1,2];
var arr2 = [3,4];

var arr3 = arr1.concat(arr2);
console.log(arr1);	// [1,2]
console.log(arr3);	// [1,2,3,4]

如果我们要将元素追加到现有数组又该怎么做？循环？No！这是apply就派上用场了


var arr1 = [1,2];
var arr2 = [3,4];

arr1.push.apply(arr1,arr2);
console.log(arr1);	// [1,2,3,4]

使用 apply 与内置函数连用



var numbers = [5, 6, 2, 3, 7];

var max = Math.max(numbers)
var min = Math.min(numbers)
console.log(min,max);	// NaN NaN

var max = Math.max.apply(null, numbers); 

var min = Math.min.apply(null, numbers);
console.log(min,max);	// 2 7

bind

语法：fn.bind(fn 函数体内 this 的指向, arg1, arg2, ...);

作用：创建一个新的绑定函数，指定它的 this 指向并传参，必须调用它才会被执行

参数：

第一个参数：this 指向的对象
其余的参数：需要传入的值，可以是多个，用逗号隔开


var obj = {name:'jack'};
function fn(a,b){
	console.log(this,a,b);
}
fn(1,2);	// window 1 2
fn.bind(obj,1,2);	// 未调用不执行
fn.bind(obj,1,3)()	// obj 1 3
var newFn = fn.bind(obj,3,4);
newFn();	// obj 1 4
newFn(5,6);	// obj 3 4