问题:"this"的含义
答:this指代当前作用域下的对象
问题:箭头函数的作用域是如何查找的
答:向外层作用域中,一层一层的查找,直到作用域中有this的定义。
而普通的function()函数中,this只指代当前作用域对象,如果没有对象定义,则指代全局对象,也就是window
普通的function()函数
const obj = {};
obj.info = "objInfo";
obj.bbb = function bbb() {
console.log("obj.bbb()中的this→",this);
// function(){this}
};
obj.bbb();
此处的 “this” 打印 obj{}
为了更直观的理解,笔者做了实验,下面,开始套娃
须知:笔者懒得敲html,直接在node环境下测试的。有可能与浏览器结果有出入
function()函数 套 function()函数
const obj = {};
obj.info = "objInfo";
obj.bbb = function bbb() {
function ccc() {
console.log("obj.bbb(ccc())中的this→",this);
};ccc();
// function(){function(this)}
};
obj.bbb();
此处的 “this” 打印 window
function()函数 套 function()函数 套 function()函数
const obj = {};
obj.info = "objInfo";
obj.bbb = function bbb() {
function ddd() {
function eee() {
console.log("obj.bbb(ddd(eee()))中的this→",this);
};eee()
};ddd();
// function(){function(){funution(){this}}}
};
obj.bbb();
此处的 “this” 打印 window
箭头函数
function()函数 套 箭头函数
const obj = {};
obj.info = "objInfo";
obj.bbb = function bbb() {
let arrayA = () => {
console.log("obj.bbb(arrayA())中的this→",this);
};arrayA();
// function(){()=>{this}}
};
obj.bbb();
此处的 “this” 打印 obj{}
function()函数 套 箭头函数 套 箭头函数
const obj = {};
obj.info = "objInfo";
obj.bbb = function bbb() {
let arrayB = () => {
let arrayC = () => {
console.log("obj.bbb(arrayB(arrayC()))中的this→",this);
};arrayC();
};arrayB();
// function(){()=>{()=>{this}}}
};
obj.bbb();
此处的 “this” 打印 obj{}
重点!!!综合!!!!
function()函数 套 function()函数 套 箭头函数
const obj = {};
obj.info = "objInfo";
obj.bbb = function bbb() {
function fff() {
let arrayD = () => {
console.log("obj.bbb(fff(arrayD()))中的this→",this);
};arrayD();
};fff();
// function(){function(){()=>{this}}}
};
obj.bbb();
此处的 “this” 打印 window
function()函数 套 箭头函数 套 function()函数
const obj = {};
obj.info = "objInfo";
obj.bbb = function bbb() {
function fff() {
let arrayD = () => {
console.log("obj.bbb(fff(arrayD()))中的this→",this);
};arrayD();
};fff();
// function(){function(){()=>{this}}}
};
obj.bbb();
此处的 “this” 打印 window