理解-如何判断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 也是对象数据类型

函数也是对象数据类型的