理解 | 如何判断THIS（一、二）

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

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

---

0 / THIS对象

this对象是函数执行的主体（不是上下文），即：是谁把函数执行的，那么执行主体就是谁。

谁触发这个函数执行/调用了，谁就是this。

函数定义：开辟一个堆内存，把函数体的内容以字符串的格式存储进去。

函数执行：开辟一个全新的栈内存/私有作用域/执行上下文，供函数体中的代码自上而下执行。

谁指使函数去开辟栈内存了，谁就是this。

每个函数调用时都会自动取得两个特殊的变量：this和arguments，挂在自己的活动对象AO上。

1 / 找呀找呀找THIS

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

（2）当方法执行时，我们看方法前面是否有【点】，没有【点】this是window（严格模式下：undefined）；有【点】点前面的是谁this就是谁

（1）元素点击事件

<button id="btn" >
    点我
</button>

let btn = document.getElementById('btn');
btn.onclick = function (){
    console.log(this);
    this.style.color = 'pink';
};

△元素的点击事件，找THIS：BTN

元素的点击事件绑定方法，当事件触发执行时，方法中的THIS就是当前操作的元素本身。

document.body.onclick = function (){
    // 这里THIS是谁
    console.log(this);
    this.style.backgroundColor = 'pink';
};

△元素的点击事件，找THIS：body

给元素BODY添加点击事件，在触发事件时，点击的是BODY，方法中的THIS为当前操作的元素本身。

（2）找【点】

var name = 'The Window';

function fn(){
    console.log(this);
}
var obj = {
    name : 'zhaoxiajingjing',
    fn : fn
};

fn();
window.fn();
obj.fn();

△找"点"

在方法调用/执行时，找方法名字前面的"点"：

（1）没有点，THIS是window（严格模式下是undefined）

（2）有点，点前面是谁THIS就是谁

L11 执行fn()，此时不是严格模式，THIS=>window

L12 执行window.fn()，此时方法前面有点，THIS=>window

L13 执行obj.fn()，此时方法前面有点，THIS=>obj

自执行匿名函数

(function (){console.log(this);})();

自执行匿名函数，定义完就被执行了，他前面没有点，THIS=>window（严格模式：undefined）

2 / 快问快答

（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()();

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

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

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

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

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

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

Jing.wait();

（4）Object.prototype.toString()

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

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

△17.1Function和Object的原型和原型链关系图

3 / 预告

函数也是对象。

函数也是对象。

函数也是对象。

（1）每一个函数数据类型的值都天生自带一个属性：prototype，这个属性的属性值是一个对象。用来存储实例公用的属性和方法的。

普通函数

类（自定义类和内置类）

（2）在prototype这个对象上，天生自带一个属性：constructor，这个属性存储的是当前函数本身

Function.prototype.constructor === Function //=> true
Object.prototype.constructor === Object //=> true

（3）每一个对象数据类型的值，天生自带一个属性：_proto_，这个属性指向所属类的原型。

普通对象、数组、正则、Math、日期、类数组....

实例

函数的原型prototype也是对象数据类型

函数也是对象数据类型的