call()跟apply() 改变this指向

最新推荐文章于 2023-01-11 10:53:08 发布

原创最新推荐文章于 2023-01-11 10:53:08 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

19 篇文章

订阅专栏

本文深入探讨了JavaScript中call和apply的区别与应用场景，通过实例展示了如何利用这两个方法改变函数执行时this的指向，以及在实际开发中的应用，如组装车辆部件。

call跟applay

call();跟执行函数()是一样的效果 test.call()相当于test()

call()跟apply()都是改变this的指向

两者区别传参列表不同

Fun.call(新this指向,参数1,参数2,参数3,……)

Fun.apply(新this指向,用对象形式传参)


// 场景：当生产车间，需要用到别人的零件，
// 可以用call或apply将别人的函数拿过来为自己所用

// 如这是车座部件
function Sit(h,w){
	this.carHeight = h;
	this.carWidth = w;
}
// 车颜色
function Color(c){
	this.carColor = c;
}
// 车轮
function Wheel(size){
	this.size = size;
}
// 这是车间
function Car(name,h,w,c,size){
	// 自己的东西
	this.name = name;
	// 直接拿别人的部件来用
	Sit.call(this,h,w);//这里的this,就将原本Sit的this指向改为了Car本身
	Wheel.call(this,size);
	Color.call(this,c);
}

var car = new Car('我的车',100,100,'绿色','超大');

// 使用apply
function Car2(name,h,w,c,size){
	// 自己的东西
	this.name = name;
	
	// 直接拿别人的部件来用  apply传参必须是对象的形式 [] {}等
	Sit.apply(this,[h,w]);//这里的this,就将原本Sit的this指向改为了Car2本身
	Wheel.apply(this,[size]);
	Color.apply(this,[c]);

}
var car1 = new Car2('我的车',100,100,'绿色','超大');