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 相关文章推荐
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
js定时器实现倒计时效果
Nov 05 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
Webpack的Loader和Plugin的区别
Nov 09 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
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
万能的php分页类
2017/07/06 PHP
详解json在php中的应用
2018/09/30 PHP
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
python文件和目录操作方法大全(含实例)
2014/03/12 Python
Python中请使用isinstance()判断变量类型
2014/08/25 Python
python实现删除文件与目录的方法
2014/11/10 Python
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
python用户管理系统
2018/03/13 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
python 实现端口扫描工具
2020/12/18 Python
什么是跨站脚本攻击
2014/12/11 面试题
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
医药专业推荐信
2013/11/15 职场文书
理财计划书
2014/08/14 职场文书
个人自我剖析材料
2014/09/30 职场文书
党小组推荐意见
2015/06/02 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书