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

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

JavaScript 的 this 原理

瀏覽:86日期:2023-11-10 17:06:34
一、問題的由來

學懂 JavaScript 語言,一個標志就是理解下面兩種寫法,可能有不一樣的結果。

var obj = { foo: function () {}};var foo = obj.foo;// 寫法一obj.foo()// 寫法二foo()

上面代碼中,雖然obj.foo和foo指向同一個函數(shù),但是執(zhí)行結果可能不一樣。請看下面的例子。

var obj = { foo: function () { console.log(this.bar) }, bar: 1};var foo = obj.foo;var bar = 2;obj.foo() // 1foo() // 2

這種差異的原因,就在于函數(shù)體內部使用了this關鍵字。很多教科書會告訴你,this指的是函數(shù)運行時所在的環(huán)境。對于obj.foo()來說,foo運行在obj環(huán)境,所以this指向obj;對于foo()來說,foo運行在全局環(huán)境,所以this指向全局環(huán)境。所以,兩者的運行結果不一樣。

這種解釋沒錯,但是教科書往往不告訴你,為什么會這樣?也就是說,函數(shù)的運行環(huán)境到底是怎么決定的?舉例來說,為什么obj.foo()就是在obj環(huán)境執(zhí)行,而一旦var foo = obj.foo,foo()就變成在全局環(huán)境執(zhí)行?

本文就來解釋 JavaScript 這樣處理的原理。理解了這一點,你就會徹底理解this的作用。

二、內存的數(shù)據(jù)結構

JavaScript 語言之所以有this的設計,跟內存里面的數(shù)據(jù)結構有關系。

var obj = { foo: 5 };

上面的代碼將一個對象賦值給變量obj。JavaScript 引擎會先在內存里面,生成一個對象{ foo: 5 },然后把這個對象的內存地址賦值給變量obj。

JavaScript 的 this 原理

也就是說,變量obj是一個地址(reference)。后面如果要讀取obj.foo,引擎先從obj拿到內存地址,然后再從該地址讀出原始的對象,返回它的foo屬性。

原始的對象以字典結構保存,每一個屬性名都對應一個屬性描述對象。舉例來說,上面例子的foo屬性,實際上是以下面的形式保存的。

JavaScript 的 this 原理

{ foo: { [[value]]: 5 [[writable]]: true [[enumerable]]: true [[configurable]]: true }}

注意,foo屬性的值保存在屬性描述對象的value屬性里面。

三、函數(shù)

這樣的結構是很清晰的,問題在于屬性的值可能是一個函數(shù)。

var obj = { foo: function () {} };

這時,引擎會將函數(shù)單獨保存在內存中,然后再將函數(shù)的地址賦值給foo屬性的value屬性。

JavaScript 的 this 原理

{ foo: { [[value]]: 函數(shù)的地址 ... }}

由于函數(shù)是一個單獨的值,所以它可以在不同的環(huán)境(上下文)執(zhí)行。

var f = function () {};var obj = { f: f };// 單獨執(zhí)行f()// obj 環(huán)境執(zhí)行obj.f()四、環(huán)境變量

JavaScript 允許在函數(shù)體內部,引用當前環(huán)境的其他變量。

var f = function () { console.log(x);};

上面代碼中,函數(shù)體里面使用了變量x。該變量由運行環(huán)境提供。

現(xiàn)在問題就來了,由于函數(shù)可以在不同的運行環(huán)境執(zhí)行,所以需要有一種機制,能夠在函數(shù)體內部獲得當前的運行環(huán)境(context)。所以,this就出現(xiàn)了,它的設計目的就是在函數(shù)體內部,指代函數(shù)當前的運行環(huán)境。

var f = function () { console.log(this.x);}

上面代碼中,函數(shù)體里面的this.x就是指當前運行環(huán)境的x。

var f = function () { console.log(this.x);}var x = 1;var obj = { f: f, x: 2,};// 單獨執(zhí)行f() // 1// obj 環(huán)境執(zhí)行obj.f() // 2

上面代碼中,函數(shù)f在全局環(huán)境執(zhí)行,this.x指向全局環(huán)境的x。

JavaScript 的 this 原理

在obj環(huán)境執(zhí)行,this.x指向obj.x。

JavaScript 的 this 原理

回到本文開頭提出的問題,obj.foo()是通過obj找到foo,所以就是在obj環(huán)境執(zhí)行。一旦var foo = obj.foo,變量foo就直接指向函數(shù)本身,所以foo()就變成在全局環(huán)境執(zhí)行。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 环境模拟实验室_液体-气体控温机_气体控温箱_无锡双润冷却科技有限公司 | LED灯杆屏_LED广告机_户外LED广告机_智慧灯杆_智慧路灯-太龙智显科技(深圳)有限公司 | 袋式过滤器,自清洗过滤器,保安过滤器,篮式过滤器,气体过滤器,全自动过滤器,反冲洗过滤器,管道过滤器,无锡驰业环保科技有限公司 | 电杆荷载挠度测试仪-电杆荷载位移-管桩测试仪-北京绿野创能机电设备有限公司 | 照相馆预约系统,微信公众号摄影门店系统,影楼管理软件-盟百网络 | 排烟防火阀-消防排烟风机-正压送风口-厂家-价格-哪家好-德州鑫港旺通风设备有限公司 | 钢格栅板_钢格板网_格栅板-做专业的热镀锌钢格栅板厂家-安平县迎瑞丝网制造有限公司 | elisa试剂盒价格-酶联免疫试剂盒-猪elisa试剂盒-上海恒远生物科技有限公司 | 太阳能发电系统-太阳能逆变器,控制器-河北沐天太阳能科技首页 | 江苏全风,高压风机,全风环保风机,全风环形高压风机,防爆高压风机厂家-江苏全风环保科技有限公司(官网) | 「阿尔法设计官网」工业设计_产品设计_产品外观设计 深圳工业设计公司 | 多功能三相相位伏安表-变压器短路阻抗测试仪-上海妙定电气 | 广州监控安装公司_远程监控_安防弱电工程_无线wifi覆盖_泉威安防科技 | 预制围墙_工程预制围墙_天津市瑞通建筑材料有限公司 | 智能气瓶柜(大型气瓶储存柜)百科 | 全国国际化学校_国际高中招生_一站式升学择校服务-国际学校网 | 卫生纸复卷机|抽纸机|卫生纸加工设备|做卫生纸机器|小型卫生纸加工需要什么设备|卫生纸机器设备多少钱一台|许昌恒源纸品机械有限公司 | 搜木网 - 木业全产业链交易平台,免费搜货、低价买货! | 塑料异型材_PVC异型材_封边条生产厂家_PC灯罩_防撞扶手_医院扶手价格_东莞市怡美塑胶制品有限公司 | 玻璃钢板-玻璃钢防腐瓦-玻璃钢材料-广东壹诺 | 欧景装饰设计工程有限公司-无锡欧景装饰官网 | 电伴热系统施工_仪表电伴热保温箱厂家_沃安电伴热管缆工业技术(济南)有限公司 | 无菌实验室规划装修设计-一体化实验室承包-北京洁净净化工程建设施工-北京航天科恩实验室装备工程技术有限公司 | 金联宇电缆|广东金联宇电缆厂家_广东金联宇电缆实业有限公司 | 视频教程导航网_视频教程之家_视频教程大全_最新视频教程分享发布平台 | 铁盒_铁罐_马口铁盒_马口铁罐_铁盒生产厂家-广州博新制罐 | 锂电池生产厂家-电动自行车航模无人机锂电池定制-世豹新能源 | 优秀的临床医学知识库,临床知识库,医疗知识库,满足电子病历四级要求,免费试用 | TwistDx恒温扩增-RAA等温-Jackson抗体-默瑞(上海)生物科技有限公司 | 纸张环压仪-纸张平滑度仪-杭州纸邦自动化技术有限公司 | 智慧旅游_智慧景区_微景通-智慧旅游景区解决方案提供商 | 广州二手电缆线回收,旧电缆回收,广州铜线回收-广东益福电缆线回收公司 | 磁力链接搜索神器_BT磁力狗_CILIMAO磁力猫_高效磁力搜索引擎2024 | 济南铝方通-济南铝方通价格-济南方通厂家-山东鲁方通建材有限公司 | TPM咨询,精益生产管理,5S,6S现场管理培训_华谋咨询公司 | 杭州翻译公司_驾照翻译_专业人工翻译-杭州以琳翻译有限公司官网 组织研磨机-高通量组织研磨仪-实验室多样品组织研磨机-东方天净 | 专注氟塑料泵_衬氟泵_磁力泵_卧龙泵阀_化工泵专业品牌 - 梭川泵阀 | 口信网(kousing.com) - 行业资讯_行业展会_行业培训_行业资料 | 工业洗衣机_工业洗涤设备_上海力净工业洗衣机厂家-洗涤设备首页 bkzzy在职研究生网 - 在职研究生招生信息咨询平台 | 成都竞价托管_抖音代运营_网站建设_成都SEM外包-成都智网创联网络科技有限公司 | 耐火砖厂家,异形耐火砖-山东瑞耐耐火材料厂 |