js函数传参

article/2025/3/4 17:19:44

 也许大家对于函数的参数都不会太在意,简单来说,把函数外部的值复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样。深入研究,你会发现其实没那么简单,这个传参是要分俩种情况(其实这是个错误的说法,ECMAScript中所有函数的参数都是按值传递的——《高程3》原话,之所以这里说俩种,是因为结合引用传参更容易理解)—— 值传参和引用传参。 

  值传参针对基本类型,引用传参针对引用类型,传参可以理解为复制变量值。基本类型复制后俩个变量完全独立,之后任何一方改变都不会影响另一方;引用类型复制的是引用(即指针),之后的任何一方改变都会映射到另一方。

  不少人对参数都是按值传递的感到困惑,因为访问变量有按值和按引用两种方式。下面就来看看有何不同:

  

  这一段很重要:我们可以把ECMAScript函数的参数想象成局部变量。在向参数传递基本类型的值时,被传递的值被复制给一个局部变量(即命名参数,或者用ECMAScript的概念来说,就是arguments对象中的一个元素)。在向参数传递引用类型时,会把这个值在内存中的地址(指针)复制给一个局部变量,因此这个局部变量的变化会反映在函数的外部。

 

  1、按值传递

复制代码
1 function addTen(num) {
2     num += 10;
3     return num;
4 }
5 
6 var count = 20;
7 var result = addTen(count);  //按值传递 num = count
8 alert(count);  // 20, 没变化
9 alert(result);  // 30
复制代码

  很好理解,因为是按值传递的,传递完后俩个变量各不相干!

 

  2、按引用传递(这么叫便于理解,其实也是按值传递)

复制代码
1 function setName(obj) {
2     obj.name = "Nicholas";
3 }
4 
5 var person = new Object();
6 setName(person);   //相当于按值传递  obj = person
7 alert(person.name);   // "Nicholas"
复制代码

   var person = new Object(); 时,可以用下图表示变量和对象的关系:

  当调用函数 setName(person); 时,下图可以表示全局变量person和局部变量obj的关心:

  以上代码中创建一个对象,并将其保存在变量person中。然后,这个变量被传递到setName(obj)函数中之后就被复制给了obj。在这个函数内部,obj和person引用的是同一个对象。换句话说,即使ECMAScript说这个变量时按值传递的,但obj也会按引用来访问同一个对象。于是,在函数内部为obj添加name属性后,函数外部的person也将有所反应;因为这时的person和obj指向同一个堆内存地址。所以,很多人错误的认为:在局部作用域中修改的对象会在全局对象中反映出来,就说明参数是按引用传递的。

  

  为了证明对象也是按值传递的,我们再来看看下面这个经过修改的例子:

复制代码
1 function setName(obj) {
2     obj.name = "Nicholas";
3     obj = new Object(); //改变obj的指向,此时obj指向一个新的内存地址,不再和person指向同一个
4     obj.name = "Greg";
5 }
6 
7 var person = new Object();
8 setName(person);  //你看看下面,相信我也是按值传递的了吧
9 alert(person.name);  //"Nicholas"
复制代码

  当创建obj对象 obj = new Object();  时,来看看这时person和obj的关系图:

  这个例子与前一个唯一的区别,就是setName()函数中添加了两行代码: obj = new Object(); 用来改变obj的指向; obj.name = "Greg"; 用来给新创建的obj添加属性。如果是按引用传递的,那么person就会自动被修改为指向新创建的obj的内存地址,则person的name属性值被修改为"Greg"。但是,当访问person.name时,显示的结果为"Nicholas"。这说明即使在函数内部修改了参数的值,但原始的引用仍然保持未变。实际上,当在函数内部重写obj时,这个变量引用的就是一个局部对象了。而这个局部对象会在函数执行完毕后被立即销毁!

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

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

 

转载于:https://www.cnblogs.com/lzylzy/p/9564618.html


http://chatgpt.dhexx.cn/article/xAFOkQHv.shtml

相关文章

关于js函数传参的问题

js在拼接函数时,当传递的值为字符串是会出现问题,直接报错,不会进入到函数里,这是受就需要转义符来操作, 例如 var can object; onClickUpdateCollege(" can ") 这时事件触发之后,浏览器会报错…

js 立即执行函数传参问题

正确的执行函数写法如下: (function func(i) {console.log(i);})(j);(function func(i) {console.log(i);}(j));!(function func(i) {console.log(i);})(j); 看看下面这段代码有什么问题? let testStr "test string"(function func(params) …

js函数传参,如何在JavaScript函数中不传递先前参数的情况下传递第n个可选参数?

普通函数 function fn(name,age,sex){console.log(name,age,sex);}使用方法 函数的规则是,按顺序传递,如果接收参数是三位,而你只穿了两位,不会报错但是会返回undefined 箭头函数 箭头函数和普通函数使用起来没有太多的区别。 …

JavaScript函数传参原理详解——值传递还是引用传递

讨论JavaScript的传参原理之前,我们先来看一段曾经让笔者困惑了一段时间的代码 var testA1; var testB{}; function testNumber(example){example2; }function testObj(example) {example.test1; }testNumber(testA); testObj(testB); console.log(testA);//输出1 …

javascript 函数传参

通过值传递参数 在函数中调用的参数是函数的隐式参数。 JavaScript 隐式参数通过值来传递:函数仅仅只是获取值。 如果函数修改参数的值,不会修改显式参数的初始值(在函数外定义)。 隐式参数的改变在函数外是不可见的。 通过对…

前端基础知识点:JS中的参数传递详解

JS语法中的传递参数,对于初学者是一个非常重要的概念。很多小伙伴在学习“值传递”和“引用传递”时,会有不少烦恼。今天我们就来通过各种姿势全方位剖析JS中的值传递。 本文章将会用10分钟时间无死角的解析JS的传参方式,希望能对您有所帮助…

Javascript基础知识(三):函数参数(传参)

1.函数参数分类及使用 上一篇博客已经讲到函数参数有实参和形参两种。 函数参数使用时需要注意以下几点&#xff1a; 1.如果形参有两个赋值&#xff0c;而实参只给了一个值&#xff0c;那么就要把这个值赋予第一个形参.第二个形参没有赋值。 示例&#xff1a; <script&g…

js 基础-函数传参

函数中的参数传递是所有编程语言的中的基础内容。本文是介绍了js中保存基本数据类型和引用数据类型的两种方式以及在函数传参的本质。 1 简介 本文介绍了js中两种不同数据类型的数据的保存问题&#xff0c;以及赋值操作的本质&#xff0c;最后指出函数传参就是赋值操作&#…

php获取qq音乐的api类,利用QQ音乐api集成的php歌曲搜索

获取最新音乐 url&#xff1a; https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_cp.fcg?uin0&notice0&platformh5&needNewCode1&tpl3&pagedetail&typetop&topid27 获取推荐歌曲 url&#xff1a; https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_cp.…

Vue之跨域调用网易云音乐API及QQ音乐API

今天在做VUE项目的时候&#xff0c;发现调用QQ音乐轮播图的API一直失败&#xff0c;timeout真的不是我网络的问题&#xff0c;在客厅对着路由器调了一整天都是报错&#xff0c;我还以为是API失效了&#xff0c;但其实没有........晚上突然又可以获取了 但总不能不写轮播图吧&am…

MusicBee 歌词插件(基于QQ音乐API)

MusicBee 歌词插件&#xff08;基于QQ音乐API&#xff09; MusicBee 是一个很棒的免费音乐管理、播放软件&#xff0c;支持通过插件来扩展功能。然而 MusicBee 在初始情况下仅对外国的几个歌词数据库进行检索&#xff0c;得到的结果一般是不带时间轴的纯文本歌词&#xff0c;并…

php开发个人音乐站 QQ音乐api

做位一名优秀的程序员 工作时候戴耳机是不可避免的 然后好听的歌又需要会员 下面小编就给大家简绍我自己听歌的神器 话不多说 开撸&#xff01; 一&#xff0c;要想获得对应的歌曲肯定要先获得歌曲的id,图片id等 下面主要讲解如何获取歌曲播放id&#xff1b; 1.搜索歌曲API&a…

python调用QQ音乐API

python调用QQ音乐API 1. 音乐搜索接口、其他接口 2. 获取token 3. 拼接播放地址 先上一份代码&#xff1a; import requests import pprint import json from selenium import webdriver# 音乐搜索接口p, n, w 1, 5, 碰 url_1 https://c.y.qq.com/soso/fcgi-bin/client_…

php计算QQ音乐guid,QQ音乐API分析2017

官网提供API 说明&#xff1a;此API主要针对移动端直接调用QQ音乐API用&#xff0c;API只能在QQAPP内执行&#xff0c;上线时间尚短。 http://y.qq.com/m/api/api.html 自己分析的API 说明&#xff1a; 根据官网https://y.qq.com/分析的API&#xff0c;经过测试&#xff0c;可以…

java qq音乐接口 api,GitHub - yan123zi/qqMusicApi: qq音乐Api接口

qq音乐 API qq音乐 Node.js API service QQ音乐API koa2 版本, 通过Web网页版请求QQ音乐接口数据, 有问题请提 issue 当前代码仅共学习&#xff0c;不可做商业用途 API结构图 环境要求 因为本项目采用的是koa2, 所以请确保你的node版本是7.6.0 node -v &#x1f4e6; 安装 git…

QQ音乐API整理

最近准备用vue做个音乐播放器&#xff0c;网上找了找音乐API&#xff0c;看了一圈&#xff0c;还是QQ音乐最合适&#xff0c;这里做个整理 这篇博客已经过时了&#xff0c;下面的不用看了。。。。 歌曲搜索 接口地址 var num 3,name 王菲,urlString http://s.music.qq.co…

网易云音乐api、QQ音乐api、黑马电商api、小说api、漫画api接口

网易云音乐接口文档 基础访问地址&#xff08;api的跟地址&#xff09;&#xff1a;https://autumnfish.cn/ 接口文档地址&#xff1a;https://binaryify.github.io/NeteaseCloudMusicApi/ QQ音乐接口文档 基础访问地址&#xff08;api的跟地址&#xff09;&#xff1a;http…

QQ音乐API

** QQ音乐API ** 效果图: URL: 通过这条接口查找到这10条歌曲每一条的Songmid https://c.y.qq.com/soso/fcgi-bin/client_search_cp?aggr=1&cr=1&flag_qc=0&p=1&n=10&w=邓紫棋; 这条链接获取到QQ音乐当前使用的地址(QQ音乐不定期换地址,本人跳过这…

2019最新版QQ音乐api调用(原创)

下载QQ音乐任意歌曲方法&#xff1a; 1.首先在QQ音乐任意播放页面 2.进入开发者模式按F12即可 3.选择network&#xff0c;按ctrlR进行筛选多媒体文件 4.优先选择大小排序右击最大的多媒体文件出来快捷菜单&#xff0c;选择如下图的选项即可进入歌曲播放页面 5.如下链接就是播放…

QQ音乐api 最新版,亲测可用

关注公众号&#xff0c;每天都能领红包 最近这个api出现了403问题&#xff0c;已经找到原因了 原因是 歌曲不能再以第一参数当id了 要以倒数第5个 如以上的例子 002qU5aY3Qu24y当id&#xff0c;而且前面要加C100&#xff0c;完整的就是 http://ws.stream.qqmusic.qq.com/C1000…