javascript 关于赋值、浅拷贝、深拷贝的个人理解_javascript技巧

来源:脚本之家  责任编辑:小易  

var image=new Image(),imageData,imageDataDefault,userPhoto=$('#userPhoto')[0];这个语句相当于:var image=new Image();var imageData;var imageDataDefault;var userPhoto=$('#userPhoto')[0];在js中逗号隔开表示声明多个变量www.zgxue.com防采集请勿采集本网。

一、栈、堆、指针地址

for(var i=1;i;i+){ (r+\"i\").value=\"x;} 你试试;

  栈内存:个人理解是,基本数据类型和引用数据类型都会用到的一个空间,这个空间以key-value形式存在,value本身不可修改,只能赋值替换;

var crab=function(){}就相当于 function crab(){} 在方法内部如:var crab=function(){ say:function(){} }定义,相当于方法内的属性 调用的时候用 crab.say

  堆内存:堆,就是堆积,每一个被开辟的空间可以想象成一个空纸盒子,纸盒子所在的纸盒子堆就是 “堆” 。基本数据类型没有堆的概念。堆,只针对引用数据类型。存储方式应该是以对象(object)形式保存,对象内容包含key-value形式数据,value本身同样不可修改,只能赋值替换;

DOM学过吗?用DOM就很好做到哦 你把标签放在变量中无非是想通过一个事件后 然后显示其内容 JavaScript代码 function showhide() { obj=document.getElementById(\"show\");获得id为show的节点 obj.

  指针地址:针对引用数据类型在栈保存的值就是指针地址,地址指向保存在堆里面的对象。

ajax是异步的!2.异步回来的值如果赋值给请求外的变量,那么不要在请求完马上用!如果非要用可以考虑用个计时器setTimeout处理!3.在异步函数返回后,在返回函数中把值直接处理!

二、赋值

function callServer(){ var value;if(active){ value=document.getElementById(\"ID_A\");}else{ if(active=1){ value=document.getElementById(\"ID_B\");}} var room_cname=document.

  赋值分两个,一个是基本数据类型的赋值,一个是引用数据类型的赋值,基本数据类型赋的是 “值”,引用数据类型赋的是 “指针地址”。

1.基本数据类型赋值

//在栈内开辟一个空间,空间名称叫a,存放值1;var a = 1;//在栈内开辟一个空间,空间名字叫b。接着先把a的值1复制一份,然后存放进bvar b = a;

如下图:

2.引用数据类型赋值

//首先在栈开辟一个空间a存放指针地址,设指针地址为address1;同时会在堆里面开辟一个空间放置对象数据 2 var a = { no: 1, per: { name: "jack" }, per2: { name: "rose" }}//a赋值给b,此时b会在栈开辟一个空间b,用来放置address1,这个指针指向a所在堆的对象数据var b = a;//修改赋值后的值b,其实就是修改b的指针address1所指向的对象数据b.no = 1314;//修改b会影响原数据(所有层次的数据都会影响)//这个原数据其实不是原数据,因为a和b其实都是同一个数据//就像从中国去美国,可以从a地点(比如北京)或者b地点(比如上海)坐飞机去,但是到达的都是同一个地方(也就是对象数据)b.per.name = "王五";console.log(a, b)

上面代码打印如图:

 

对b的修改会影响a原本的值。对a的修改同样会同步b的值,对a的修改本人没有写出,你们可以自己试试,结果是一样的。

  针对上面的代码,引用数据类型赋值,如下图所示:

无论修改a对象还是b对象,都是在修改 “obj” 这个对象

三、浅拷贝

   引用数据类型的浅拷贝,代码如下:

//在栈开辟一个空间a,存放a的指针地址,设指针地址为address2a,同时在堆开辟一个空间,设这空间为A,存放a对象数据var a = { no: 1, per: { name: "jack", }, per2: { name: "rose" }}//在栈开辟一个空间b,存放b的指针地址,设指针地址为address2b,同时在堆开辟一个空间,设这空间为B,存放b对象数据var b = {};//对a的数据进行循环,判断如果有key,就把值赋到B对应的key位置//这个循环,遇到数据类型为基本数据类型,赋的是值;遇到引用数据类型,赋的是指针地址for(var p in a) { if(a.hasOwnProperty(p)) { b[p] = a[p] }}//对b的第一层修改b.no = 1314;b.per2 = [];//对b的第二层修改b.per.name = "王五";//浅拷贝,修改b后,第一层修改都不影响原数据,第二层以及以上层次的修改都影响原数据//当前没有写第三层及以上层次,可自行测试。console.log(a, b)

运行结果如图:

可以理解为,a原本的东西被完全复制了一份,放到了b里面,然会对b的操作,就只关b的事情了。a原本是什么值,现在依然是什么值,b的修改对a完全没有影响。

  最后,可用下图表示深拷贝:

四、深拷贝

  深拷贝,说白了,就是对浅拷贝的递归,也就是浅拷贝章节所述的,浅拷贝第一层已经被完全拷贝到新的地方,然后第二层以及以上层次,它们的属性值又将都会被拷贝到新的地方,最后就井水不犯河水了。

  代码如下:

//在栈开辟一个空间a,存放a的指针地址,设指针地址为address3a,同时在堆开辟一个空间,设这空间为space1a,存放a对象数据var a = { no: 2, per: { name: "jack" }, per2: { name: "rose" }}//用递归的方式对a进行拷贝属性和值,然后赋值给temp,然后return出去。此时不拷贝指针地址。function getDeep(obj) { var temp = Array.isArray(obj) ? [] : {}; for(var p in obj) { if(typeof obj[p] == "object") { temp[p] = getDeep(obj[p]) } else { temp[p] = obj[p] } } return temp;}//在栈开辟一个空间b,存放b的指针地址,设指针地址为address3b。同时b在堆开辟一个空间,设这空间为D,存放temp的对象数据var b = getDeep(a);//深拷贝后,修改b的值,不论修改属性值,还是整个值替换都不影响原数据ab.no = 1314;b.per = []b.per2 = { name:"王五"}console.log(a, b)

浅拷贝只拷贝了第一层,深拷贝是拷贝到最后一层。代码运行结果如图:

可以理解为,a原本的东西被完全复制了一份,放到了b里面,然会对b的操作,就只关b的事情了。a原本是什么值,现在依然是什么值,b的修改对a完全没有影响。

  最后,可用下图表示深拷贝:

五、总结

  1.赋值:

    基本数据类型就是类似a同学有一台电脑,b同学也想要,就也给b同学买了一台一模一样的电脑b,电脑a和电脑b各自怎么被操作都是a同学和b同学各自的事,电脑显示互不影响(数据结果);

    引用数据类型就是只有一台电脑,放在了电脑室,a同学和b同学各自从宿舍到电脑室操作电脑,都能影响电脑显示;在a同学和b同学的眼里,最后结果这台电脑显示什么,取决于最后一个操作电脑的同学(数据结果);

  2.浅拷贝:

    a同学有一台笔记本电脑并且配置了全套装备,触感舒爽的鼠标、按键响亮的机械键盘等。b同学没钱买电脑,但是又很想体验,所以先买了和a同学一样的鼠标键盘自个先看着爽。然后向a同学借电脑过来玩。a同学和b同学各自的鼠标键盘出了啥问题,两个人之间互不影响对方的使用。而对电脑的操作就是谁最后操作了电脑,电脑就是显示最后那个人的操作界面(数据修改)。

  3.深拷贝:

    a同学有笔记本+全套装备,b同学羡慕不已,自己让a同学照着买了一整套一模一样的给自己,但是他们各自的使用电脑情况,取决于他们各自的操作,电脑之间互不影响(数据结果)。

  以上纯属个人理解,有误勿喷请指出,谢谢!

this是JavaScript中功能最强大的关键字之一。不幸的是,如果你不知道它具体怎么工作,你将很难正确使用它。this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象。但是在javascript中,由于javascript的动态性(解释执行,当然也有简单的预编译过程),this的指向在运行时才确定。这个特性在给我们带来迷惑的同时也带来了编程上的自由和灵活,结合apply(call)方法,可以使JS变得异常强大。2.变化的this在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时)。当我们在页面中定义了函数doSomething()的时候,它的owner是页面,或者是JavaScript中的window对象(或global对象)。对于一个onclick属性,它为它所属的HTML元素所拥有,this应该指向该HTML元素。2.1在几种常见场景中this的变化函数示例function doSomething(){alert(this.navigator);appCodeNamethis.value="I am from the Object constructor;this.style.backgroundColor="#000000;}1.(A)作为普通函数直接调用时,this指向window对象.2.(B)作为控件事件触发时1)inline eventregistration 内联事件注册.将事件直接写在HTML代码中(onclick=”doSomething()”>),此时this指向 window对象。2)Traditional eventregistration 传统事件注册(DHTML方式).形如 element.onclick=doSomething;此时this指向element对象3)”doSomething(this)”>作为参数传递可以指向element3.(C)作为对象使用时this指向当前对象。形如:new doSomething();4.(D)使用apply或者call方法时,this指向所传递的对象。形如:var obj={};doSomething.apply(obj,newArray(”nothing”);thisàobj下面我来阐述如何在事件处理中来使用this,之后我会附加一些this相关的例子。Owner接下来文章中我们将要讨论的问题是:在函数doSomething()中this所指的是什么?Javascript代码function doSomething(){this.style.color='#cc0000';}function doSomething(){this.style.color='#cc0000';}在JavaScript中,this通常指向的是我们正在执行的函数本身(译者注:用owner代表this所指向的内容),或者是,指向该函数所属的对象。当我们在页面中定义了函数doSomething()的时候,它的owner是页面,或者是JavaScript中的window对象(或global对象)。对于一个onclick属性,它为它所属的HTML元素所拥有,this应该指向该HTML元素。这种“所有权”就是JavaScript中面向对象的一种方式。在Objects as associative arrays中可以查看一些更多的信息。如果我们在没有任何更多准备情况下执行doSomething(),this关键字会指向window,并且该函数试图改变window的style.color。因为window并没有style对象,这个函数将非常不幸的运行失败,并产生JavaScript错误。Copying因此如果我们想充分利用this,我们不得不注意使用this的函数应该被正确的HTML元素所拥有。换句话说,我们应该复制这个函数到我们的onclick属性。Traditionalevent registration会关心它。Javascript代码element.onclick=doSomething;element.onclick=doSomething;这个函数被完整复制到onclick属性(现在成为了函数)。因此如果这个eventhandler被执行,this将指向HTML元素,并且该元素的颜色得以改变。这种方法使得我们能够复制这个函数到多个event handler。每次this都将指向正确的HTML元素:这样你就可以最大限度使用this。每当执行该函数,this所指向的HTML元素都正确响应事件,这些HTML元素拥有doSomething()的一个拷贝。Referring然而,如果你使用inline event registration(内联事件注册)Javascript代码()">onclick="doSomething()">你将不能拷贝该函数!反而这种差异是非常关键的。onclick属性并不包含实际的函数,仅仅是一个函数调用。Javascript代码doSomething();doSomething();因此,它将声明“转到doSomething()并且执行它”。当我们到达doSomething(),this关键字又重新指向了全局的window对象,函数返回错误信息。The difference如果你想使用this来指向HTML元素响应的事件,你必须确保this关键字被写在onclick属性里。只有在这种情况下它才指向eventhandler所注册的HTML元素。Javascript代码element.onclick=doSomething;alert(element.onclick)element.onclick=doSomething;alert(element.onclick)你将得到Javascript代码function doSomething(){this.style.color='#cc0000';}function doSomething(){this.style.color='#cc0000';}正如你所见,this关键字被展现在onclick函数中,因此它指向HTML元素。但是如果执行Javascript代码()">alert(element.onclick)()">alert(element.onclick)你将得到Javascript代码function onclick(){doSomething()}functiononclick(){doSomething()}这仅仅是到doSomething()函数的一个引用。this关键字并没有出现在onclick函数中,因此它不指向HTML元素。例子-拷贝下面的例子中,this被写入onclick函数里:Javascript代码element.onclick=doSomethingelement.addEventListener('click',doSomething,false)element.onclick=function(){this.style.color='#cc0000';}onclick="this.sytle.color='#cc0000';element.onclick=doSomethingelement.addEventListener('click',doSomething,false)element.onclick=function(){this.style.color='#cc0000';}onclick="this.sytle.color='#cc0000';例子-引用下述情况中,this指向window:Javascript代码element.onclick=function(){doSomething()}element.attachEvent('onclick',doSomething)onclick="doSomething()">element.onclick=function(){doSomething()}element.attachEvent('onclick',doSomething)onclick="doSomething()">注意attachEvent()的出现。Microsoft event registrationmodel最主要的弊端是attachEvent()创建了一个指向函数的引用,而不是复制它。因此有时不可能知道哪个HTML正在处理该事件。组合使用当使用内联事件注册时,你可以将this发送到函数以至于可以正常使用:Javascript代码onclick="doSomething(this)">function doSomething(obj){this出现在event handler中并被发送到函数obj指向HTML元素,因此可以这样:obj.style.color'#cc0000';}内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • javascript二维数组和对象的深拷贝与浅拷贝实例分析
  • js中实现浅拷贝和深拷贝的代码详解
  • js使用json.parse(),json.stringify()实现对对象的深拷贝功能分析
  • js实现数组深拷贝的方法分析
  • js面试题中深拷贝的实现讲解
  • js面向对象之静态方法和静态属性实例分析
  • layui lay-verify form表单自定义验证规则详解
  • js验证邮箱格式是否正确的代码
  • es6实现图片切换特效代码
  • canvas时钟效果
  • 响应式表格之固定表头的简单实现
  • 用最通俗易懂的代码帮助新手理解javascript闭包 推荐
  • javascript设置和获取cookie的方法实例详解
  • jointjs javascript流程图绘制框架解析
  • js监听滚动和id自动定位滚动
  • JavaScript 关于this的赋值问题
  • 关于JAVASCRIPT赋值语句的问题
  • 关于javascript赋值问题。
  • javascript中怎么给函数的参数赋值呢
  • JavaScript的赋值问题
  • javascript 方法赋值对象
  • javascript赋值问题!!
  • javascript赋值问题
  • javascript取值及赋值的问题
  • 求助JavaScript中的一个赋值问题
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript二维数组和对象的深拷贝与浅拷贝实例分析js中实现浅拷贝和深拷贝的代码详解js使用json.parse(),json.stringify()实现对对象的深拷贝功能分析js实现数组深拷贝的方法分析js面试题中深拷贝的实现讲解js面向对象之静态方法和静态属性实例分析layui lay-verify form表单自定义验证规则详解js验证邮箱格式是否正确的代码es6实现图片切换特效代码canvas时钟效果响应式表格之固定表头的简单实现用最通俗易懂的代码帮助新手理解javascript闭包 推荐javascript设置和获取cookie的方法实例详解jointjs javascript流程图绘制框架解析js监听滚动和id自动定位滚动js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js删除数组里的某个元素方法js 将json字符串转换为json对象的javascript深入理解js闭包关于document.cookie的使用javascriptjavascript操作select元素和option的实例js操作html自定义属性的方法javascript中调用函数的4种方式代码实例详解js的六大数据类型深入了解javascript的逻辑运算符(与、或js异常处理的一个想法(sofish)bootstrap table方法之expandrow-collapswebpack 1.x升级过程中的踩坑总结大全js 调用本地exe的例子(支持ie内核的浏览器
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved