JavaScript中的call方法和apply方法应用相比较,JS中

2019-05-25 18:38 来源:未知

本文实例讲述了JS中call和apply函数用法。分享给我们供大家参照他事他说加以考察,具体如下:

apply和call,它们的效用都以将函数绑定到此外三个目的上去运转,两个仅在概念参数的不贰秘诀有所差异:
Function.prototype.apply(thisArg,argArray);
Function.prototype.call(thisArg[,arg1[,arg2…]]);
从函数原型能够看看,第叁个参数都被取名称为thisArg,即具有函数内部的this指针都会被赋值为thisArg,那就完结了将函数作为别的多个目的的主意运转的指标。三个办法除了thisArg参数,皆认为Function对象传递的参数。上边包车型大巴代码表达了apply和call方法的办事章程:

主意定义 call方法:
语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]])
概念:调用2个指标的二个办法,以另贰个对象替换当前目的。
说明:
call 方法能够用来替代另3个目标调用一个艺术。call 方法可将二个函数的靶子上下文从上马的上下文字改正变为由 thisObj 钦命的新对象。
要是没有提供 thisObj 参数,那么 Global 对象被当作 thisObj。

call 函数

复制代码 代码如下:

apply方法:
语法:apply([thisObj[,argArray]])
概念:应用某一目的的3个方法,用另2个目的替换当前目的。
说明:
借使 argArray 不是多个管用的数组只怕不是 arguments 对象,那么将促成贰个TypeError。
要是未有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被作为 thisObj, 并且无法被传送任何参数。
 
常用实例 a、

语法

//定义二个函数func一,具备属性p和方法A
function func1(){
this.p="func1-";
this.A=function(arg){
alert(this.p arg);
}
}
//定义二个函数func二,具备属性p和方法B
function func2(){
this.p="func2-";
this.B=function(arg){
alert(this.p arg);
}
}
var obj1=new func1();
var obj2=new func2();
obj1.A("byA"); //显示func1-byA
obj2.B("byB"); //显示func2-byB
obj1.A.apply(obj2,["byA"]); //显示func2-byA,其中[“byA”]是仅有二个要素的数组,下同
obj2.B.apply(obj1,["byB"]); //显示func1-byB
obj1.A.call(obj2,"byA"); //显示func2-byA
obj2.B.call(obj1,"byB"); //显示func1-byB

function add(a,b) 
{ 
 alert(a b); 
} 
function sub(a,b) 
{ 
 alert(a-b); 
} 

add.call(sub,3,1); 

obj.call(thisObj,arg[,arg2[,arg3[,...agr]]]);

能够见见,obj1的方法A被绑定到obj2运维后,整个函数A的运作境遇就改换来了obj2,即this指针指向了obj二。同样obj贰的函数B也足以绑定到obj一对象去运营。代码的尾声四行展现了apply和call函数参数方式的差距。

 这一个事例中的意思便是用 add 来替换 sub,add.call(sub,叁,一) == add(3,一) ,所以运转结果为:alert(4); // 注意:js 中的函数其实是目的,函数名是对 Function 对象的引用。
 
b、

简介

与arguments的length属性分裂,函数对象还会有二特品质length,它表示函数定义时所钦点参数的个数,而非调用时实际传递的参数个数。比如下边包车型地铁代码将显得2:

function Animal(){ 
 this.name = "Animal"; 
 this.showName = function(){ 
  alert(this.name); 
 } 
} 

function Cat(){ 
 this.name = "Cat"; 
} 

var animal = new Animal(); 
var cat = new Cat(); 

//通过call或apply方法,将原本属于Animal对象的showName()方法交给对象cat来使用了。 
//输入结果为"Cat" 
animal.showName.call(cat,","); 
//animal.showName.apply(cat,[]); 

thisObj承接obj的性质和方式(obj原型链上的习性和办法无法被延续),前面包车型客车参数会当成obj的参数安装顺序传递进入。

复制代码 代码如下:

 call 的乐趣是把 animal 的不二等秘书籍放到cat上实施,原来cat是从未有过showName() 方法,以往是把animal 的showName()方法放到 cat上来进行,所以this.name 应该是 Cat
 
c、实现一连

示例

function sum(a,b){ return a b;}

function Animal(name){  
 this.name = name;  
 this.showName = function(){  
  alert(this.name);  
 }  
}  

function Cat(name){ 
 Animal.call(this, name); 
}  

var cat = new Cat("Black Cat");  
cat.showName(); 
function animal(type,nickname){
    this.type = type;
    this.nickname = nickname;
    this.sayHello = function(){
      return 'hello';
    }
}
function cat(name,type,nickname){
    this.name = name;
    //cat继承animal
    animal.call(this,type,nickname);
}
console.log(new cat('wsscat','cut','tom'));
/*
cat {
 name: 'wsscat',
 type: 'cut',
 nickname: 'tom',
 sayHello: [Function] }
*/

上面来探望JS手册中对call的解释:
call 方法
调用3个目的的三个艺术,以另二个对象替换当前指标。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被看成当前指标的目的。
arg1, arg2, , argN
可选项。将被传送格局参数连串。
说明
call 方法能够用来代替另3个指标调用一个艺术。call 方法可将一个函数的靶子上下文从开首的上下文字改善变为由 thisObj 钦定的新目的。
假设未有提供 thisObj 参数,那么 Global 对象被看成 thisObj。

 Animal.call(this) 的意趣就是行使 Animal对象代替this对象,那么 Cat中不就有Animal的具备属性和方法了呢,Cat对象就能够直接调用Animal的主意以及质量了.
 
d、多重承袭

apply 函数

说了解一点实际上正是改动对象的当中指针,即退换目的的this指向的内容。那在面向对象的js编制程序进度中一时候是很有用的。

function Class10() 
{ 
 this.showSub = function(a,b) 
 { 
  alert(a-b); 
 } 
} 

function Class11() 
{ 
 this.showAdd = function(a,b) 
 { 
  alert(a b); 
 } 
} 

function Class2() 
{ 
 Class10.call(this); 
 Class11.call(this); 
} 

语法

引用互连网一个代码段,运营后本来就知晓其所以然。

 很简短,使用五个 call 就达成多种承接了
自然,js的持续还应该有其它方法,比如利用原型链,这几个不属于本文的框框,只是在此证实call 的用法。说了call ,当然还大概有 apply,那多少个点子很多是1个乐趣,差别在于 call 的第壹个参数能够是不管三七二十1档次,而apply的第三个参数必须是数组,也足以是arguments

obj.apply(this[,argArray]);

[Ctrl A 全选 注:如需引入外部Js需刷新技能实践]

JavaScript 中的call和apply方法重要用来退换函数对象的上下文,即函数中this所指向的内容。

简介

call函数和apply方法的率先个参数都以要传播给当下目的的对象,及函数内部的this。前边的参数都以传递给当下目的的参数。
运行如下代码:

调用方法如下:

apply和call的效益大概,都得以用来继续,分歧在与apply只有八个参数,第二个参数必须是数组或然arguments对象。不然会报TypeError错误。假设接二连三的对象obj有七个参数,则会吧argArray的参数依次对应obj的每一种参数。

[Ctrl A 全选 注:如需引进外部Js需刷新才具进行]

fun.call(obj1, arg1, arg2, ...);
fun.apply(obj2, [arrs]);

示例

看得出分别弹出了func和var。到此地就对call的每一种参数的含义有所驾驭了。

现实示例:

function animal(type,nickname){
    this.type = type;
    this.nickname = nickname;
    this.syaHello = function(){
      return 'hello';
    }
}
function cat(name,type,nickname){
    this.name = name;
    animal.apply(this,arguments);
}
console.log(new cat('wsscat','cut','tom'));
/*
cat {
 name: 'wsscat',
 type: 'wsscat',
 nickname: 'cut',
 syaHello: [Function] }
*/

对此apply和call两者在职能上是如出一辙的,但二者在参数上有不相同的。
对此第5个参数意义都平等,但对第三个参数:
apply传入的是一个参数数组,约等于将七个参数组合成为三个数组传入,而call则作为call的参数字传送入(从第四个参数初步)。
如 func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3])

var Obj1 = {
 name: 'Object1',
 say: function(p1, p2) {
  console.log(this.name   ' says '   p1   ' '   p2);
 }
};

// logs 'Object1 says Good morning'
Obj1.say('Good', 'morning');

var Obj2 = {
 name: 'Object2'
};

// logs 'Object2 says Good afternoon'
Obj1.say.call(Obj2, 'Good', 'afternoon');

// logs 'Object2 says Good afternoon again'
Obj1.say.apply(Obj2, ['Good', 'afternoon again']);

总结

再者选取apply的益处是足以一向将眼下函数的arguments对象作为apply的第四个参数字传送入

因此演示可以看到,通过不奇怪格局调用say的时候,方法中的this指向Obj1,而透过call和apply调用的时候,this却指向了Obj二。

callapply在职能是一致的。

javascript apply用法 补充
funObj.apply([thisObj[,argArray]])
行使某一指标的八个艺术,用另2个目的替换当前指标。
functionObj的不2法门施行时,函数中的this对象会被thisObj替换掉。
thisObj 可选项。将被作为当前指标的靶子。
argArray 可选项。将被传送给该函数的参数数组。

透过示范能够见见,call和apply的功力是完全同样的,其调用方法的不相同也只是参数列表分裂罢了。

一样点在于都以用来对象的承继,首个参数都以thisObj.

复制代码 代码如下:

您恐怕感兴趣的篇章:

  • AngularJS中$apply方法和$watch方法用法计算
  • JavaScript中apply方法的应用技艺总括
  • JS中央银行使apply方法通过差别数量的参数调用函数的秘技
  • 从JQuery源码深入分析JavaScript函数的apply方法与call方法
  • 选取apply方法完成javascript中的对象承接
  • js中apply方法的施用详细深入分析
  • javascript中call和apply方法浅谈
  • JavaScript 学习笔记(九)call和apply方法
  • javascript call和apply方法
  • Js apply方法详解

分化点在于call能够有三个参数,从第2个参数开始将来的参数会挨个传给被接续的对象做参数。apply只有多个参数,第一个参数必须是数组类型只怕arguments对象类型,而且她会把数组中的成分依次传递给被持续的靶子做参数。

//apply在对象承袭方面包车型地铁采纳,不利用prototype,隐式的将父对象属性赋给了子对象
function par(name)
{
this.parname=name;
}
function child(chname,parname){
this.chname=chname;
par.apply(this,new Array(parname));
};
var o=new child("john","Mr john");
alert(o.parname ";" o.chname);
//apply可以在通用的诀窍调用方面张开应用
window.onunload=function()
{
alert("unload event is fired!");
}
function sayBye(name,toName)
{
alert(name " says bye to " toName);
}
function sayEndBiz(name,toName,content)
{
alert(name " ends his talk about " content " with " toName);
}
function addTo(args,func)
{
var oldHandler=window.onunload||function(){};
window.onunload=function()
{
func.apply(window,args);
oldHandler.apply(window, args);
}
}
addTo(new Array("John","everyone"),sayBye);
addTo(new Array("John","everyone","deveopment strategy of the company"),sayEndBiz)

透过以上几点,大家得以博得只要被一而再的指标唯有一个参数的能够利用call,假诺被持续的对象有八个参数的,建议使用apply.

你或者感兴趣的小说:

  • JavaScript中call和apply方法的差异实例深入分析
  • JS中call和apply函数用法实例深入分析
  • JS中this的对准以及call、apply的法力
  • 详解JS中的this、apply、call、bind(优良面试题)
  • 详解js中的apply与call的用法
  • JavaScript中的apply()方法和call()方法应用介绍
  • js中持续的三种用法总括(apply,call,prototype)
  • JavaScript中的apply和call函数详解
  • javascript中apply和call方法的功能及界别表达
  • JS面向对象、prototype、call()、apply()
  • javascript下arguments,caller,callee,call,apply示例及通晓
  • JavaScript函数apply()和call()用法与异同剖析

补充

js中得以兑现多几次三番,只需求调用数次call或apply就可以。如:

function animal(type,nickname){
    this.type = type;
    this.nickname = nickname;
    this.syaHello = function(){
      return 'hello';
    }
}
function wscat(name,age){
    this.name = name;
    this.age = age;
    this.sayMe = function(){
      return 'my name:'   this.name   ', age:'   this.age;
    }
}
function cat(name,age,type,nickname){
    //第一种使用call
    animal.call(this,type,nickname);
    wscat.call(this,name,age);
    //第二种使用apply
    //animal.apply(this,[type,nickname]);
    //wscat.apply(this,[name,age]);
}
console.log(new cat('wscat',2,'cat','tom');
/*
cat {
 type: 'cat',
 nickname: 'tom',
 syaHello: [Function],
 name: 'wscat',
 age: 2,
 sayMe: [Function] }
*/

接轨的优化

倘若组织函数this绑定了太多的天性(举个例子部分共用的函数),示例化后就能够照成浪费(因为this里的性质和方式实例化后会复制壹份给新对象,四个对象之间的属性和办法互不干涉,对于一些方可共用的点子来就能够导致浪费)

所以我们一般把共用的函数都位居原型链(prototype)上。不过选择call和apply不能够承继原型链上的性质和方法。

所以大家得以采用混合的而写法,使用原型链和(applycall)组合的章程开始展览继续。

让子的原型链指向父的亲自去做(父的实例化对象)。如:

cat.prototype = new animal();

让父的性质成立在子的this上。如:

animal.call(this[,arg]);
//animal.apply(this[,argArray]);

切切实实代码如下:

function animal(type,nickname){
    this.type = type;
    this.nickname = nickname;
}
animal.prototype.sayHello = function(){
    return 'hello';
}
function wscat(name,age){
    this.name = name;
    this.age = age;
} 
//这里是关键,原型链只能单继承,
//不能同时继承多个原型链,所以要一级一级来。
wscat.prototype = new animal();
wscat.prototype.sayMe = function(){
    return 'my name:'   this.name   ', age:'   this.age;
}
function cat(name,age,type,nickname){
    animal.call(this,type,nickname);
    wscat.call(this,name,age);
}
cat.prototype = new wscat();
var obj = new cat('wscat',10,'cat','tom');
console.log(obj);
//animal { type: 'cat', nickname: 'tom', name: 'wscat', age: 10 }
console.log(obj.sayHello());//hello
console.log(obj.sayMe());
/*
    my name:wscat, age:10
*/

越来越多关于JavaScript相关内容感兴趣的读者可查阅本站专题:《javascript面向对象入门教程》、《JavaScript错误与调解技能总计》、《JavaScript数据结构与算法本事总括》、《JavaScript遍历算法与本领计算》及《JavaScript数学运算用法计算》

愿意本文所述对我们JavaScript程序设计有着支持。

您恐怕感兴趣的篇章:

  • JavaScript中call和apply方法的区分实例深入分析
  • JS中this的针对以及call、apply的功效
  • 详解JS中的this、apply、call、bind(优秀面试题)
  • 详解js中的apply与call的用法
  • JavaScript中的apply()方法和call()方法运用介绍
  • js中一连的两种用法总计(apply,call,prototype)
  • JavaScript中的apply和call函数详解
  • javascript中apply和call方法的效力及界别表明
  • JS面向对象、prototype、call()、apply()
  • JavaScript中apply与call的用法意义及界别表明
  • javascript下arguments,caller,callee,call,apply示例及通晓
  • JavaScript函数apply()和call()用法与异同分析
TAG标签: 韦德娱乐1946
版权声明:本文由韦德娱乐1946_韦德娱乐1946网页版|韦德国际1946官网发布于韦德娱乐1946网页版,转载请注明出处:JavaScript中的call方法和apply方法应用相比较,JS中