函数中apply()与call()方法 的区别

在js中每个函数都包含两个非继承而来的方法:call()和apply()方法;
call和apply的作用都是在特定的作用域中将函数绑定到另外一个对象上去运行,即可以用来重新定义函数的执行环境,两者仅在定义参数方式上有所区别它们接收参数方面不同:call和apply的第一个参数都是需要调用的函数对象,在函数体内这个参数就是this的值,剩余的参数是需要传递给函数的值,call与apply的不同就是call传的值可以是任意的,而apply传的剩余值必须为数组。
它们的语法分别为:

// apply()方法
function.apply(thisObj, [argsArray])

thisObj:这个对象将代替Function类里this对象(就是定义函数代码块里面的this);
argsArray:这个是数组,它将作为参数传给Function(args–>arguments),这个可以是数组也可以是 arguments;

// call()方法
function.call(thisObj,args1,args2,...,argsn)

thisObj:这个对象将替代Function类里的this对象;
agrs:这是一个参数列表

注意: 调用call的对象必须是一个函数对象,因为 call这个方法是在function的prototype里的

apply()方法定义:

调用一个对象的一个方法,用另一个对象替换当前对象.(个人理解:b.apply(a,arguments);就是说a对象应用了b对象的方法)。
call()方法定义:

调用一个对象的一个方法,用另一个对象替换当前对象。(个人理解:b.call(a,args1,args2,args3);就是a对象调用b对象中的方法)。

二者相同之处:

都“可以用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象”。

二者的不同之处:

**apply:**最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数,则把参数都写进这个数组里面,当然,即使只有一个参数,也要写进数组里。如果argArray不是一个有效的数组或arguments对象,那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数,那么Global对象将被用作thisObj,并且无法被传递任何参数。
**call:**它可以接受多个参数,第一个参数与apply一样,后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候,使当前this实例指针保持一致,或者在特殊情况下需要改变this指针。如果没有提供thisObj参数,那么 Global 对象被用作thisObj。

1. 基本用法

function f(a, b) {
return a + b;
}
function f1(a, b) {
return a - b;
}
// apply的用法
var a1 = f.apply(f1, [4, 2]); //此处是f1应用了f的方法
var a2 = f1.apply(f, [4, 2]); //此处是f应用了f1的方法
console.log(a1); //6
console.log(a2); //2
var a3 = f.call(f1, 4, 2); //此处是f1调用了f的方法
var a4 = f1.call(f, 4, 2); //此处是f调用了f1的方法
console.log(a3) //6
console.log(a4) //2

2.实现继承

function Cat(name) {
this.name = name;
this.showname = function() {
console.log(this.name)
}
}
function Dog(name) {
Cat.apply(this, [name]);
}
var cat = new Cat('二豆');
cat.showname(); //二豆
function Dog(name) {
Cat.call(this, name)
}
var cat = new Cat('二豆');
cat.showname(); //二豆

3.多重继承

function Class() {
this.showSub = function(a, b) {
console.log(a - b);
}
}
function Class1() {
this.showAdd = function(a, b) {
console.log(a + b);
}
}
function Class2() {
// Class.apply(this);
// Class1.apply(this);
Class.call(this);
Class1.call(this);
}
var c2 = new Class2();
c2.showSub(3, 1); //2
c2.showAdd(3, 1); //4

猜你喜欢

转载自blog.csdn.net/weixin_44260238/article/details/88560124
今日推荐