为了转生而点技能-JavaScript,day16(this指向练习

本篇是纪录上课的习题,并尝试拆解的过程,如有误恳请大大鞭策!!

第一题:

https://ithelp.ithome.com.tw/upload/images/20211206/20143762umQvcx1S4o.png

解:

auntie.callName():为物件属性callName的值,该值跑函式,此时this指向所属物件的值,取auntie的属性name之值。

auntie.watch.callName():为watch物件下的属性callName之值,该值跑函式,此时this指向所属物件的值,取watc的属性name之值。



第二题:

https://ithelp.ithome.com.tw/upload/images/20211206/20143762qYvEvf0Nea.png

解:

callName3:最终指向是auntie.callName(),结果如上题。
callName4:auntie.watch.callName,因为无()号,代表非执行函式,所以直接把function callName()呈现出来。



第三题:

https://ithelp.ithome.com.tw/upload/images/20211206/20143762SWIUSsDfWh.png

解:

a.myname():为物件属性myname的值,该值跑函式,此时this指向所属物件的值,取a物件的属性name之值小王。



第四题:

https://ithelp.ithome.com.tw/upload/images/20211206/20143762HWB4XkfhzK.png

解:

obj.x():指向物件里面属性x的值,并执行函式,依照this会指向所属物件,但是本题物件并没有name属性,只有x及y,故出现undefined。



第五题:

https://ithelp.ithome.com.tw/upload/images/20211206/20143762K9BtUbhVrE.png

解:

第一步a:此时的a仅为储存函式,所以a值为该函式的值所赋予,所以this的执行环境还是在所属物件内。
第二步:第一个console.log(this.name),指向所属物件,得小虎。
第三部:在setTimeout函式里,属於callback function也就是简易呼叫,所以this指向全域的name,也就是小明。



第六题:

https://ithelp.ithome.com.tw/upload/images/20211206/20143762hTsA66Mw1t.png

解:

是因为function callName(name)只能输入一个参数,所以undefined带入参数(name),然後找到全域阿婆;小明因为参数只有一个没带入,console.log(name)找不到,所以是undefined。



第七题:

https://ithelp.ithome.com.tw/upload/images/20211206/20143762HHkta7wB3O.png

解:

下半段为立即函式,是将另一个函式赋予并没有执行,而实际执行以 a()为主;在全域执行,所以this指向全域。



第八题:

https://ithelp.ithome.com.tw/upload/images/20211206/20143762c60jBv8A2w.png

解:

a():因为bind可以指定this的方向,本题指到obj,所以呼叫物件的name属性之值,小美。



第九题:

        var myName = '全域';
        var obj = {
            myName: '物件内',
            fn: function (a, b, c) {
                return this.myName + ',' + a + ',' + b + ',' + c
            }
        };
        var fnA = obj.fn;
        var fnb = fnA.bind(null, 0);
        console.log(fnb(1, 2));

解:

fnb:fnA.bind已经绑定传入的值为null,不在严谨模式下,null值会使this指向全域的myName;後面的参数则依序0,1,2分别带入a, b, c。




<<:  强制存取控制环境中强制执行完整性

>>:  【Vue】this = undefined 可能是箭头函式搞的鬼

Day 26 - WooCommerce: 定义虚拟帐号付款闸道

永丰金流收款 API 在目前我们从文件看到的,支援信用卡付款及虚拟帐号 ATM 付款。信用卡付款方式...

Webpack 笔记三(webpack loader dev server)

dev server 利用 source-map 可以更好的 debug 如果我在程序码里面加入一个...

Day 27. SSR 常见问题(2)

遍历 HTML tag 这时候你会需要使用Vue Server Test Utils暴露的另一个方法...

[Day 29] 会员登入及登出(一)

我们先做登入的画面, 在app/Http/Controllers/UserAuthControlle...

Proxmox VE 安装虚拟机:Windows 10 (一)

当我们把几个必备的基础前置作业处理完成後,可以来开始准备建立第一个虚拟机客体,正式体验 Proxm...