JavaScript中按值传递的详细介绍

本篇文章给大家带来的内容是关于JavaScript中按值传递的详细介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

概述

参数的传递分为按值传递和按引用传递,而 javascript 中参数的传递只有按值传递。

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

所谓按值传递就是:

把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样。  — 《JavaScript 高级程序设计》

我们知道 JS 中,既有基本数据类型又有引用数据类型,那么二者的按值传递有什么样的区别呢?

先给结论

在向参数传递基本数据类型时,被传递的值会被复制给一个局部变量(arguments 类数组对象中的一个元素)。在向参数传递引用数据类型时,会把这个值的内存地址赋给一个局部变量。

一、数据类型

在 JS 中,数据类型分为基本类型和引用类型。

立即学习“Java免费学习笔记(深入)”;

其中基本类型包括:number, string, boolean, undefined, null, Symbol(es 6 新增)。基本类型的值是保存在栈内存当中的。

基本数据类型的值本身是不会改变的。

let num1 = 5;let num2 = num1;

登录后复制

442471078-5bcf4e805f188_articlex.png

将保存着原始值的变量 num1 赋值给 num2 后,会将原始值 num1 的副本赋值给新变量 num2, 此后这两个变量是完全独立的,他们只是拥有相同的值而已,是完全独立的拷贝,互不干涉。

引用数据类型包括:Function, Array, Object 等等除了基本数据类型之外的数据。引用数据类型是保存在堆内存当中的。

JS 不允许直接操作对象的内存空间,所以引用数据类型是通过存储在变量处的值,也就是一个指针(point),指向存储对象的内存地址,从而进行访问的。

let obj1 = new Object();var obj2 = obj1;

登录后复制

2226579283-5bcf4e8065ba4_articlex.png

当把引用类型的变量 obj1 赋给另一个变量 obj2 后,obj2 接受的其实是引用类型数据的内存地址指针。所以,判断两个引用类型是否相等,其实比较的是内存地址是否相等。

二、按值传递

var num = 1;function foo(param) {    param = 2;}foo(num);console.log(num); // num 值仍为1, 并没有受 param = 2 赋值影响

登录后复制

以上代码:

按值传递每次传递参数时,都会拷贝一份副本到函数内部,拷贝前后的两个值互不影响。

二、“按引用传递”

var obj = {    num: 1};function foo(o) {    o.num = 2;    console.log(obj.num);  // 2}foo(obj);console.log(obj.num); // 2

登录后复制

以上代码,foo 函数把 obj 对象作为实参,执行完毕后把 obj 对象的 num 属性给改变了,说明参数 o 对象 和 外部变量 obj 对象是同一个对象。说好的按值传递呢,怎么还是把原来的对象给改变了呢。

三、按共享传递

再看下面这段代码:

var obj = {    num: 1};function foo(o) {    o = 100;}foo(obj);console.log(obj.num);  // 1

登录后复制

如果是按引用传递的话,按理来说 obj 对象会被改变会 100 才对。

准确的说,JS中的基本类型按值传递,对象类型按共享传递的(call by sharing,也叫按对象传递、按对象共享传递)

在共享传递中对函数形参的赋值,不会影响实参本身的值。

所以,形参引用的对象是同一个,由于对象是可变的(mutable),修改形参中对象的属性值,会影响到原本对象的属性值。

按引用传递是传递对象的引用,而按共享传递是传递对象的拷贝的副本,所以副本本身无法直接修改。而拷贝副本也是一种拷贝,所以也被认为是按值传递。

基本类型本身是按值传递,具有不可变性(immutable),对基本类型的修改,实质上都是在栈内存中创建了新的值。

复习巩固:

var obj = { num : 0 };obj.num = 100;var o = obj;o.num = 1;obj.num; // 1, 被修改o = true;obj.num; // 1,  o 是对象的一个拷贝,对 o 本身的修改,不会改变 obj 对象本身的值。

登录后复制

总结

JavaScript 中参数的传递只有按值传递,而对于引用类型的传递,是一种共享传递,传递的是数据类型的拷贝副本,虽然引用的是同一个对象,但是无法通过改变形参来改变实参本身。

JS 中把这种拷贝也认为是按值传递。

以上就是JavaScript中按值传递的详细介绍的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2738239.html

(0)
上一篇 2025年3月8日 01:48:17
下一篇 2025年3月3日 16:39:14

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • ECMAScript6中Promise是什么?有什么用?(附示例)

    本篇文章给大家带来的内容是关于ecmascript6中promise是什么?有什么用?(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 刚学习完,有点粗略印象。整理记录一下以便后续学习补充,加深理解。 Promis…

    编程技术 2025年3月8日
    000
  • Vue中使用axios请求拦截的方法介绍

    本篇文章给大家带来的内容是关于vue中使用axios请求拦截的方法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一、前言 axios的基础使用就不过多的讲解啦,如何使用可以看axios文档使用说明·Axios中文说明…

    2025年3月8日
    200
  • 带你详细实现vue双向绑定

    本篇文章给大家带来的内容是关于带你详细实现vue双向绑定,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 当今前端天下以 Angular、React、vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或…

    2025年3月8日 编程技术
    200
  • javascript遍历方法的介绍(代码示例)

    本篇文章给大家带来的内容是关于javascript遍历方法的介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 有用到object对象的转换成数组,然后又想到了遍历方法,所以,也想记录下 1. 终止或者跳出循环…

    编程技术 2025年3月8日
    200
  • JS中原型式和寄生式继承的详解(代码示例)

    本篇文章给大家带来的内容是关于js中原型式和寄生式继承的详解(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 前言:最近在细读Javascript高级程序设计,对于我而言,中文版,书中很多地方翻译的差强人意,所以…

    编程技术 2025年3月8日
    200
  • JavaScript中如何使用String对象?String对象的常用方法

    本篇文章给大家带来的内容是介绍javascript中如何使用string对象?string对象的常用方法 。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 length 返回字符串的长度(字符数) var str=’Hel…

    2025年3月8日 编程技术
    200
  • 本地node包的测试方法介绍

    本篇文章给大家带来的内容是关于本地node包的测试方法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 当我们编写一个node包,在发布到npm上之前,需要在本地测试该包。假设我们有一个已经编写好的本地node包xcxu…

    编程技术 2025年3月8日
    200
  • BAT各大互联网公司javascript前端面试题总结

    本篇文章给大家带来的内容是关于bat各大互联网公司javascript前端面试题总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 很多面试题是我自己面试BAT亲身经历碰到的。整理分享出来希望更多的前端er共同进步吧,不仅…

    2025年3月8日
    200
  • Node.js的面试题内容总结(附答案)

    本篇文章给大家带来的内容是关于node.js的面试题内容总结(附答案),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 译者按: 从ECMAScript标准,Node.js语法以及NPM模块角度来看,Node.js的发展让人…

    2025年3月8日
    200
  • vue使用原生js实现滚动页面跟踪导航高亮

    本篇文章给大家带来的内容是关于vue使用原生js实现滚动页面跟踪导航高亮,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 需要使用vue做一个专题页面。 滚动页面指定区域导航高亮。 监听滚动页面事件,对比当前页面的位置与元素…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论