JS this 分析

11次阅读

共计 1490 个字符，预计需要花费 4 分钟才能阅读完成。

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(目前只分析三种后续会更新)
1、函数执行, 首先看函数前面是否有 ’.’, 有的话前面是谁,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();
2、自执行函数中的 this 永远是指 window
3、给元素的的某一个事件绑定方法, 当事件触发的时候, 执行对应的方法,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 指向 obje、自执行函数在全局作用下并不进行预解释, 但是函数内部执行会形成私有作用域, 函数内部会进行预解释 f、如果要分析此题, 画图是最容易的且最直观的 g、在函数执行的过程中一定要区分 this.num 和私有变量 num 这个是解答此题的关键 h、当前作用域中没有 num 变量也没有参数传入要往上级作用域查找 num(如何找也是一个知识点)
附示意图