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 相关文章推荐
js去除空格的12种实用方法
Nov 08 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
vue二级路由设置方法
Feb 09 Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 Javascript
详解JavaScript的变量
Apr 04 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 Javascript
Javascript实现单选框效果
Dec 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
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
setAttribute 与 class冲突解决
2008/02/17 Javascript
javascript Array.remove() 数组删除
2009/08/06 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
NodeJS实现视频转码的示例代码
2017/11/18 NodeJs
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
react 创建单例组件的方法
2018/04/26 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
2019/02/12 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
[02:40]DOTA2超级联赛专访430 从小就爱玩对抗性游戏
2013/06/18 DOTA
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
浅谈python3中input输入的使用
2019/08/02 Python
Python hashlib模块加密过程解析
2019/11/05 Python
python中如何设置代码自动提示
2020/07/15 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
就业协议书范本
2014/10/08 职场文书
2015年董事长秘书工作总结
2015/07/23 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
Java基于字符界面的简易收银台
2021/06/26 Java/Android