电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

JavaScript中變量的存儲方式

瀏覽:18日期:2023-11-23 15:35:13
基本原理

前面文章提到過,在js中變量包括5中基本類型以及一個復雜數據類型Object,當然常用的函數和數組都是對象。對于基本類型和復雜類型,對應著兩種不同的存儲方式–棧存儲和堆存儲。為什么要實現兩種存儲方式的理由很簡單,就是基本類型一旦初始化則內存大小固定,訪問變量就是訪問變量的內存上實際的數據,稱之為按值訪問。而對象類型說不定什么時候就會增加自身的大小,內存大小不固定。比如動態添加對象的屬性、動態增加數組的大小等等都會使變量大小增加,無法在棧中維護。所以js就把對象類型的變量放到堆中,讓解釋器為其按需分配內存,而通過對象的引用指針對其進行訪問,因為對象在堆中的內存地址大小是固定的,因此可以將內存地址保存在棧內存的引用中。這種方式稱之為按引用訪問。 嗯,理解這一點很重要,在以后的編程中可以避免很多問題。 我們來看下如下的代碼:

var a = ’I am a string.’; //a,b,c的變量中保存的都是實際的值,因為他們是基本類型的變量var b = 1010;var c = false;var d = a; //d中保存著和“a值一樣的副本,它們互不影響”a = ’I am different from d’;alert(d); //輸出’I am a string’

以上代碼很好理解,就是說按值訪問的變量復制“你的就是你的,我的就是我的,咱們都有副本,互不影響。”而對于按引用訪問則稍有不同:

var e = {name : ’I am an object’,setName : function(name){this.name = name;}};var f = e; //賦值操作,實際上的結果是e,f都是指向那個對象的引用指針f.setName(’I am different from e,I am object f.’);alert(e.name); //對f進行操作,e的值也改變了!

對于引用類型的賦值,說白了,就是把那個對象的指針復制了過去,兩個指針指向的都是同一個實體對象,不存在副本,原本的對象還是只有一個!好。以上就是基本類型和引用類型的最大最根本的差別!我用一張圖來形象的表示下:

JavaScript中變量的存儲方式

*棧內存中存放基本類型變量,以及對象的指針;堆中存放對象實體

JavaScript中變量的存儲方式

*復制前后棧和堆中的情況

引用類型引發的問題1.使用原型模型創建對象的問題

我們都知道,在JavaScript OO(Object Oriented)中,使用原型模式創建對象的最大的好處就是可以讓對象實例共享原型(prototype)所包含的屬性和方法。這樣就避免了構造函數模式的缺陷,即每個對象都會有每個方法的副本,每個方法都會在每個實例上重新創建一遍,方法重用無意義的問題。

嗯,使用原型模式是為所有實例共享了方法,但是當原型中有引用類型值的屬性的時候,問題就來了:

var Person = function(){};Person.prototype = {constructor : Person,name : ’Hanzongze’,hobby : [’basketable’, ’swiming’, ’running’], //注意,這里包含著一個引用類型的屬性sayName : function(){alert(this.name);}};var person1 = new Person();var person2 = new Person();person1.hobby.push(’music’);alert(person2.hobby); //輸出為’basketable’, ’swiming’, ’running’,’music’alert(person1.hobby === person2.hobby); //true

由于hobby屬性是引用類型的值,所以由Person構造函數創建出來的實例的hobby屬性,都會指向這一個引用實體,實例對象間的屬性互相干擾。這不是我們想要的結果,為避免這類問題,解決方案就是組合使用構造函數模型和原型模型:

var Person = function(){this.name = ’Hanzongze’;this.hobby = [’basketable’, ’swiming’, ’running’]; //對引用類型的值使用構造函數模式};Person.prototype = {constructor : Person,sayName : function(){alert(this.name);}};var person1 = new Person();var person2 = new Person();person1.hobby.push(’music’);alert(person2.hobby); //輸出 ’basketable’, ’swiming’, ’running’,說明對person1的修改沒有影響到person2alert(person1.hobby === person2.hobby); //false2.原型繼承中的問題

這個問題與上一個的本質其實是一樣的,只不過是發生在了原型繼承的背景中。看一個原型鏈繼承的問題:

var Person = function(){this.name = ’Hanzongze’;this.hobby = [’basketable’, ’swiming’, ’running’];};Person.prototype = {constructor : Person,sayName : function(){alert(this.name);}};//子類型Studentfunction Student(){}Student.prototype = new Person(); //Student繼承了Personvar student1 = new Student();var student2 = new Student();student1.hobby.push(’music’); //對子類實例student1的引用屬性做了改動var student3 = new Student();alert(student2.hobby); //輸出’basketable’, ’swiming’, ’running’, ’music’alert(student3.hobby); //輸出’basketable’, ’swiming’, ’running’, ’music’

在這段代碼中,可以看到,子類Student繼承自父類Person。但由于使用的是原型繼承,也就是說父類的實例作為了子類的原型,那么實例中的引用類型屬性也就繼承在了子類的原型prototype中去了。則子類的實例共享該引用屬性,相互影響。

解決方案,那就是使用借用構造函數方案(但是也不是理想的方案,理想的方案是組合使用原型鏈和借用構造函數。涉及到了比較多的繼承模式,這里簡單描述,以后會寫一篇詳細的文章):

var Person = function(){this.name = ’Hanzongze’;this.hobby = [’basketable’, ’swiming’, ’running’];};Person.prototype = {constructor : Person,sayName : function(){alert(this.name);}};function Student(){//借用構造函數,繼承了PersonPerson.call(this);}var student1 = new Student();var student2 = new Student();student1.hobby.push(’music’);alert(student2.hobby); //輸出’basketable’, ’swiming’, ’running’, ’music’

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 东莞精密模具加工,精密连接器模具零件,自動機零件,冶工具加工-益久精密 | 进口试验机价格-进口生物材料试验机-西安卡夫曼测控技术有限公司 | 潍坊大集网-潍坊信息港-潍坊信息网| 鑫铭东办公家具一站式定制采购-深圳办公家具厂家直销 | 深圳美安可自动化设备有限公司,喷码机,定制喷码机,二维码喷码机,深圳喷码机,纸箱喷码机,东莞喷码机 UV喷码机,日期喷码机,鸡蛋喷码机,管芯喷码机,管内壁喷码机,喷码机厂家 | 纳米二氧化硅,白炭黑,阴离子乳化剂-臻丽拾科技 | 刺绳_刀片刺网_刺丝滚笼_不锈钢刺绳生产厂家_安平县浩荣金属丝网制品有限公司-安平县浩荣金属丝网制品有限公司 | 芝麻黑-芝麻黑石材厂家-永峰石业| 球磨机 选矿球磨机 棒磨机 浮选机 分级机 选矿设备厂家 | 蓝莓施肥机,智能施肥机,自动施肥机,水肥一体化项目,水肥一体机厂家,小型施肥机,圣大节水,滴灌施工方案,山东圣大节水科技有限公司官网17864474793 | 壹作文_中小学生优秀满分作文大全 | 苏州教学设备-化工教学设备-环境工程教学模型|同科教仪 | WTB5光栅尺-JIE WILL磁栅尺-B60数显表-常州中崴机电科技有限公司 | 蒜肠网-动漫,二次元,COSPLAY,漫展以及收藏型模型,手办,玩具的新媒体.(原变形金刚变迷TF圈) | IHDW_TOSOKU_NEMICON_EHDW系列电子手轮,HC1系列电子手轮-上海莆林电子设备有限公司 | 电表箱-浙江迈峰电力设备有限公司-电表箱专业制造商 | 沈阳庭院景观设计_私家花园_别墅庭院设计_阳台楼顶花园设计施工公司-【沈阳现代时园艺景观工程有限公司】 | 钢丝绳探伤仪-钢丝绳检测仪-钢丝绳探伤设备-洛阳泰斯特探伤技术有限公司 | 广州展台特装搭建商|特装展位设计搭建|展会特装搭建|特装展台制作设计|展览特装公司 | 过滤器_自清洗过滤器_气体过滤器_苏州华凯过滤技术有限公司 | 植筋胶-粘钢胶-碳纤维布-碳纤维板-环氧砂浆-加固材料生产厂家-上海巧力建筑科技有限公司 | 全自动过滤器_反冲洗过滤器_自清洗过滤器_量子除垢环_量子环除垢_量子除垢 - 安士睿(北京)过滤设备有限公司 | 岩棉切条机厂家_玻璃棉裁条机_水泥基保温板设备-廊坊鹏恒机械 | 济南品牌包装设计公司_济南VI标志设计公司_山东锐尚文化传播 | 广东佛电电器有限公司|防雷开关|故障电弧断路器|智能量测断路器 广东西屋电气有限公司-广东西屋电气有限公司 | 活性炭厂家-蜂窝活性炭-粉状/柱状/果壳/椰壳活性炭-大千净化-活性炭 | 等离子空气净化器_医用空气消毒机_空气净化消毒机_中央家用新风系统厂家_利安达官网 | 炭黑吸油计_测试仪,单颗粒子硬度仪_ASTM标准炭黑自销-上海贺纳斯仪器仪表有限公司(HITEC中国办事处) | 广东机电安装工程_中央空调工程_东莞装饰装修-广东粤标建设有限公司 | 北京律师咨询_知名专业北京律师事务所_免费法律咨询 | 美甲贴片-指甲贴片-穿戴美甲-假指甲厂家--薇丝黛拉 | PC阳光板-PC耐力板-阳光板雨棚-耐力板雨棚,厂家定制[优尼科板材] | (中山|佛山|江门)环氧地坪漆,停车场地板漆,车库地板漆,聚氨酯地板漆-中山永旺地坪漆厂家 | 电气控制系统集成商-PLC控制柜变频控制柜-非标自动化定制-电气控制柜成套-NIDEC CT变频器-威肯自动化控制 | 隔离变压器-伺服变压器--输入输出电抗器-深圳市德而沃电气有限公司 | 宝元数控系统|对刀仪厂家|东莞机器人控制系统|东莞安川伺服-【鑫天驰智能科技】 | 针焰试验仪,灼热丝试验仪,漏电起痕试验仪,水平垂直燃烧试验仪 - 苏州亚诺天下仪器有限公司 | 面粉仓_储酒罐_不锈钢储酒罐厂家-泰安鑫佳机械制造有限公司 | 重庆波纹管|重庆钢带管|重庆塑钢管|重庆联进管道有限公司 | 电子万能试验机_液压拉力试验机_冲击疲劳试验机_材料试验机厂家-济南众标仪器设备有限公司 | 飞行者联盟-飞机模拟机_无人机_低空经济_航空技术交流平台 |