Hello,今天和大家分享下JS中的一个基本概念:函数参数传递!

先来看看一个DEMO

 var str="hello world";

 function func(s){
s="hello javascript";
} func(str); console.log(str);

请问这里控制台最终将输出什么?

答案是:hello world.

也就是说func函数并没有修改全局作用域中的str值。这个例子比较好理解,JS的函数参数传递是按值传递,只不过这里的值是指栈区的值。

这里函数将str的值传递给函数内部变量s,然后修改了内部变量s的值,显然这和全部作用域中的str并没有什么关系,所以str仍然是初始值。

除非这里我们显示调用并修改全局作用域下的变量:

function func(s){
window.str="hello javascript";
}

这样全局作用域下的str变量才会被修改。

好了,再来看第二个DEMO:

 var obj={
attr:'obj attr value'
}; function func(o){
o.attr="new attr value!";
} func(obj); console.log(obj.attr);

这一次我们将函数传递的参数换成了一个对象,输出结果又是什么呢?

答案是:new attr value! 也就是说我们的obj这个全部作用域的对象被修改了,为什么?

原因还是第一个DEMO加粗标注的那句话:JS的函数参数传递是按值传递,只不过这里的值是指栈区的值。

对于对象来说,传递的值是对象在堆区的地址。(关于JS变量存储原理欢迎查看:http://www.cnblogs.com/souvenir/p/4969399.html

回到DEMO2,第9行调用func函数传递过去就是obj对象的堆区地址,然后这个地址又复制给了func内部作用域的o对象,

也就是说,o与obj都指向了同一个对象,所以修改o属性的以后,再次访问obj,当然也发生了变化!

OK,这个没有问题以后,我们再来看另一个DEMO:

 var obj={
attr:'obj attr value'
}; function func(obj){
obj={attr:'new attr value!'};
} func(obj); console.log(obj.attr);

这个DEMO是在第二个DEMO的基础上进行修改得到的,在函数内部我们不是修改obj对象的属性,而是修改obj整个对象。

可能大家会受到上面第二个DEMO的影响,认为这里的全部变量obj仍然被修改了。

答案是,obj并未被修改,输出的值仍然是:obj attr value。

眼尖的同学会发现这个DEMO其实和第一个DEMO并没有什么不同,只不过一个传递的是普通类型,一个传递的对象。

对。这里只是将一个新的对象的引用地址赋值给了obj,但是千万别忘了,obj这是func的局部变量,和全部变量obj也没有半毛钱关系。

当然,除非我们这么修改的话,情况就不一样了。

function func(obj){
window.obj={attr:'new attr value!'};
}

总结:

  JS的函数参数传递是按值传递。

  JS的函数参数传递是按值传递。

  JS的函数参数传递是按值传递。

  (嗯,重要的事情要说三遍)

JavaScript函数参数传递的更多相关文章

  1. JavaScript 函数参数传递到底是值传递还是引用传递

    tips:这篇文章是听了四脚猫的js课程后查的,深入的理解可以参看两篇博客: JavaScript数据类型--值类型和引用类型 JavaScript数据操作--原始值和引用值的操作本质 在传统的观念里 ...

  2. JavaScript函数的概念

    函数是这样的一段代码,它只定义一次,但可能被执行或调用任意多次. JavaScript函数是参数化的:函数的定义会包含形参,这些参数在函数的整体中像局部变量一样工作.函数调用时会为形参提供实参的值.除 ...

  3. 深入理解javascript函数系列第二篇——函数参数

    × 目录 [1]arguments [2]内部属性 [3]函数重载[4]参数传递 前面的话 javascript函数的参数与大多数其他语言的函数的参数有所不同.函数不介意传递进来多少个参数,也不在乎传 ...

  4. HTML 学习笔记 JavaScript (函数)

    函数是由事件驱动的或者当他被调用时执行的可重复使用的代码块 实例 <!DOCTYPE html> <html> <head> <script> func ...

  5. 第八章:Javascript函数

    函数是这样一段代码,它只定义一次,但可能被执行或调用任意次.你可能从诸如子例程(subroutine)或者过程(procedure)这些名字里对函数概念有所了解. javascript函数是参数化的: ...

  6. JavaScript 函数基础

    1. JavaScript 函数基础 1. 定义方法 2. 函数的调用方法 3. 函数方法 apply : 将函数作为数组的方法来调用 将参数以数组形式传递给该方法 call   : 将函数作为对象的 ...

  7. 深入理解javascript函数进阶系列第一篇——高阶函数

    前面的话 前面的函数系列中介绍了函数的基础用法.从本文开始,将介绍javascript函数进阶系列,本文将详细介绍高阶函数 定义 高阶函数(higher-order function)指操作函数的函数 ...

  8. JavaScript函数、闭包、原型、面向对象

    JavaScript函数.闭包.原型.面向对象 断言 单元测试框架的核心是断言方法,通常叫assert(). 该方法通常接收一个值--需要断言的值,以及一个表示该断言目的的描述. 如果该值执行的结果为 ...

  9. javaScript系列 [01]-javaScript函数基础

    [01]-javaScript函数基础 1.1 函数的创建和结构 函数的定义:函数是JavaScript的基础模块单元,包含一组语句,用于代码复用.信息隐蔽和组合调用. 函数的创建:在javaScri ...

随机推荐

  1. 【转】谈谈servlet、spring、struts

    今年我一直在思考web开发里的前后端分离的问题,到了现在也颇有点心得了,随着这个问题的深入,再加以现在公司很多web项目的控制层的技术框架由struts2迁移到springMVC,我突然有了一个新的疑 ...

  2. sysfile20191122

    ass_s_ccp_ft:-108; ass_s_ccp_all:-108; ass_tag_ft:-105; ass_tag_all:-105; rept_port:9000; Q_value:0. ...

  3. MD5(2)

    /************************************************ MD5 算法的Java Bean @author:Topcat Tuppin Last Modifi ...

  4. 获取进程 pid 以及命令参数

    方法一: wmic process where name="node.exe" get ProcessId,CommandLine 方法二: tlist -c

  5. 全基因组关联分析(GWAS)的计算原理

    前言 关于全基因组关联分析(GWAS)原理的资料,网上有很多. 这也是我写了这么多GWAS的软件教程,却从来没有写过GWAS计算原理的原因. 恰巧之前微博上某位小可爱提问能否写一下GWAS的计算原理. ...

  6. [LeetCode] 100. Same Tree 相同树

    Given two binary trees, write a function to check if they are the same or not. Two binary trees are ...

  7. .Net Core 2.0发布到 CentOS

    上一篇 在CentOS 7中 使用 Nginx 反代 .Net Core 中创建的项目是创建的默认项目,现在我们来将我们开发的项目发布到 CentOs 中,反代还是使用 Nginx 1.创建一个 .N ...

  8. consul集群搭建以及ACL配置

    由于时间匆忙,要是有什么地方没有写对的,请大佬指正,谢谢.文章有点水,大佬勿喷这篇博客不回去深度的讲解consul中的一些知识,主要分享的我在使用的时候的一些操作和遇见的问题以及解决办法.当然有些东西 ...

  9. Deploy != Release(第一部分):部署与发布的区别,以及为什么这很重要

    原文地址:http://ju.outofmemory.cn/entry/351873 翻译自: Deploy != Release (Part 1): The difference between d ...

  10. spring mvc 参数类型转换

    实现方式以字符串转Date为例说明: 全局配置 第一种:实现 Converter 接口 实现类: public class StringToDateConveter implements Conver ...