JS this 分析

1. this指向分细

1.1 this

• this(咱们在js中研究的都是函数中的this)
• JS中的this表明的是当前行为执行的主体
• JS中的context表明的是当前行为执行的环境(区域)

//例如:A 在 饭店 吃 饺子
//执行主体就是A 上下文就是饭店 吃饺子就是行为
function 吃饺子() {
    console.log(this);
}
A.吃饺子()//输出this ---> 指A
(function() {
    A.吃饺子()//输出this --->指的仍是A
})
//this是谁 和函数在哪定义的和在哪执行的没有任何关系,就是指执行主体

1.2 如何区分this(目前只分析三种 后续会更新)

一、函数执行,首先看函数前面是否有'.',有的话前面是谁,this就是谁,没有的话this指window

function fn() { console.log(this) };
var obj = { fn: fn };
fn()//this--->指window
var obj = { fn: fn };
obj.fn()//this指obj
function sum() {
    fn()//this---->指window
}
sum();
var oo = {
    sum: function() {
        fn()//this --->指window
    }
}
oo.sum();

二、自执行函数中的this永远是指window

三、给元素的的某一个事件绑定方法,当事件触发的时候,执行对应的方法,this是指当前的元素

function fn() {
    console.log(this);
}
document.getElementById('#div1').onclick = fn;
//fn中的this --->指 '#div1'
document.getElementById('#div1').onclick = function() {
    //this --->指 '#div1';
    fn()//this --->指window
}

1.3 经典面试题分析

var num = 20;
var obj = { //对象只是堆内存,不是做用域,想访问变量num,必须是obj.num的形式
    num: 30,
    fn: (function(num) {
        this.num *= 3;
        num += 15;
        var num = 45;
        return function() {
            this.num *=4;
            num +=20;
            console.log(num)
        }
    })(num)
    //此处传参 是全局变量的num的值20 赋值给了自执行函数的形参 而不是obj的30 若是传入obj下的30 须要写成obj.num
}
var fn = obj.fn;
fn();//输出65
obj.fn();//85
console.log(window.num);//240
console.log(obj.num);//120

• 此题涉及主要知识点以下

a、函数内部返回的引用类型的值(函数/对象)被外部变量占用,此函数执行造成的做用域不销毁
b、给obj对象赋值的过程当中 自执行函数执行 并return 一个函数
c、自执行函数的this指向window
d、obj.fn fn中的this 指向obj
e、自执行函数在全局做用下并不进行预解释,可是函数内部执行会造成私有做用域,函数内部会进行预解释
f、若是要分析此题,画图是最容易的且最直观的
g、在函数执行的过程当中 必定要区分this.num 和私有变量num 这个是解答此题的关键
h、当前做用域中没有num变量 也没有参数传入 要往上级做用域查找num(如何找也是一个知识点)

• 附示意图

• 动力: 这是个人学习笔记,您能从中获得收获和进步,是我分享的动力,帮助别人,本身也会更快乐
• 指望: 不喜勿喷,谢谢合做！若是涉及版权请及时联系我,立刻删除!