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

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

淺談JavaScript中this的指向更改

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

JS中this指向的更改

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

call更改this指向

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

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

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

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

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

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

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

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

var books = [{ name: ’CSS選擇器’, price: 23}, { name: ’CSS世界’, price: 35}, { name: ’JavaScript語言設(shè)計(jì)’, price: 55}];for (var i = 0; i < books.length; i++) { (function (i) { // 這里this指向的是call綁定的數(shù)組的每一個(gè)元素對象 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è)計(jì): ¥55

call實(shí)現(xiàn)繼承:

// 實(shí)現(xiàn)兩個(gè)數(shù)相加的構(gòu)造函數(shù)function CalcA(){ this.add = function(a, b){ return a + b; }}// 實(shí)現(xiàn)兩個(gè)數(shù)相減的構(gòu)造函數(shù)function CalcS(){ this.sub = function(a, b){ return a - b; }}// 計(jì)算構(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 生成的實(shí)例對象也能夠訪問構(gòu)造函數(shù) CalcA、CalcS中的屬性及方法。

apply方法更改this指向

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

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

bind方法更改this指向

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

bind 的參數(shù)與 call 相同,但是 bind 返回的是一個(gè)改變this指向后的函數(shù)實(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 就會(huì)指向 Window 全局對象 window.setTimeout(this.declare, 1000); // bind 綁定 this,指向 Flower 的原型對象 window.setTimeout(this.declare.bind(this), 2000);}var flower = new Flower();flower.bloom();

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

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

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

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

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

箭頭函數(shù)中的 this 是在定義函數(shù)的時(shí)候綁定,而不是在執(zhí)行函數(shù)的時(shí)候綁定。 所謂定義時(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ù)的時(shí)候綁定的。

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

再看一個(gè)例子:

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

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

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

箭頭函數(shù)會(huì)繼承外層函數(shù)調(diào)用的 this 綁定,這和 var self = this;的綁定機(jī)制一樣。箭頭函數(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)文章:
主站蜘蛛池模板: 广州展览制作工厂—[优简]直营展台制作工厂_展会搭建资质齐全 | 衢州装饰公司|装潢公司|办公楼装修|排屋装修|别墅装修-衢州佳盛装饰 | 走心机厂家,数控走心机-台州博城智能科技有限公司 | 缠绕机|缠绕膜包装机|缠绕包装机-上海晏陵智能设备有限公司 | 超声波分散机-均质机-萃取仪-超声波涂料分散设备-杭州精浩 | 微量水分测定仪_厂家_卡尔费休微量水分测定仪-淄博库仑 | 曙光腾达官网-天津脚手架租赁-木板架出租-移动门式脚手架租赁「免费搭设」 | 重庆网站建设,重庆网站设计,重庆网站制作,重庆seo,重庆做网站,重庆seo,重庆公众号运营,重庆小程序开发 | 防火板_饰面耐火板价格、厂家_品牌认准格林雅 | LED灯杆屏_LED广告机_户外LED广告机_智慧灯杆_智慧路灯-太龙智显科技(深圳)有限公司 | 台式核磁共振仪,玻璃软化点测定仪,旋转高温粘度计,测温锥和测温块-上海麟文仪器 | 土壤有机碳消解器-石油|表层油类分析采水器-青岛溯源环保设备有限公司 | 东莞精密模具加工,精密连接器模具零件,自動機零件,冶工具加工-益久精密 | 消防泵-XBD单级卧式/立式消防泵-上海塑泉泵阀(集团)有限公司 | 天一线缆邯郸有限公司_煤矿用电缆厂家_矿用光缆厂家_矿用控制电缆_矿用通信电缆-天一线缆邯郸有限公司 | 缓蚀除垢剂_循环水阻垢剂_反渗透锅炉阻垢剂_有机硫化物-郑州威大水处理材料有限公司 | 企业VI设计_LOGO设计公司_品牌商标设计_【北京美研】 | 浙江筋膜枪-按摩仪厂家-制造商-肩颈按摩仪哪家好-温州市合喜电子科技有限公司 | 深圳富泰鑫五金_五金冲压件加工_五金配件加工_精密零件加工厂 | 石磨面粉机|石磨面粉机械|石磨面粉机组|石磨面粉成套设备-河南成立粮油机械有限公司 | 宜兴紫砂壶知识分享 - 宜兴壶人 医用空气消毒机-医用管路消毒机-工作服消毒柜-成都三康王 | 股指期货-期货开户-交易手续费佣金加1分-保证金低-期货公司排名靠前-万利信息开户 | 传动滚筒_厂家-淄博海恒机械制造厂| 密度电子天平-内校-外校电子天平-沈阳龙腾电子有限公司 | 螺钉式热电偶_便携式温度传感器_压簧式热电偶|无锡联泰仪表有限公司|首页 | 定时排水阀/排气阀-仪表三通旋塞阀-直角式脉冲电磁阀-永嘉良科阀门有限公司 | 天一线缆邯郸有限公司_煤矿用电缆厂家_矿用光缆厂家_矿用控制电缆_矿用通信电缆-天一线缆邯郸有限公司 | 锡膏喷印机-全自动涂覆机厂家-全自动点胶机-视觉点胶机-深圳市博明智控科技有限公司 | 避光流动池-带盖荧光比色皿-生化流动比色皿-宜兴市晶科光学仪器 东莞爱加真空科技有限公司-进口真空镀膜机|真空镀膜设备|Polycold维修厂家 | 河北中仪伟创试验仪器有限公司是专业生产沥青,土工,水泥,混凝土等试验仪器的厂家,咨询电话:13373070969 | 杭州网络公司_百度SEO优化-外贸网络推广_抖音小程序开发-杭州乐软科技有限公司 | 山东限矩型液力偶合器_液力耦合器易熔塞厂家-淄博市汇川源机械厂 | 淄博不锈钢无缝管,淄博不锈钢管-鑫门物资有限公司 | SMC-SMC电磁阀-日本SMC气缸-SMC气动元件展示网 | 依维柯自动挡房车,自行式国产改装房车,小型房车价格,中国十大房车品牌_南京拓锐斯特房车 - 南京拓锐斯特房车 | Jaeaiot捷易科技-英伟达AI显卡模组/GPU整机服务器供应商 | 上海盐水喷雾试验机_两厢式冷热冲击试验箱-巨怡环试 | 红外光谱仪维修_二手红外光谱仪_红外压片机_红外附件-天津博精仪器 | 风信子发稿-专注为企业提供全球新闻稿发布服务 | 刺绳_刀片刺网_刺丝滚笼_不锈钢刺绳生产厂家_安平县浩荣金属丝网制品有限公司-安平县浩荣金属丝网制品有限公司 | 机房监控|动环监控|动力环境监控系统方案产品定制厂家 - 迈世OMARA |