javascript中的函数对象的call和apply方法，及this指向总结

Posted 2021-07-24 江州益彤

call()和apply()

这两个方法都是函数对象的方法，需要通过函数对象来调用；
当对函数调用call()和apply()都会调用函数执行

function fun() {
	console.log("调用fun方法");
}
fun();			//会调用fun方法
fun.call();		//也会调用fun方法
fun.apply();	//也会调用fun方法

在调用call()和apply()可以将一个对象指定为第一个参数

此时这个对象将会成为函数执行时的this

function fun() {
	console.log(this);
}

var obj={name:'wangermao'}

fun();
fun.call(obj);		
fun.apply(obj);

再看

var name="hello";
			
function fun() {
	var name="world";
	console.log(this);
	console.log(this.name);
}

var obj={name:'王二毛'}
var obj2={name:'三毛'}

fun();
fun.call(obj);		
fun.apply(obj2);

call()方法可以将实参在对象之后依次传递

function fun(a,b) {
	console.log("a=",a);
	console.log("b=",b);
}

var obj = {
	name: '王二毛',
	sayName: function() {
		console.log(this.name);
	}
}

fun.call(obj,2,3);

apply()方法需要将实参封装到一个数组中统一传递

function fun(a,b) {
	console.log("a=",a);
	console.log("b=",b);
}

var obj = {
	name: '王二毛',
	sayName: function() {
		console.log(this.name);
	}
}

fun.apply(obj,[4,5]);//apply()方法需要将实参封装到一个数组中统一传递

this的情况：

	 * 		1.以函数形式调用时，this永远都是window
	 * 		2.以方法的形式调用时，this是调用方法的对象
	 * 		3.以构造函数的形式调用时，this是新创建的那个对象
	 * 		4.使用call和apply调用时，this是指定的那个对象

面试题

var ctx = {
	_val: 30
};
var _val = 10;

function rootFn() {
	console.log(this._val); //以对象形式调用，this指向该对象

	function childFn() {
		this._val = 20;
		console.log(this._val);
	}
	return childFn; //以函数形式调用，this指向window
}

rootFn.apply(ctx)();
console.log(ctx._val);

//30
//20
//30

var ctx = {
	_val: 30
};
var _val = 10;

function rootFn() {
	console.log(this._val); //以对象形式调用，this指向该对象
	this._val = 20;

	function childFn() {
		console.log(this._val);
	}
	return childFn; //以函数形式调用，this指向window
}

rootFn.apply(ctx)();
console.log(ctx._val);

//30
//10
//20