网站前端开发得会什么软件,电商平台的设计,网站首页优化模板,企业综合管理系统作用域 上下文 作用域链 - 儿子能用爸爸的东西#xff0c;调皮的儿子#xff08;var#xff09;可以去领居家#xff08;块级#xff09;拿东西 面试题#xff1a; let a globalconsole.log(a)function course() {let b zhaowaconsole.log(b)// 2.6 函数提升 上下文 作用域链 - 儿子能用爸爸的东西调皮的儿子var可以去领居家块级拿东西 面试题 let a globalconsole.log(a)function course() {let b zhaowaconsole.log(b)// 2.6 函数提升 函数提升 pk 变量提升session()function session() {let c thisconsole.log(c)function teacher() {// 2.5 变量提升 - 提升到当前作用域的最初始 变量声明提升 var// let d yyconsole.log(d)let d yy// var d yy// var d;// console.log(d)// d yyconsole.log(test, b) // 1. 作用域向上查找}teacher()}}course()// *****************************// 3. 提升的优先级 - 函数提升优先级更高且不会被变量的声明所覆盖但是会被变量赋值之后覆盖console.log(zhaowa, zhaowa)function zhaowa() {this.course this}zhaowa course// *****************************// 4. 非函数所圈定的区域 块级作用域if (true) {let e 111var f 222console.log(e, f)}console.log(f, f)console.log(e, e)对于作用域链我们可以直接通过创建态来定位 手动取消全局使用块级作用域 let const 项目中模块化 工程化 隔离 this 上下文 context 我家门前有条河门前的河上有座桥河里有群鸭 我家门前有条河“这河”上面有座桥“这河”里面有群鸭 this是在执行时动态读取上下文所决定的 考察重点 - 各使用态中的指针指向 函数直接调用 this指向的是window 函数表达式、匿名函数、函数 function foo() {console.log(this)}foo()const foo1 () {console.log(this)}foo1()隐式绑定 - this指向的是调用的上一级 function fn() {console.log(this.a)}const obj {a: 1,fn}obj.fn fnobj.fn()面试 const foo {bar: 100,fn: function() {console.log(this.bar)console.log(this)}}// 取出let fn1 foo.fnfn1()// 追问1: 如何改变属性的指向const o1 {text: o1,fn: function() {// 直接使用上下文 - 领导直接分活console.log(o1fn_this, this)return this.text}}const o2 {text: o2,fn: function() {// 呼叫隔壁组leader帮助执行 - 部门协作return o1.fn()}}const o3 {text: o3,fn: function() {// 直接借人 - 接口人只读let zhaowafn o1.fnreturn zhaowafn()}}console.log(o1fn, o1.fn())console.log(o2fn, o2.fn())console.log(o3fn, o3.fn())在执行函数时去找到发起方 当一次执行变成公共执行指向全局 追问2: 就是要把console.log(‘o2fn’, o2.fn())的结果是o2 // 1. 人为干涉 - bind / call / applyo1.fn.call(o2)// 2. 不许人为干涉const o1 {text: o1,fn: function() {// 直接使用上下文 - 领导直接分活console.log(o1fn_this, this)return this.text}}const o2 {text: o2,fn: o1.fn}console.log(o2fn, o2.fn())显式绑定bind apply call call apply 传参不同 依次传入/数组传入 bind call/apply 直接返回 追问3: 手写bind bind原理 原理或者手写解题思路 说明原理 - 写注释 根据注释 - 补齐代码 // 1. 需求手写bind bind存放位置挂载 Function.prototypeFunction.prototype.newBind function() {// 2. bind是什么 改变上下文 传入参数newThis args1argsnconst _this thisconst args Array.prototype.slice.call(arguments)const newThis args.shift()// 3. bind要什么 返回可执行函数 上下文被改变了的原函数原函数参数不变 返回函数包裹的applyreturn function() {return _this.newApply(newThis, args)}}// 4. apply即可 newThisFunction.prototype.newApply function(context) {// 函数监测if (typeof this ! funtion) {throw new Error(type error)}context context || window// 临时挂载context.fn thislet result arguments[1]? context.fn(...arguments[1]): context.fn()delete context.fnreturn result}聊完上下文的人为自定义 作用域如何去突破 闭包 function mail() {let content xinreturn function() {console.log(content)return content}}const envelop mail()envelop()函数可以作为返回值进行内外传递信息的 函数外部可以通过闭包的形式突破作用域的限制来获取内部局部变量 闭包 - 模块通信的桥梁 函数 - js模块化的雏形 js模块化 实现私有变量 function createStack() {return {items: [],push(item) {this.item.push(item)}}}const stack {items: [],push: function() {}}function createStackAdv() {const items []return {push(item) {items.push(item)}get() {return fn(items)}}}