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读取RSS数据
Jan 20 Javascript
javascript:void(0)的真正含义实例分析
Aug 20 Javascript
Jquery ui css framework
Jun 28 Javascript
Jquery常用技巧收集整理篇
Nov 14 Javascript
javascript插入样式实现代码
Feb 22 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
Sep 29 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
使用p5.js临摹动态图片
Nov 04 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 magic quotes的详解
2013/06/17 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
PHP 读取和编写 XML
2014/11/19 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
完善的jquery处理机制
2016/02/21 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
如何用Node写页面爬虫的工具集
2018/10/26 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
Python列表生成器的循环技巧分享
2015/03/06 Python
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
详解Python爬虫的基本写法
2016/01/08 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
java判断三位数的实例讲解
2019/06/10 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
速比涛英国官网:Speedo英国
2019/07/15 全球购物
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
高中生物教学反思
2014/02/05 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
调解协议书
2014/04/16 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
德劲DE1108畅想
2021/04/22 无线电
详解JS数组方法
2021/11/20 Javascript