免费网站app源码,同步wordpress到微信,邢台12345网站,定制衣服app软件哪个好说明#xff1a;该文属于 大前端全栈架构白宝书专栏#xff0c;目前阶段免费#xff0c;如需要项目实战或者是体系化资源#xff0c;文末名片加V#xff01;作者#xff1a;哈哥撩编程#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作#xff0c;目前在公司… 说明该文属于 大前端全栈架构白宝书专栏目前阶段免费如需要项目实战或者是体系化资源文末名片加V作者哈哥撩编程十余年工作经验, 从事过全栈研发、产品经理等工作目前在公司担任研发部门CTO。荣誉2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。 白宝书系列 启示录 - 攻城狮的自我修养 Python全栈白宝书 ChatGPT实践指南白宝书 产品思维训练白宝书 全域运营实战白宝书 大前端全栈架构白宝书 文章目录 ⭐认识上下文⭐上下文规则上下文规则1上下文规则2上下文规则3上下文规则4上下文规则5上下文规则6 ⭐认识上下文
小时候学习做阅读理解时老师经常会强调注意上下文。比如有一个句子这是一个好习惯我们应该坚持。如果不结合上文的意思根本不知道“这”指的是什么。如果结合上文比如随手关灯这是一个好习惯我们应该坚持。我们就知道此时的“这”指的是“随手关灯”那么整个句子的语义就好理解了。
在函数中也经常需要结合上下文来编写和理解代码。 函数中可以使用this表示函数的上下文 与中文中的“这”类似函数中的this具体指代什么必须通过调用函数时的“前言后语”来判断 下面看一个例子
第一种调用方式对象打点调用自己的方法
var xiaomumu {name: 小沐沐,age: 2,sex: 男,hobbies: [秋千, 滑梯],sayHello: function () {console.log(Hello, 我是 this.name 我今年 this.age 岁了);}
};
xiaomumu.sayHello(); // Hello, 我是小沐沐我今年2岁了第二种调用方式对象的方法被赋值给一个全局变量全局变量加圆括号调用
var xiaomumu {name: 小沐沐,age: 2,sex: 男,hobbies: [秋千, 滑梯],sayHello: function () {console.log(Hello, 我是 this.name 我今年 this.age 岁了);}
};var sayHello xiaomumu.sayHello; // 将这个属性存入了一个全局变量变量的名称可以和属性名相同方便理解
sayHello(); //Hello, 我是undefined我今年undefined岁了这两种调用方式this指代的对象分别是
第一种对象打点调用方式函数中的this指代这个打点的对象第二种圆括号直接调用函数函数中的this指代window对象
其实可以这么理解第二种中因为全局变量都是window的属性相当于用window.sayHello()的方式调用了这个函数。所以this指代的就是window对象。
所以我们一定要记住只有函数被调用时我们才能知道this指代的是什么函数的上下文由函数的调用方式决定同一个函数用不同的形式调用它则函数的上下文不同
⭐上下文规则
我们知道不同的调用方式函数的上下文就不同那么我们怎么去判断函数的上下文呢这就要学习各种不同的函数调用规则。
上下文规则1 规则1对象打点调用它的方法函数则函数的上下文是这个打点的对象 下面看几个案例练习一下
题目一 下面代码的运行结果是什么
function fn() {console.log(this.a this.b);
}
var obj {a: 11,b: 22,fn: fn
};obj.fn();运行结果33
题目二 下面代码的运行结果是什么
var obj1 {a: 1,b: 2,fn: function () {console.log(this.a this.b);}
};var obj2 {a: 3,b: 4,fn: obj1.fn
};obj2.fn();运行结果 7
一定要记住谁打点调用函数函数中的this指代的就是谁
题目三 下面代码的运行结果是什么
function outer() {var a 11;var b 22;return {a: 33,b: 44,fn: function () {console.log(this.a this.b);}};
}outer().fn();运行结果77
上面的代码中outer()返回了一个对象相当于还是一个对象打点调用了函数所以适用于对象打点调用函数函数的上下文就是这个对象的规则。
题目四 下面代码的运行结果是什么
function fun() {console.log(this.a this.b);
}var obj {a: 1,b: 2,c: [{a: 3,b: 4,c: fun}]
};var a 5;
obj.c[0].c();运行结果7
上面的代码中最终调用函数的是obj.c[0]这个对象所以函数中的this指代的就是obj.c[0]
上下文规则2 规则2圆括号直接调用函数则函数的上下文是window对象 题目一 下面代码的运行结果是什么
var obj1 {a: 1,b: 2,fn: function () {console.log(this.a this.b);}
};
var a 3;
var b 4;var fn obj1.fn;
fn();运行结果7
题目二 下面代码的运行结果是什么
function fun() {return this.a this.b;
}
var a 1;
var b 2;
var obj {a: 3,b: fun(),fun: fun
};
var result obj.fun();
console.log(result);运行结果6题目分析如下 这是一道非常正规的面试题大家一定要学会分析其中的代码逻辑
上下文规则3 规则3数组类数组对象枚举出函数进行调用上下文是这个数组类数组对象 数组[下标]() 类数组对象所有键名为自然数序列从0开始且有length属性的对象 arguments对象是最常见的类数组对象它是函数的实参列表 题目一 下面代码的运行结果是什么
var arr [A, B, C, function () {console.log(this[0]);
}];arr[3]();运行结果 “A”
上面的代码适用规则3this指代的就是arr这个数组
题目二 下面代码的运行结果是什么
function fun() {arguments[3]();
}fun(A, B, C, function () {console.log(this[1]);
});运行结果“B”。我们可以打印一下arguments可以看到arguments是一个类数组对象里面其实就是fun()函数被调用时传入的实参 上下文规则4 规则4IIFE中的函数上下文是window对象。IIFE在以前的文中提到过是立即可执行函数。 (function (){ //立即可执行函数 })() 题目一 下面代码的运行结果是什么
var a 1;
var obj {a: 2,fun: (function () {var a this.a;return function () {console.log(a this.a);}})()
};
obj.fun();运行结果3。这是一个大厂的面试题题目分析如下 上下文规则5 规则5定时器、延时器调用函数上下文是window对象 setInterval(函数时间) setTimeout(函数时间) 题目一 下面代码的运行结果是什么
var obj {a: 1,b: 2,fun: function () {console.log(this.a this.b);}
};
var a 3;
var b 4;setTimeout(obj.fun, 2000);运行结果7。因为用延时器调用的函数适用规则5this指代的就是window对象即this.a和this.b的值分别是34
题目二 下面代码的运行结果是什么
var obj {a: 1,b: 2,fun: function () {console.log(this.a this.b);}
};
var a 3;
var b 4;setTimeout(function () {obj.fun(); //适用规则1
}, 2000);运行结果3。这里要注意延时器不是直接调用obj里的fun函数而是一个匿名函数这个匿名函数里又调用了obj.fun()所以此时的this应指代的是obj这个对象即this.a和this.b的值分别是12
上下文规则6 规则6事件处理函数的上下文是绑定事件的DOM元素 DOM元素.onclick function() { }; 题目一 点击哪个盒子哪个盒子就变红要求使用同一个事件处理函数实现不能用事件委托
html langen
headstylediv {width: 200px;height: 200px;float: left;border: 1px solid #000;margin-right: 10px;}/style
/head
bodydiv idbox1/divdiv idbox2/divdiv idbox3/divscriptfunction setColorToRed(o) {this.style.backgroundColor red;}var box1 document.getElementById(box1);var box2 document.getElementById(box2);var box3 document.getElementById(box3);box1.onclick function () {setColorToRed(box1);}box1.onclick setColorToRed;box2.onclick setColorToRed;box3.onclick setColorToRed;/script
/body
/html运行结果点击哪个盒子哪个盒子就变红。这里的this指代的就是绑定事件的DOM元素注意区分this和e.target的不同
题目二 点击哪个盒子哪个盒子在2000毫秒后就变红要求使用同一个事件处理函数实现不能用事件委托
题目分析这个题目其实就是上个题目一个延时器但是需要注意的是加上延时器后this指代的可能会不一样所以需要使用一个程序猿非常常用的技术备份上下文
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 200px;height: 200px;float: left;border: 1px solid #000;margin-right: 10px;}/style
/head
bodydiv idbox1/divdiv idbox2/divdiv idbox3/divscriptfunction setColorToRed(o) {//备份上下文var self this; // 通常使用self来备份上下文也有使用that或_this的这个技术非常的常用setTimeout(() {self.style.backgroundColor red;}, 2000);}var box1 document.getElementById(box1);var box2 document.getElementById(box2);var box3 document.getElementById(box3);box1.onclick function () {setColorToRed(box1);}box1.onclick setColorToRed;box2.onclick setColorToRed;box3.onclick setColorToRed;/script
/body
/html注意程序员在书写this的时候通常会看一下这个this到底指代什么需不需要备份
