JavaScript函数的调用以及参数传递


Posted in Javascript onOctober 21, 2015

JavaScript 函数调用
JavaScript 函数有 4 种调用方式。
每种方式的不同方式在于 this 的初始化。
this 关键字
一般而言,在Javascript中,this指向函数执行时的当前对象。
Note 注意 this 是保留关键字,你不能修改 this 的值。
调用 JavaScript 函数
函数中的代码在函数被调用后执行。
作为一个函数调用
实例

function myFunction(a, b) {
  return a * b;
}
myFunction(10, 2);      // myFunction(10, 2) 返回 20

以上函数不属于任何对象。但是在 JavaScript 中它始终是默认的全局对象。
在 HTML 中默认的全局对象是 HTML 页面本身,所以函数是属于 HTML 页面。
在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。
myFunction() 和 window.myFunction() 是一样的:
实例

function myFunction(a, b) {
  return a * b;
}
window.myFunction(10, 2);  // window.myFunction(10, 2) 返回 20

Note 这是调用 JavaScript 函数常用的方法, 但不是良好的编程习惯
全局变量,方法或函数容易造成命名冲突的bug。
全局对象
当函数没有被自身的对象调用是, this 的值就会变成全局对象。
在 web 浏览器中全局对象是浏览器窗口(window 对象)。
该实例返回 this 的值是 window 对象:
实例

function myFunction() {
  return this;
}
myFunction();        // 返回 window 对象

Note 函数作为全局对象调用,会使 this 的值成为全局对象。
使用 window 对象作为一个变量容易造成程序崩溃。
函数作为方法调用
在 JavaScript 中你可以将函数定义为对象的方法。
以下实例创建了一个对象 (myObject), 对象有两个属性 (firstName 和 lastName), 及一个方法 (fullName):
实例

var myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
}
myObject.fullName();     // 返回 "John Doe"

fullName 方法是一个函数。函数属于对象。 myObject 是函数的所有者。
this对象,拥有 JavaScript 代码。实例中 this 的值为 myObject 对象。
测试以下!修改 fullName 方法并返回 this 值:
实例

var myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function () {
    return this;
  }
}
myObject.fullName();     // 返回 [object Object] (所有者对象)

Note 函数作为对象方法调用,会使得 this 的值成为对象本身。
使用构造函数调用函数
如果函数调用前使用了 new 关键字, 则是调用了构造函数。
这看起来就像创建了新的函数,但实际上 JavaScript 函数是重新创建的对象:
实例

// 构造函数:
function myFunction(arg1, arg2) {
  this.firstName = arg1;
  this.lastName = arg2;
}

// This creates a new object
var x = new myFunction("John","Doe");
x.firstName;               // 返回 "John"

构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。
Note 构造函数中 this 关键字没有任何的值。
this 的值在函数调用时实例化对象(new object)时创建。
作为函数方法调用函数
在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。
call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。
实例

function myFunction(a, b) {
  return a * b;
}
myFunction.call(myObject, 10, 2);   // 返回 20

实例

function myFunction(a, b) {
  return a * b;
}
myArray = [10,2];
myFunction.apply(myObject, myArray);  // 返回 20

两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。
在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值, 即使该参数不是一个对象。
在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。
Note 通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。

JavaScript 函数参数
JavaScript 函数对参数的值(arguments)没有进行任何的检查。
函数显式参数与隐藏参数(arguments)
在先前的教程中,我们已经学习了函数的显式参数:

functionName(parameter1, parameter2, parameter3) {
  code to be executed
}

函数显式参数在函数定义时列出。
函数隐藏参数(arguments)在函数调用时传递给函数真正的值。
参数规则
JavaScript 函数定义时参数没有指定数据类型。
JavaScript 函数对隐藏参数(arguments)没有进行检测。
JavaScript 函数对隐藏参数(arguments)的个数没有进行检测。
默认参数
如果函数在调用时缺少参数,参数会默认设置为: undefined
有时这是可以接受的,但是建议最好为参数设置一个默认值:
实例

function myFunction(x, y) {
  if (y === undefined) {
     y = 0;
  } 
}

或者,更简单的方式:
实例

function myFunction(x, y) {
  y = y || 0;
}

Note 如果y已经定义 , y || 返回 y, 因为 y 是 true, 否则返回 0, 因为 undefined 为 false。
如果函数调用时设置了过多的参数,参数将无法被引用,因为无法找到对应的参数名。 只能使用 arguments 对象来调用。
Arguments 对象
JavaScript 函数有个内置的对象 arguments 对象.
argument 对象包含了函数调用的参数数组。
通过这种方式你可以很方便的找到最后一个参数的值:
实例

x = findMax(1, 123, 500, 115, 44, 88);

function findMax() {
  var i, max = 0;
  for (i = 0; i < arguments.length; i++) {
    if (arguments[i] > max) {
      max = arguments[i];
    }
  }
  return max;
}

或者创建一个函数用来统计所有数值的和:
实例

x = sumAll(1, 123, 500, 115, 44, 88);

function sumAll() {
  var i, sum = 0;
  for (i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
}

通过值传递参数
在函数中调用的参数是函数的参数。
如果函数修改参数的值,将不会修改参数的初始值(在函数外定义)。
函数参数的改变不会影响函数外部的变量(局部变量)。
通过对象传递参数
在JavaScript中,可以引用对象的值。
因此我们在函数内部修改对象的属性就会修改其初始的值。
修改对象属性可作用于函数外部(全局变量)。

Javascript 相关文章推荐
jquery ready()的几种实现方法小结
Jun 18 Javascript
jquery 图片轮换效果
Jul 29 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
Jquery获取当前城市的天气信息
Aug 05 Javascript
通过BootStrap实现轮播图的实际应用
Sep 26 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 Javascript
Java中Timer的用法详解
Oct 21 #Javascript
JS实现的竖向折叠菜单代码
Oct 21 #Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 #Javascript
纯javascript实现自动发送邮件
Oct 21 #Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 #Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 #Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 #Javascript
You might like
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
在同一窗体中使用PHP来处理多个提交任务
2008/05/08 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
php ci框架验证码实例分析
2013/06/26 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
js控制input输入字符解析
2013/12/27 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
js+html制作简单验证码
2017/02/16 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
Python使用PIL模块生成随机验证码
2017/11/21 Python
python的中异常处理机制
2018/08/30 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
Python中最大递归深度值的探讨
2019/03/05 Python
python中报错&quot;json.decoder.JSONDecodeError: Expecting value:&quot;的解决
2019/04/29 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
师范生的个人求职信范文
2014/01/04 职场文书
婚纱店策划方案
2014/05/22 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
人力资源本科毕业生求职信
2014/06/04 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android