技术标签 TAGS

专业技术精选

首页 > 技术 > 前端技术

call 和 apply的应用 解说

2010-12-31 15:07:55 by 【6yang】, 78 visits, 收藏 | 返回

1.Call方法

 
call 方法
调用一个对象的一个方法，以另一个对象替换当前对象。

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

参数
thisObj 可选项。将被用作当前对象的对象。
arg1, arg2, , argN 可选项。将被传递方法参数序列。

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

如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。

如果你以前没有用过此方法，读起来是很迷茫的，下面先看看例子，理清一下思路。
function person(name,age,sex){  //定义person
this.name=name;
this.age=age;
this.sex=sex;
}
function student(name,age,sex,university,major){  //定义Student
this.university=university;
this.major=major;
person.call(this,name,age,sex);  //person.call(student,argument...)
}

var john=new student("john",20,"male","MIT","webdeveloper"); //添加实例
alert(john.age);  //显示结果为20



从上面的函数看，按理说student并没有age这个属性，但为什么john.age会是 20？原因就是 person.call(student,name,age,sex);从结果看，call多少有点继承的味道。 A.call(B,argument,argument2...)，结果就是B继承了A，对B进行实例化后，B里面继承了A的属性和方法。

 
function person(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
this.say=function(){alert("my name is "+name);}
}
function student(name,age,sex,university,major){
this.university=university;
this.major=major;
person.call(this,name,age,sex);
}

var john=new student("john",20,"male","MIT","webdeveloper");
alert(john.age);
john.say();  //调用say()方法，显示my name is john


只有方法才call方法，其他对象或属性没有，这里指的方法即typeof(any)==’function’,其他typeof非function的都没有call方法，比如Array数组就没有call方法。

稍微改动一下：

function person(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
this.say=function(){alert("my name is "+this.name);}
}
function student(name,age,sex,university,major){
this.name="inner";
this.university=university;
this.major=major;
}
var john=new student("john",20,"male","MIT","webdeveloper");
var person2=new person();
person2.say.call(john);  //显示结果为my name is inner



person2.say.call(john)，其实就是让john对象调用person2的say方法，而john对象里面 this.name="inner"，john调用perosn2的say方法的时候，关键字变量this.name会被替换，所以结果为：my name is inner。

同时继承多个类：

function parent(father,mother){
this.father=father;
this.mother=mother;
this.tell=function(){alert(this.father+","+this.mother)}
}
function person(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
this.say=function(){alert("my name is "+this.name);}
}
function student(name,age,sex,university,major){
this.name="inner";
this.university=university;
this.major=major;
parent.call(this);
person.call(this,name,age,sex);
}
var john=new student("john",20,"male","MIT","webdeveloper");
alert(john.sex);
john.father="Bob John";
john.mother="Mary John";
john.tell();  //显示结果Bob John,Mary John


通过parent.call(this);person.call(this); student同时继承了parent和person的属性及方法。

2.Apply方法

 
apply 方法
应用某一对象的一个方法，用另一个对象替换当前对象。
apply([thisObj[,argArray]])

参数
thisObj 可选项。将被用作当前对象的对象。
argArray 可选项。将被传递给该函数的参数数组。
说明
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。

Apply方法与Call的区别就是在于，call传递参数直接列出来就可以了，而Apply传递参数需要把参数放入数组里面。
function person(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
this.say=function(){alert("my name is "+this.name);}
}
function student(name,age,sex,university,major){
this.university=university;
this.major=major;
person.apply(this,[name,age,sex]);  //apply与call的区别，传递参数的方法不同
}
var john=new student("john",20,"male","MIT","webdeveloper");
alert(john.sex);  //显示male
john.say();  //显示my name is john


3.argument对象

argument是JavaScript的内置对象，它代表正在执行的函数和调用它的函数的参数。

使用方法：[function.]arguments[n ]

其中function是可选项。当前正在执行的 Function 对象的名字。
n是必选项。要传递给 Function 对象的从0开始的参数值索引。

不能显式创建arguments对象。arguments对象只有函数开始时才可用。函数的arguments对象并不是一个数组，访问单个参数的方式与访问数组元素的方式相同。索引n实际上是arguments对象的0…n属性的其中一个参数。

演示实例：
<script language="javascript" type="text/javascript">(function argTest(a,b,c,d){
alert("函数需要 "+argTest.length+" 个参数");
alert("已经传入的参数为："+arguments.length+"个");
document.writeln("参数分别为：");
for(var i=0;i<arguments.length;i++){
document.writeln(arguments[i]);
}
})(1,2,3,4);</script>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>call 和 apply的应用 解说</title>

<style type="text/css">


</style>
<script language="javascript"><!--
/*function Lecture(name,teacher){
    this.name=name;
    this.teacher=teacher;
    }
Lecture.prototype.display=function(){
     return this.teacher+"正在教幼儿园"+this.name+" ";
    }
function Schedule(lectures){
     this.lectures=lectures;
    }    
Schedule.prototype.display=function(){
    var str="";
    for(var i=0;i<this.lectures.length;i++){
         str +=this.lectures[i].display();
        }
    return str;    
    }    
    
var mySchedule=new Schedule([
                new Lecture("语文","熊老师"),
                new Lecture("数学","钟老师")
                ]);
alert(mySchedule.display()); */



/*function obj2(name,teacher){
    this.name = name;
    this.teacher = teacher;
}
obj2.prototype.display=function(){
     return this.teacher+"正在教幼儿园"+this.name+" ";
    }

function fnCouse(obj1){
    this.obj1 = obj1;
}
fnCouse.prototype.display = function(){
    var str = ""; 
    str = this.obj1.display();
    return str;
}
var myCourse = new fnCouse(new obj2("语文", "熊老师"));

alert(myCourse.display());*/


//reset ----------------------------------应用
/*function classA(){
    this.a = 100;
    this.reset = function(){
        for(var each in this){
            delete this[each];
        }
    }
}
//classA.prototype = new classA();
var obj = new classA();
obj.a = 200;
obj.reset();

alert(obj.a);*/

//call ----------------------------------应用

/*var func=new function(){this.a="a"; this.b = "b"};
var myfunc=function(x,y){
        //var a="myfunc";
        alert(this.a);
        alert(y);
    }
myfunc.call(func,"var","var1");*/

//call 和 apply ----------------------------------应用

/*function cls1()
{
  this.a='123';
}
cls1.prototype.fun1=function()
{
  alert(this.a);
}
function cls2()
{
  this.a='456';
}
var o1=new cls1();
var o2=new cls2();
o1.fun1.apply(o2);*/

 


function fnCouse(obj1){
    this.obj1 = obj1;
}
fnCouse.prototype.display = function(){
    var str = ""; 
    str = this.obj1;
    return str;
}
var myCourse = new fnCouse("熊老师");

alert(myCourse.display());



function classA(a){
    this.a = a;
}
var obj = new classA("2");

classA.prototype.display = function(){
    var str = "";
    str = this.a;
    return str;
}
alert(obj.display());

// --></script>

</head>
<body>  
</body>
</html>

分享到：
我要评论 本文来自:http://www.6yang.net/articles_view.php?id=878&cid=7
share

    图片原图

    loading

    loading