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

您的位置:首頁技術(shù)文章
文章詳情頁

淺談JavaScript中this的指向更改

瀏覽:110日期:2023-10-19 18:20:05

JS中this指向的更改

JavaScript 中 this 的指向問題 前面已經(jīng)總結(jié)過,但在實際開中, 很多場景都需要改變 this 的指向。 現(xiàn)在我們討論更改 this 指向的問題。

call更改this指向

call 的使用語法:func.call(thisArg, arg1, arg2, ...)

call 方法需要一個指定的 this 值( this要指向的對象 )和一個或者多個參數(shù)。提供的 this 值會更改調(diào)用函數(shù)內(nèi)部的 this 指向。

// 使用 call 方法改變調(diào)用函數(shù)執(zhí)行上下文的 this 指向var animal = ’小貓’;var times = ’15小時’;function greet() { let str = this.animal + ’睡覺時間一般為:’ + this.times; console.log(str);}var dogObj = { animal: ’小狗’, times: ’8小時’};var pigObj = { animal: ’小豬’, times: ’13小時’}greet(); // 小貓睡覺時間一般為:15小時greet.call(dogObj); // 小狗睡覺時間一般為:8小時greet.call(pigObj); // 小豬睡覺時間一般為:13小時greet.call(); // 小貓睡覺時間一般為:15小時

當(dāng)直接調(diào)用函數(shù) greet 時,函數(shù) greet 內(nèi)部的 this 指向的是全局對象 Window。

函數(shù) greet 調(diào)用 call() 方法并傳遞對象 dogObj 時,函數(shù) greet 內(nèi)部的 this 就指向了對象 dogObj 。

函數(shù) greet 調(diào)用 call() 方法并傳遞對象 pigObj 時,函數(shù) greet 內(nèi)部的 this 就指向了對象 pigObj 。

call()不傳參的話,在嚴(yán)格模式下,this 的值將會是 undefined;否則將會指向全局對象 Window。

匿名函數(shù)調(diào)用call方法:

var books = [{ name: ’CSS選擇器’, price: 23}, { name: ’CSS世界’, price: 35}, { name: ’JavaScript語言設(shè)計’, price: 55}];for (var i = 0; i < books.length; i++) { (function (i) { // 這里this指向的是call綁定的數(shù)組的每一個元素對象 this.printf = function () { console.log(`${i} ${this.name}: ¥${this.price}`); } this.printf(); }).call(books[i], i);}// 打印結(jié)果如下:// 0 CSS選擇器: ¥23// 1 CSS世界: ¥35// 2 JavaScript語言設(shè)計: ¥55

call實現(xiàn)繼承:

// 實現(xiàn)兩個數(shù)相加的構(gòu)造函數(shù)function CalcA(){ this.add = function(a, b){ return a + b; }}// 實現(xiàn)兩個數(shù)相減的構(gòu)造函數(shù)function CalcS(){ this.sub = function(a, b){ return a - b; }}// 計算構(gòu)造函數(shù)function Calc(){ console.log(this); // Calc {} CalcA.call(this); CalcS.call(this); console.log(this); // Calc {add: ƒ, sub: ƒ}}var calc = new Calc();console.log(calc.add(2, 3)); // 5console.log(calc.sub(10, 1));// 9

構(gòu)造函數(shù) Calc 通過 call 方法使構(gòu)造函數(shù) CalcA、CalcS中的 this 指向了 Calc 自己,從而繼承了它們的屬性及方法。所以,構(gòu)造函數(shù) Calc 生成的實例對象也能夠訪問構(gòu)造函數(shù) CalcA、CalcS中的屬性及方法。

apply方法更改this指向

apply 的使用語法:func.apply(thisArg, [argsArray])

apply 的用法與 call 方法類似,只不過 call 方法接受的是參數(shù)列表,而 apply 方法接受的是一個數(shù)組或者類數(shù)組對象。上面的例子完全可以將 call 更換為 apply,只不過 apply 方法只能接受兩個參數(shù),而且第二個參數(shù)是一個數(shù)組或者類數(shù)組對象。

bind方法更改this指向

bind 的使用語法:func.bind(thisArg, arg1, arg2, ...)

bind 的參數(shù)與 call 相同,但是 bind 返回的是一個改變this指向后的函數(shù)實例。

var petalNum = 100;function Flower() { this.petalNum = Math.ceil(Math.random() * 10) + 1;}Flower.prototype.declare = function() { console.log(this); console.log(’this is a beautiful flower with ’ + this.petalNum + ’ petals’);}Flower.prototype.bloom = function() { console.log(this); // Flower {petalNum: 7} // 如果不綁定 this 就會指向 Window 全局對象 window.setTimeout(this.declare, 1000); // bind 綁定 this,指向 Flower 的原型對象 window.setTimeout(this.declare.bind(this), 2000);}var flower = new Flower();flower.bloom();

實例對象 flower 調(diào)用 bloom 方法后,bloom 內(nèi)的 this 指向構(gòu)造函數(shù)的原型對象。

1 秒后延遲函數(shù)調(diào)用構(gòu)造函數(shù)的 declare 方法, 此時執(zhí)行函數(shù) declare 中的 this 指向 Window 。打印的結(jié)果如下:

// Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}// this is a beautiful flower with 100 petals

2 秒后延遲函數(shù)調(diào)用構(gòu)造函數(shù)的 declare 方法,此時執(zhí)行函數(shù) declare 通過 bind 將 this(構(gòu)造函數(shù)的原型對象)綁定。打印的結(jié)果如下:

// 注意,此時petalNum的值時隨機取的。// Flower {petalNum: 7}// this is a beautiful flower with 7 petals

這里將 bind換 成 call,apply 會導(dǎo)致立即執(zhí)行,延遲效果會失效。

ES6的箭頭函數(shù)更改this指向

箭頭函數(shù)中的 this 是在定義函數(shù)的時候綁定,而不是在執(zhí)行函數(shù)的時候綁定。 所謂定義時候綁定,就是指 this 是繼承自父執(zhí)行上下文的 this。

var a = 1;var obj = { a: 2, f1: function(){ console.log(this.a) }, f2: () => { console.log(this.a) }}obj.f1(); // 2obj.f2(); // 1

obj.f1() 執(zhí)行后打印的是 2,這里好理解,obj 調(diào)用 f1 函數(shù),那么函數(shù)中的 this 就指向調(diào)用對象 obj。可以看出,這里 this 是在執(zhí)行函數(shù)的時候綁定的。

obj.f2() 執(zhí)行后打印的是 1。f2 是箭頭函數(shù),那么函數(shù)中的 this 是繼承自父執(zhí)行上下文的 this。這里箭頭函數(shù)的父級是對象 obj,obj 的執(zhí)行上下文就是全局對象 Window,那么箭頭函數(shù)中的 this 就指向了全局對象了。

再看一個例子:

var a = 11;function test() { this.a = 22; let b = () => { console.log(this.a) } b();}test(); // 22

按著定義的理解,應(yīng)該打印出 11 才對呀,因為箭頭函數(shù)父級的執(zhí)行上下文就是 Window 全局對象,此時打印的是全局對象的 a。

先不要著急,先慢慢分析,上面的分析是對的,箭頭函數(shù)的 this 就是指向 Window 對象。test 函數(shù)在全局環(huán)境下調(diào)用時其內(nèi)部的 this 就指向了全局 Window 對象,代碼中的 this.a = 22;就將全局中的 a 重新賦值了,所以箭頭函數(shù)在全局對象中找到的 a 值就是 22。我們可以在控制臺上輸入 window.a 查看全局對象中的 a 值,結(jié)果打印 22,所以我們就不難理解箭頭函數(shù)中打印的結(jié)果為什么是 22 了。如果將代碼中的 this.a = 22; 修改為 var a = 22;,那么箭頭函數(shù)中打印的結(jié)果就是 11 了。

箭頭函數(shù)會繼承外層函數(shù)調(diào)用的 this 綁定,這和 var self = this;的綁定機制一樣。箭頭函數(shù)中,this 指向固定化,箭頭函數(shù)根本就沒有自己的 this, 所以也就不能用作構(gòu)造函數(shù)使用了。

到此這篇關(guān)于淺談JavaScript中this的指向更改的文章就介紹到這了,更多相關(guān)JavaScript中this指向更改內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 砂尘试验箱_淋雨试验房_冰水冲击试验箱_IPX9K淋雨试验箱_广州岳信试验设备有限公司 | 除甲醛公司-甲醛检测-广西雅居环境科技有限公司 | U拓留学雅思一站式服务中心_留学申请_雅思托福培训 | 真空泵维修保养,普发,阿尔卡特,荏原,卡西亚玛,莱宝,爱德华干式螺杆真空泵维修-东莞比其尔真空机电设备有限公司 | 海日牌清洗剂-打造带电清洗剂、工业清洗剂等清洗剂国内一线品牌 海外整合营销-独立站营销-社交媒体运营_广州甲壳虫跨境网络服务 | 合肥礼品公司-合肥礼品定制-商务礼品定制公司-安徽柏榽商贸有限公司 | 杭州双螺杆挤出机-百科| 呼末二氧化碳|ETCO2模块采样管_气体干燥管_气体过滤器-湖南纳雄医疗器械有限公司 | 旗杆生产厂家_不锈钢锥形旗杆价格_铝合金电动旗杆-上海锥升金属科技有限公司 | 北京网络营销推广_百度SEO搜索引擎优化公司_网站排名优化_谷歌SEO - 北京卓立海创信息技术有限公司 | 广州二手电缆线回收,旧电缆回收,广州铜线回收-广东益福电缆线回收公司 | 医用空气消毒机-医用管路消毒机-工作服消毒柜-成都三康王 | 液压压力机,液压折弯机,液压剪板机,模锻液压机-鲁南新力机床有限公司 | 基本型顶空进样器-全自动热脱附解吸仪价格-AutoHS全模式-成都科林分析技术有限公司 | pos机办理,智能/扫码/二维码/微信支付宝pos机-北京万汇通宝商贸有限公司 | 深圳宣传片制作_产品视频制作_深圳3D动画制作公司_深圳短视频拍摄-深圳市西典映画传媒有限公司 | 便携式XPDM露点仪-在线式防爆露点仪-增强型烟气分析仪-约克仪器 冰雕-冰雪世界-大型冰雕展制作公司-赛北冰雕官网 | 玻璃钢板-玻璃钢防腐瓦-玻璃钢材料-广东壹诺 | 营养师网,营养师考试时间,报名入口—网站首页 | 昆明网络公司|云南网络公司|昆明网站建设公司|昆明网页设计|云南网站制作|新媒体运营公司|APP开发|小程序研发|尽在昆明奥远科技有限公司 | 家用净水器代理批发加盟_净水机招商代理_全屋净水器定制品牌_【劳伦斯官网】 | 立式硫化罐-劳保用品硫化罐-厂家直销-山东鑫泰鑫硫化罐厂家 | 米顿罗计量泵(科普)——韬铭机械 | 股指期货-期货开户-交易手续费佣金加1分-保证金低-期货公司排名靠前-万利信息开户 | 陕西安闸机-伸缩门-车牌识别-广告道闸——捷申达门业科技 | 车辆定位管理系统_汽车GPS系统_车载北斗系统 - 朗致物联 | 酒水灌装机-白酒灌装机-酒精果酒酱油醋灌装设备_青州惠联灌装机械 | 电磁流量计厂家_涡街流量计厂家_热式气体流量计-青天伟业仪器仪表有限公司 | 天津次氯酸钠酸钙溶液-天津氢氧化钠厂家-天津市辅仁化工有限公司 | 合肥抖音SEO网站优化-网站建设-网络推广营销公司-百度爱采购-安徽企匠科技 | 石家庄律师_石家庄刑事辩护律师_石家庄取保候审-河北万垚律师事务所 | 聚氨酯催化剂K15,延迟催化剂SA-1,叔胺延迟催化剂,DBU,二甲基哌嗪,催化剂TMR-2,-聚氨酯催化剂生产厂家 | 汽车水泵_汽车水泵厂家-瑞安市骏迪汽车配件有限公司 | 盘煤仪,盘料仪,盘点仪,堆料测量仪,便携式激光盘煤仪-中科航宇(北京)自动化工程技术有限公司 | 进口消泡剂-道康宁消泡剂-陶氏消泡剂-大洋消泡剂 | 珠海冷却塔降噪维修_冷却塔改造报价_凉水塔风机维修厂家- 广东康明节能空调有限公司 | 卓能JOINTLEAN端子连接器厂家-专业提供PCB接线端子|轨道式端子|重载连接器|欧式连接器等电气连接产品和服务 | SMN-1/SMN-A ABB抽屉开关柜触头夹紧力检测仪-SMN-B/SMN-C-上海徐吉 | 专业生产动态配料系统_饲料配料系统_化肥配料系统等配料系统-郑州鑫晟重工机械有限公司 | 北京印刷厂_北京印刷_北京印刷公司_北京印刷厂家_北京东爵盛世印刷有限公司 | 旅游规划_旅游策划_乡村旅游规划_景区规划设计_旅游规划设计公司-北京绿道联合旅游规划设计有限公司 |