js变量传递
基本类型、引用类型
基本类型: undefined、Null、Boolean、Number、String五种 (简单的数据段);
引用类型: object (由多个值构成)。
两种类型在使用上的区别:
复制变量
// 基本类型
var num1 = 5;
var num2 = num1;
num2 = 10;
console.log(num1 + ' | ' + num2); // 5 | 10 // 引用类型
var obj1 = new Object();
obj1.num = 5;
var obj2 = obj1;
obj2.num = 10;
console.log(obj1.num + ' | ' + obj2.num); // 10 | 10
一句话,引用类型复制的是指针的指向。
传递参数
抛出一个例子:
function addTen(num) {
num += 10;
return num;
}
var count = 20;
var result = addTen(count);
console.log(count + ' | ' + result); // 20 | 30
看完这个例子,秒懂按值传递。紧接着又来一段代码:
function setName(obj) {
obj.name = 'aaa';
return obj;
}
var person = new Object();
person.name = 'bbb';
var newPerson = setName(person);
console.log(person.name + ' | ' + newPerson.name); // aaa | aaa
看完这个例子,我就懵逼了。这段代码不是解释成按引用传递更合理吗?
然后又给了一个证明就算参数是引用类型也是按值传递的例子:
function setName(obj) {
obj.name = 'aaa';
var obj = new Object(); // 如果是按引用传递的,此处传参进来obj应该被重新引用新的内存单元
obj.name = 'ccc';
return obj;
}
var person = new Object();
person.name = 'bbb';
var newPerson = setName(person);
console.log(person.name + ' | ' + newPerson.name); // aaa | ccc
从结果看,并没有显示两个'ccc'。这里是函数内部重写了obj,重写的obj是一个局部对象。当函数执行完后,立即被销毁。
到这里,js高程解释完了按值传递和按引用传递。然而对于我这样智商略平的同学而言,还是一脸懵逼。于是去网上深入地了解了下。
引用值:对象变量它里面的值是这个对象在堆内存中的内存地址。因此如果按引用传递,它传递的值也就是这个内存地址。那么var obj = new Object();会重新给obj分配一个地址,比如是0x321了,那么它就不在指向有name = 'aaa';属性的内存单元了。相当于把实参obj和形参obj的地址都改了,那么最终就是输出两个ccc了。
最后看个例子,弄懂了也就差不多理解了。
var a = {
num:'1'
};
var b = {
num:'2'
};
function change(obj){
obj.num = '3';
obj = b;
return obj.num;
}
var result = change(a);
console.log(result + ' | ' + a.num); // 2 | 3
走一遍思路:
首先把a的值传到change函数内,obj.num = '3';后a.name被修改为3;
a的地址被换成b的地址;
返回此时的a中a.num。
按共享传递
在网上还看到一种叫 按共享传递 的说法,而且特别好理解。
大致概念是这样的:调用函数传参时,函数接受对象实参引用的副本(既不是按值传递的对象副本,也不是按引用传递的隐式引用)。 它和按引用传递的不同在于:在共享传递中对函数形参的赋值,不会影响实参的值。
js变量传递的更多相关文章
- 【问题】Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数
[问题]Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数. [解决]直接对变量加引号,如: <button onclick="deleteProduct('@ ...
- Laravel教程 三:视图变量传递和Blade
Laravel教程 三:视图变量传递和Blade 此文章为原创文章,未经同意,禁止转载. Blade 上一篇我们简单地说了Router,Views和Controllers的工作流程,这一次我就按照上一 ...
- 详解js变量、作用域及内存
详解js变量.作用域及内存 来源:伯乐在线 作者:trigkit4 原文出处: trigkit4 基本类型值有:undefined,NUll,Boolean,Number和Strin ...
- js变量以及其作用域详解
详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp73 一.变量的类型 Javascript和Java.C这些语言不同 ...
- iframe子页面与父页面元素的访问以及js变量的访问
1.子页面访问父页面元素 parent.document.getElementById('id')和document相关的方法都可以这样用 2.父页面访问子页面元素 document.getEle ...
- vue中动态加载组件+开发者模式+JS参数值传递和引用传递
今天写vue里面通过接口反参动态加载组件时候 跟着同学...学习到了 一.先说说vue 内置组件 component 的用法 component组件可以来专门用来进行组件的切换,使用is来绑定你的组件 ...
- JS变量、作用域、内存
写到这个题目<JS变量.作用域,内存>,我就不由自主想起了黄金三嫖客.可能是名字有点像,嗯,一定是这样子的! JS接触下来,应该是要比Java简单不少的,所以,要学好啊.立个flag半年后 ...
- js变量值传到php(先把php解析成数据)
js变量值传到php(先把php解析成数据) 一.总结 一句话总结:传参数去后台,用ajax,或者原生js方式拼接url.明白原理,洞悉系统是先解析php,再执行html代码和js代码. 二.用aja ...
- ejs不能读取js变量??????
一.问题描述 用express搭了一个nodejs服务端,为了测试接口数据是否能够正常输出,用ejs作为模版引擎的html文件写js发请求. 1.请求正常,能在network看到,但是没有输出cons ...
随机推荐
- struts2 --xml配置
struts2.5 官方文档介绍 这个是struts2.5给出的web.xml配置方式,核心包已经被挪到了ng的上一层 <web-app id="MyStrutsApp" v ...
- [LOJ3086][GXOI/GZOI2019]逼死强迫症——递推+矩阵乘法
题目链接: [GXOI/GZOI2019]逼死强迫症 设$f[i][j]$表示前$i$列有$j$个$1*1$的格子的方案数,那么可以列出递推式子: $f[i][0]=f[i-1][0]+f[i-2][ ...
- vue路由参数变化刷新数据
当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...
- 小白月赛13 小A的路径 (矩阵快速幂求距离为k的路径数)
链接:https://ac.nowcoder.com/acm/contest/549/E来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言52428 ...
- sqlserver建立远程查询
开始远程查询前: ----open:Ad Hoc Distributed QueriesEXEC sp_configure 'show advanced options',1reconfigureex ...
- Educational Codeforces Round 63 (Rated for Div. 2)
传送门 A. Reverse a Substring 题意: 给你一串 s,让你判断能否通过反转区间[l,r]的元素,使得反转后的串的字典序小于 s: 如果能,输出 "YES",并 ...
- 【linux】常用命令集锦&持续更新...
滴:转载引用请注明哦[握爪]:https://www.cnblogs.com/zyrb/p/9709013.html 对深度学习训练及日常work中的常用linux命令进行整理. [一]screen ...
- weblogic找不到数据源
查看weblogic日志 报错是每个数据源都找不到. 查看oracle用户状态 select username,account_status,lock_date from dba_users; 解 ...
- Open vSwitch系列之二 安装指定版本ovs
在ovs学习过程中,如果自己想要安装一个ovs交换机其实一条简单的命令 apt install openvswitch 就可以了,但是这种方法只能安装低版本的ovs.在特殊情况下需要安装指定版本,例 ...
- Swagger UI及 Swagger editor教程 API文档搭配 Node使用
swagger ui 是一个在线文档生成和测试的利器,目前发现最好用的.为啥好用呢?打开 demo,支持API自动生成同步的在线文档些文档可用于项目内部API审核方便测试人员了解 API这些文档可作为 ...