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 三种编解码方式
Feb 01 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
Feb 17 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
es5 类与es6中class的区别小结
Nov 09 Javascript
JavaScript 对象创建的3种方法
Nov 17 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/09 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
php中引用符号(&amp;)的使用详细介绍
2016/12/06 PHP
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
[42:22]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第一局
2016/02/27 DOTA
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
Python制作豆瓣图片的爬虫
2017/12/28 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
消防器材管理制度
2014/01/28 职场文书
购房协议书
2014/04/11 职场文书
行政求职信
2014/07/04 职场文书
2014年民政工作总结
2014/11/26 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
活动总结模板大全
2015/05/11 职场文书
车间安全生产管理制度
2015/08/06 职场文书
Django程序的优化技巧
2021/04/29 Python
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技