理解 | 如何判断THIS(一、二)

Pink
文 / 景朝霞
来源公号 / 朝霞的光影笔记
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也是对象数据类型

函数也是对象数据类型的

ID:zhaoxiajingjing

阅读 573

朝霞的光影笔记
公号首发:朝霞的光影笔记 ID:zhaoxiajingjing →→→→ 多学一点知识,就少写一行代码

没有什么是20遍解决不了的,如果有~那就再写20遍

263 声望
13 粉丝
0 条评论
你知道吗?

没有什么是20遍解决不了的,如果有~那就再写20遍

263 声望
13 粉丝
文章目录
宣传栏