基本类型、引用类型

基本类型: 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变量传递的更多相关文章

  1. 【问题】Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数

    [问题]Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数. [解决]直接对变量加引号,如: <button onclick="deleteProduct('@ ...

  2. Laravel教程 三:视图变量传递和Blade

    Laravel教程 三:视图变量传递和Blade 此文章为原创文章,未经同意,禁止转载. Blade 上一篇我们简单地说了Router,Views和Controllers的工作流程,这一次我就按照上一 ...

  3. 详解js变量、作用域及内存

    详解js变量.作用域及内存 来源:伯乐在线 作者:trigkit4       原文出处: trigkit4    基本类型值有:undefined,NUll,Boolean,Number和Strin ...

  4. js变量以及其作用域详解

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp73   一.变量的类型  Javascript和Java.C这些语言不同 ...

  5. iframe子页面与父页面元素的访问以及js变量的访问

    1.子页面访问父页面元素  parent.document.getElementById('id')和document相关的方法都可以这样用 2.父页面访问子页面元素  document.getEle ...

  6. vue中动态加载组件+开发者模式+JS参数值传递和引用传递

    今天写vue里面通过接口反参动态加载组件时候 跟着同学...学习到了 一.先说说vue 内置组件 component 的用法 component组件可以来专门用来进行组件的切换,使用is来绑定你的组件 ...

  7. JS变量、作用域、内存

    写到这个题目<JS变量.作用域,内存>,我就不由自主想起了黄金三嫖客.可能是名字有点像,嗯,一定是这样子的! JS接触下来,应该是要比Java简单不少的,所以,要学好啊.立个flag半年后 ...

  8. js变量值传到php(先把php解析成数据)

    js变量值传到php(先把php解析成数据) 一.总结 一句话总结:传参数去后台,用ajax,或者原生js方式拼接url.明白原理,洞悉系统是先解析php,再执行html代码和js代码. 二.用aja ...

  9. ejs不能读取js变量??????

    一.问题描述 用express搭了一个nodejs服务端,为了测试接口数据是否能够正常输出,用ejs作为模版引擎的html文件写js发请求. 1.请求正常,能在network看到,但是没有输出cons ...

随机推荐

  1. cocos 场景制作流程

    前面的话 本文将详细介绍 cocos 场景制作流程 节点和组件 Cocos Creator 的工作流程是以组件式开发为核心的,组件式架构也称作组件-实体系统,简单的说,就是以组合而非继承的方式进行实体 ...

  2. mpvue——Error: Cannot find module 'escape-string-regexp'

    报错 $ cnpm run build > mpvue-qq@1.0.0 build D:\wamp\www\wxsmallsoft\mini-0212\mpvueQQ > node bu ...

  3. Java定义三个点Object...

    从Java 5开始,Java语言对方法参数支持一种新写法,叫 可变长度参数列表,其语法就是类型后跟...,表示此处接受的参数为0到多个Object类型的对象,或者是一个Object[]. public ...

  4. PHP 消息队列 详解

    前言:之前做过的一些项目中有时候会接触到消息队列,但是对消息队列并没有一个很清楚的认知,本篇文章将会详细分析和归纳一些笔记,以供后续学习. 一.消息对列概念 从本质上说消息对列就是一个队列结构的中间件 ...

  5. NFV-based QoS provision for Software Defined Optical Access and residential networks

    文章名称:NFV-based QoS provision for Software Defined Optical Access and residential networks 发表时间:2017 ...

  6. Rancher2.1安装部署

    基础环境配置 1.操作系统选择 Ubuntu 16.04(64位 Server版) Centos/RedHat Linux 7.5+(64位) 2.Docker版本选择 1.12.6 1.13.1 1 ...

  7. 适用于单片机的数据加密算法:xxtea

    转:https://www.cnblogs.com/LittleTiger/p/4384741.html 各位大侠在做数据传输时,有没有考虑过把数据加密起来进行传输,若在串口或者无线中把所要传的数据加 ...

  8. 【游戏开发】基于VS2017的OpenGL开发环境搭建

    一.简介 最近,马三买了两本有关于“计算机图形学”的书籍,准备在工作之余鼓捣鼓捣图形学和OpenGL编程,提升自己的价值(奔着学完能涨一波工资去的).俗话说得好,“工欲善其事,必先利其器”.想学习图形 ...

  9. MySql存储过程 CURSOR循环

    游标 游标(Cursor)是处理数据的一种方法,为了查看或者处理结果集中的数据,游标提供了在结果集中一次一行或者多行前进或向后浏览数据的能力. 使用步骤 声明一个游标: declare 游标名称 CU ...

  10. Web_0002:关于MongoDB的操作

    1,启动moggdb服务端 打开cmd命令窗口进入到MongoDB的安装目录bin文件下: 如:  cd /d F:\Program Files\mongodb\bin   执行如下命令(该命令窗口为 ...