1-1 this指针闭包作用域

作用域 & 上下文

作用域链 - 儿子能用爸爸的东西，调皮的儿子（var）可以去领居家（块级）拿东西

面试题：

    let a = 'global'console.log(a)function course() {let b = 'zhaowa'console.log(b)// 2.6 函数提升 => 函数提升 pk 变量提升session()function session() {let c = 'this'console.log(c)function teacher() {// 2.5 变量提升 - 提升到当前作用域的最初始 => 变量声明提升 & var// let d = 'yy'console.log(d)let d = 'yy'// var d = 'yy'// var d;// console.log(d)// d = 'yy'console.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)

1. 对于作用域链，我们可以直接通过创建态来定位
1. 手动取消全局，使用块级作用域 + 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())

1. 在执行函数时，去找到发起方
1. 当一次执行变成公共执行，指向全局

追问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）

1. call < = > apply 传参不同依次传入/数组传入
1. bind < = > call/apply 直接返回

追问3: 手写bind ｜ bind原理

原理或者手写，解题思路
1. 说明原理 - 写注释
1. 根据注释 - 补齐代码

    // 1. 需求：手写bind => bind存放位置（挂载） => Function.prototypeFunction.prototype.newBind = function() {// 2. bind是什么？=> 改变上下文 => 传入参数：newThis + args1～argsnconst _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 = 'xin'return function() {console.log(content)return content}}const envelop = mail()envelop()

1. 函数可以作为返回值进行内外传递信息的
1. 函数外部可以通过闭包的形式突破作用域的限制，来获取内部局部变量
闭包 - 模块通信的桥梁 + 函数 - 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)}}}