图解 | THIS的题目

文 / 景朝霞
来源公号 / 朝霞的光影笔记
ID / zhaoxiajingjing
图 / 自己画

❥❥❥❥点个赞，让我知道你来过~❥❥❥❥

---

0 / THIS

找THIS的方法：

1、给元素的某个事件绑定方法，当事件触发执行的时候，方法中的this就是当前操作的元素本身

2、当方法执行时，我们看方法前面是否有【点】：没有【点】,this=>window(严格模式：undefined)；有【点】，this=>点前面是谁

1 / 题目解析

本着以上两条原则来看题目

（1）请问打印几次，打印的内容是什么？

var name = 'The Window';
var obj = {
    name : 'zhaoxiajingjing',

    getNameFunc : function(){
        return function(){
            console.log(this.name);
        };
    }
};
var getName = obj.getNameFunc();

getName();
window.getName();
obj.getNameFunc()();

△ 找THIS

打印三次，打印结果是：

The Window

The Window

The Window

L13 getName()执行时，前面没有点，this=>window。打印"The Window"

L14 window.getName()执行时，前面有点，this=>点前面是window。打印"The Window"

L15 obj.getNameFunc()()打印"The Window"

△ 18.1_1题L15图解

∴

L15 obj.getNameFunc()()打印"The Window"

L13和L14的this都是window,在全局作用域中声明的所有变量和函数，都成为了window对象的属性。

getName === window.getName; //=>true

（2）请问打印几次，打印的内容是什么？

var name = 'The Window';
var obj = {
    name : 'zhaoxiajingjing',

    getNameFunc : function(){
        console.log(this);
    }
};
var getName = obj.getNameFunc;

getName();
window.getName();
obj.getNameFunc();

△ 找THIS

L11 getName()方法执行，前面没有点，this=>window。打印 window

L12 window.getName()方法执行，前面有点，this=>点前面是window。打印window

L13 obj.getNameFunc() 方法执行，前面有点，this=>点前面是obj。打印 obj

这里的 L9 代码：getName和obj.getNameFunc指向的是同一个堆地址。

（3）请问打印几次，打印的内容是什么？

var name = 'The window';
var Jing = {
    name:'zhaoxiajingjing',
    show:function (){
        console.log(this.name);
    },
    wait:(function (){
        this.show();
    })()
};

Jing.wait();

△ 找THIS。哈哈，这里挖了个坑，掉下去的请自行爬上来~

△ 18.2_3题图解

（4）Object.prototype.toString()

有点，this=>点前面是：Object.prototype

（5）Function.prototype.__proto__.toString()

有点，this=>点前面是：Function.prototype.__proto__

（6）Object.__proto__.__proto__.toString()

有点，this=>点前面是：``Object.proto.proto`

2 / 画画画图

这张图一定一定一定要自己多画几遍，这是最简版的原型和原型链的关系图。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aQPknY7y-1592890935122)(18.%E5%9B%BE%E8%A7%A3_THIS%E7%9A%84%E9%A2%98%E7%9B%AE.assets/18.3.png)]

△ 18.3 自己画几遍

3 / 预告

Math数学函数对象中常用的方法：

Math.max();
Math.min();
Math.ceil();
Math.floor();
Math.round();
Math.random();
....

△ Math数学函数常用的方法