javascript函数调用的各种方法!!

在JavaScript中一共有下面4种调用方式:

(1) 基本函数调用

(2)方法调用

(3)构造器调用

(4)通过call()和apply()进行调用

1. 基本函数调用

普通函数调用模式,如:

JavaScript code?


1

2

3

4

  function fn(o){

     …… 

  }

  fn({x:1});

在基本函数调用中,

(1)每个参数作为实参传递给声明函数时定义的形参;

(2)this被绑定到全局变量(直接调用一般指的是window)

JavaScript code?


1

2

3

4

5

6

7

8

9

10

  var object = {value:1};

  var value = 2;

 object.printProps = function(){

    var printValue = function(){

      console.log(this.value);

    };

   printValue();

   console.log(this.value);

 }

 object.printProps();

此时的运行结果是:

2

1

在printValue()函数在执行时,this.value值为2,也就是说,this指向的是全局对象,而不是对象object。

(3)返回值:函数的返回值成为调用表达式的值。

I. 如果函数返回是解释器到达结尾,也就是没有执行到return XXX的语句。返回值为undefined。

II. 如果函数返回是因为接受器执行到return xxx语句, 返回return之后的值。

III. 如果return语句后没有值,即return,则返回undefined。

2. 方法调用

当一个函数被保存为对象的一个属性时,称为方法。

(1)参数和返回值的处理与函数调用一致;

(2)调用上下文this为该对象

JavaScript code?


1

2

3

4

5

6

7

8

9

10

11

 

function print(){

    console.log(this.value); 

  }

  var value=1;

  var object = {value:2};

  object.m = print;

  //作为函数调用

  print();

  //作为方法调用

  object.m();

运行结果为:

1

2

当调用print时,this绑定的是全局对象,打印全局变量value值1。

但是当调用object.m()时,this绑定的是方法m所属的对象Object,所以打印的值为Object.value,即2。

3. 构造器调用

函数或方法调用之前带有关键字new,它就构成构造函数调用。如:

JavaScript code?


1

2

 function fn(){……}

 var obj = new fn();

(1)参数处理:一般情况构造器参数处理和函数调用模式一致。但如果构造函数没用形参,JavaScript构造函数调用语法是允许省略实参列表和圆括号的。

如:下面两行代码是等价的。

JavaScript code?


1

2

  var obj = new Object();

  var obj = new Object;

(2)函数的调用上下文为新创建的对象。

JavaScript code?


1

2

3

4

5

6

7

8

9

10

 function fn(value){

   this.value =value;

 }

 var value =1;

 var obj = new fn(2);

 console.log(value);

 console.log(obj.value);

 fn(3);

 console.log(value);

 console.log(obj.value);

运行结果:

1

2

3

2

I. 第一次调用fn()函数是作为构造函数调用的,此时调用上下文this被绑定到新创建的对象obj。所以全局变量value值不变,obj新增一个属性value,值为2;

II. 第二次调用fn()函数是作为普通函数调用的,此时调用上下为this被绑定到全局对象,在浏览器中为window。所以全局对象的value值改变为3,而obj的属性值不变。

(3)构造函数通常不使用return关键字,返回值为新对象。而如果构造函数显示地使用return语句返回一个对象,那么调用表达式值就为这个对象。如果构造函数使用return语句但没有指定返回值或者返回一个原始值,则忽略返回值,同时使用新对象作为调用结果。

4.通过call()和apply()进行调用

虽然在一个独立的函数调用中,根据是否是strict模式,this指向undefined或window,不过,我们还是可以控制this的指向的!要指定函数的this指向哪个对象,可以用函数本身的apply()或call()方法,它们都是接收两个参数。

call()方法使用它自有的实参列表作为函数的实参,apply()方法要求以数组的形式传入参数

apply方法第一个参数是改变后的调用对象,第二个参数是将函数参数以数组形式传入[ ],而call()第一个参数与call()方法相同,第二个参数是原来参数序列......。

时间: 2024-12-18 19:05:41

javascript函数调用的各种方法!!的相关文章

【转】显示JavaScript函数调用堆栈的方法

显示JavaScript函数调用堆栈的方法 许多大型的JavaScript应用程序间的函数调用关系是非常复杂的, 在开发或者调试过程中,经常需要跟踪某个函数是由哪些函数调用后才触发执行的,弄清楚这些函数的调用顺序对我们理解代码的数据流向是非常重要的. Firebug和Chrome提供了console.trace()来显示函数堆栈,在需要调试的地方加上下面的一行代码就能显示该函数调用时的上下文关系. IE6就没有这么方便了,它没有提供显示函数堆栈的工具,当不可避免的需要在IE6下调试代码时,使用下

JavaScript调用函数的方法

摘要:这篇文章详细的介绍了Javascript中各种函数调用的方法及其原理,对于理解JavaScript的函数有很大的帮助! 一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那样的代码是我写的).JavaScript拥有函数式编程的特性,当我们选择面对它的时候,这将成为我们前进的阻碍.  作为初学者,我们来测试五种函数调用的方法,从表面来看我们会认为那些函数与C#中函数的作用非常相似,但是我们一会儿可以看到

JavaScript函数调用规则

1. [代码][JavaScript]代码     JavaScript函数调用规则一 (1)全局函数调用:function makeArray( arg1, arg2 ){    return [this , arg1 , arg2 ];}这是一个最常用的定义函数方式.相信学习JavaScript的人对它的调用并不陌生.调用代码如下:makeArray('one', 'two');// => [ window, 'one', 'two' ] 这种方式可以说是全局的函数调用.为什么说是全局的函数

5种 JavaScript 调用函数的方法

一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那样的代码是我写的).JavaScript拥有函数式编程的特性, 当我们选择面对它的时候,这将成为我们前进的阻碍. 作为初学者,我们来测试五种函数调用的方法,从表面来看我们会认为那些函数与C#中函数的作用非常相似,但是我们一会儿可以看到还是有非常重要的不同的地方的,忽视这些差异无疑会导致难于跟踪的bug.首先让我们创建一个简单的函数,这个函数将在将在下文中使用

javascript 函数调用

背景:<a href='javascript:doDetail("+res[i]['termType']+")'>"+res[i]['termType']+"</a> 一个链接,显式为 res[i]['termType'] 为返回结果的一个条目的一个字段,href是一个javascript方法 就是说点击会执行一个javascript方法,但是实际上方法时触发不了的,这里的语法有错误,错误找了很久终于知道了为什么不能触发这个方法, 以简单的例

JavaScript document属性和方法

JavaScript document属性和方法 --------------------------------------------属性: 1. Attributes     存储节点的属性列表(只读) 2. childNodes     存储节点的子节点列表(只读) 3 .dataType     返回此节点的数据类型 4. Definition     以DTD或XML模式给出的节点的定义(只读) 5. Doctype     指定文档类型节点(只读) 6 .documentEleme

将JavaScript 插入网页的方法

将JavaScript 插入网页的方法 使用Javascript代码. 插入JavaScript 与在网页中插入CSS的方式相似.使用下面的代码可以在网页中插入JavaScript: ... 其中的...就是代码的内容.JavaScript的插入位置不同,效果也会有所不同,还可以像CSS一样,将JavaScript保存成一个外部文件,这些内容会在下一节讨论. 用JavaScript在网页中输出内容 JavaScript使用document.write来输出内容.例如  document.writ

javascript中的toString()方法

javascript中的toString()方法,主要用于Array.Boolean.Date.Error.Function.Number等对象.下面是这些方法的一些解析和简单应用,做个纪律,以作备忘. (1)Array.toString():将数组转换成一个字符串,并且返回这个字符串.描述:当数组用于字符串环境中时,javascript会调用这一方法将数组自动转换成一个字符串.toString()在把数组转换成字符串时,首先要将数组的每个元素都转换成字符串(通过调用这些元素的toString方

javascript 中关于call方法的详解。

关于javascript中的call方法,网上查了一些资料总是不得详解.总结网上的观点,call有两个妙用: 1: 继承.(不太喜欢这种继承方式.) 2: 修改函数运行时的this指针. js中关于call的解释如下: js关于call的这份文档容易让人迷糊.而<javascript权威指南>对call的描述就比较容易理解了. 注意红色框中的部分,f.call(o)其原理就是先通过 o.m = f 将 f作为o的某个临时属性m存储,然后执行m,执行完毕后将m属性删除. 如 function f