图解-THIS的题目

40次阅读

共计 1848 个字符,预计需要花费 5 分钟才能阅读完成。

文 / 景朝霞
来源公号 / 朝霞的光影笔记
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 代码:getNameobj.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 数学函数常用的方法

正文完
 0