JavaScript函数参数的传递方式详解

 更新时间:2017年03月06日 14:14:44   作者:rickkky  
本文主要介绍了JavaScript函数参数的传递方式,具有很好的参考价值。下面跟着小编一起来看下吧

JavaScript使用一个变量对象来追踪变量的生存期。基本类型值被直接保存在变量对象内;而引用类型值则作为一个指针保存在变量对象内,该指针指向实际对象在内存中的存储位置。

基本类型值的传递

向参数传递基本类型值时,被传递的值会被复制给一个局部变量(即命名参数,或者是arguments对象中的一个元素)。

function addOne (num) {
 num++;
 return num;
}
var count = 1;
var result = addOne(count);
console.log(count); //1
console.log(result); //2

在上面的例子中,变量count的值被传递给函数的参数num以便在函数中使用,此时变量count和参数num的值虽然是一样的,但是它们是两个相互独立的变量,在函数中改变参数num的值并不会影响函数外部的变量count的值。

因此JavaScript中函数的基本类型值参数的传递是按值传递的。

引用类型值的传递

function setName (obj) {
 obj.name = 'Nicholas';
}
var person = new Object();
setName(person);
console.log(person.name); //'Nicholas'

在上面的例子中,变量person的值被传递给函数的参数obj,此时在函数内部为参数obj添加一个name属性,函数对参数obj的使得函数外部的变量person也获得了一个name属性。从结果上看,JavaScript中函数的引用类型值参数的传递似乎是按引用传递的。

然而并非如此。变量person的值是引用类型值,因此它的值在变量对象中可以看做是一个实际对象在内存中的地址(或指针)。传递参数以后参数obj的值是也是该对象在内存中的地址,因此在函数中操作参数obj的值所引用的对象相当于操作变量person的值所引用的对象。

function setName (obj) {
 obj.name = 'Nicholas';
 obj = new Object();
 obj.name = 'Greg';
 return obj;
}
var person = new Object();
var result = setName(person);
console.log(person.name); //'Nicholas'
console.log(result.name); //'Greg'

如果参数传递是按引用传递的,在上面的例子中,函数改变了参数obj的值所引用的对象,那么相对应的变量person的值所引用的对象也会改变。改变函数的写法或许能更加有助于理解参数的按值传递。

function setName () {
 var obj = arguments[0];
 obj.name = 'Nicholas';
 obj = new Object();
 obj.name = 'Greg';
 return obj;
}

虽然变量person和参数obj的值一样都是同一个对象在内存中的地址,但它们是两个相互独立的变量。如果在函数中改变参数obj的值,使其指向内存中另外一个对象,变量person的值不会改变,还是指向原来的对象。

因此JavaScript中函数的引用类型值参数的传递是按值传递的。

结论

JavaScript中所有函数的参数都是按值传递的。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

相关文章

  • js实现鼠标滚轮控制图片缩放效果的方法

    js实现鼠标滚轮控制图片缩放效果的方法

    这篇文章主要介绍了js实现鼠标滚轮控制图片缩放效果的方法,涉及onmousewheel事件及javascript操作图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • js改变style样式和css样式的简单实例

    js改变style样式和css样式的简单实例

    下面小编就为大家带来一篇js改变style样式和css样式的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 在JavaScript中验证URL的新方法(2023版)

    在JavaScript中验证URL的新方法(2023版)

    在JavaScript领域,URL 验证方面有了新消息!多年来,人们一直在讨论JavaScript没有一种简便的方法来验证 URL,现在有了一种新方法URL.canParse(),需要的朋友可以参考下
    2023-09-09
  • layui(1.0.9)文件上传upload,前后端的实例代码

    layui(1.0.9)文件上传upload,前后端的实例代码

    今天小编就为大家分享一篇layui(1.0.9)文件上传upload,前后端的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法

    autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法

    这篇文章主要介绍了autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法,本文通过图文并茂实例代码相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • ES6中Array.copyWithin()函数的用法实例详解

    ES6中Array.copyWithin()函数的用法实例详解

    ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的朋友参考下
    2017-09-09
  • js实现class样式的修改、添加及删除的方法

    js实现class样式的修改、添加及删除的方法

    这篇文章主要介绍了js实现class样式的修改、添加及删除的方法,主要通过修改标签的className来实现这一功能,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • 微信浏览器左上角返回按钮监听的实现

    微信浏览器左上角返回按钮监听的实现

    这篇文章主要介绍了微信浏览器左上角返回按钮监听的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • JS制作简单的三级联动

    JS制作简单的三级联动

    本文给大家分享的是使用javascript实现的一个简单的三级联动菜单,非常简单实用,有需要的小伙伴过来参考下吧。
    2015-03-03
  • js实现的动画导航菜单效果代码

    js实现的动画导航菜单效果代码

    这篇文章主要介绍了js实现的动画导航菜单效果代码,涉及JavaScript通过鼠标事件控制页面元素样式动态变换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09

最新评论