JavaScript回顾学习：“如何确定this”的3条经验（屡试不爽）

本文链接：https://blog.csdn.net/sunct/article/details/81010092

今天偶然看到一个视频教程，视频中讲授如何确定this的三条方法（讲师经过多年总结出来的经验），让我茅塞顿开，解开了心中一直的痛点，很是受用。下面我特意记录下，以备用和学习。

3条方法如下：

1、元素绑定事件，方法中的this是当前操作的元素

2、方法名前面是否有点，有点，点前面是谁，this就是谁，如果没有，this是window（严格模式下是undefined）

3、构造函数执行，方法中的this是当前类的一个实例

先从一个面试题开始，以下面试题将会输出什么值：

var fullName = 'language';
        var obj = {
            fullName: 'javascript',
            prop: {
                getFullName: function() {
                    return this.fullName;
                }
            }
        };

        console.log(obj.prop.getFullName());  //undefined
        var test = obj.prop.getFullName;
        console.log(test());     //language

一开始拿到这个题目，我都晕菜了，以为都是输出的javascript。

上述3个方法中第2条方法验证上述面试题：

（1）obj.prop.getFullName() ： getFullName()方法前面有点，点前面是obj.prop，this就是obj.prop，则this.fullName 等价于obj.prop.fullName，所以obj.prop.fullName 是undefined，结果是undefined

（2）test()：test()方法前面没有点，非严格模式下，this就是window，则this.fullName等价于window.fullName，所以window.fullName是language，结果是language

再来一道面试题：

var name = 'window';
        var Tom = {
            name: 'Tom',
            show: function () {
                console.log(this.name);
            },
            wait: function () {
                var fun = this.show;
                fun();
            }
        };

        Tom.wait();

还是套用第2种方法，结果是window，在浏览器中验证后果然是window。

分析过程：

（1）wait()方法前面有点，点前面是Tom，this就是Tom，那么this.show等价于Tom.show，var fun = this.show;等价于var fun = Tom.show; fun就是指向Tom.show方法

（2） fun()方法前面没有点，this就是window，那么this.name等价于window.name，所以window.name值就是window

这3个方法方便又受用，严重收藏！！

视频教程地址： https://www.bilibili.com/video/av24383268/?p=9