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. 安装python 3.7

    安装 libressl-2.9.2 (SSL) sudo apt-get install libffi-dev (_ctypes) ldconfig -v wget https://www.pytho ...

  2. (4)Flask项目模板渲染初体验

    一.准备静态资源 将项目使用到的静态资源拷贝到static目录 二.创建前台首页html 创建templates/home/home.html页面,内容包含导航和底部版权两部分,中间内容区域为模板标签 ...

  3. spark streaming 流式计算---跨batch连接池共享(JVM共享连接池)

    在流式计算过程中,难免会连接第三方存储平台(redis,mysql...).在操作过程中,大部分情况是在foreachPartition/mapPartition算子中做连接操作.每一个分区只需要连接 ...

  4. 必须要注意的 C++ 动态内存资源管理(五)——智能指针陷阱

    必须要注意的 C++ 动态内存资源管理(五)——智能指针陷阱 十三.小心使用智能指针.         在前面几节已经很详细了介绍了智能指针适用方式.看起来,似乎智能指针很强大,能够很方便很安全的管理 ...

  5. 使用sphinx为python注释生成docAPI文档

    sphinx简介 sphinx是一种基于Python的文档工具,它可以令人轻松的撰写出清晰且优美的文档,由Georg Brandl在BSD许可证下开发. 新版的Python3文档就是由sphinx生成 ...

  6. matlab学习笔记10_6 字符串与数值间的转换以及进制之间的转换

    一起来学matlab-matlab学习笔记10 10_6 字符串与数值间的转换以及进制之间的转换 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考书籍 <matlab 程序设计与综合 ...

  7. matlab学习笔记9 高级绘图命令_1 图形对象_根对象,轴对象,用户控制对象,用户菜单对象

    一起来学matlab-matlab学习笔记9 高级绘图命令_1 图形对象_根对象,轴对象,用户控制对象,用户菜单对象 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考书籍 <matl ...

  8. ios开发 需要注意的地方、注意事项

    /* 一.LaunchScreenLaunchScreen产生原因:代替之前的启动图片好处:1.可以展示更多的东西2.可以只需要出一个尺寸的图片. 启动图片的优先级启动图片 < LaunchSc ...

  9. filter和map内置函数

    filter filter()函数接收一个函数 f 和一个list,这个函数 f 的作用是对每个元素进行判断,返回 True或 False,filter()根据判断结果自动过滤掉不符合条件的元素,返回 ...

  10. 使用WinFrom + CefSharp 开发客户端程序

    今天使用CefSharp,加上本地资源文件嵌入了HTML.CSS.JS文件,做为Winform的UI:效果不错,漂亮可控,简简单单,半天时间搞定从开发到上线: 下面记录下相关的备忘: (窗口的效果) ...