作用域、this指针、上下文

作用域和作用域链

作用域：全局作用域、函数作用域、块级作用域

• 单个函数内作用域封闭。
• let 不支持提升，var 声明提升。
• 作用域向上查找，向下传递。
• 对于作用域链，可以在创建态时确定。
• 同一作用域内，变量、函数重名时，函数声明提升优先级高与变量声明提升，但变量赋值优先级高于函数，函数提升后，值会被变量覆盖。
  
  疑问：为什么会同时打印函数和‘Yee’，是浏览器打印变量值的依次变化还是什么，暂时没有弄清楚。

this指向、执行上下文context

this指向： 是一个指针型变量，动态指向当前函数的运行环境，永远指向其所在函数的真实调用者，如果没有调用者，则指向全局对象window，即在执行时动态读取上下文决定的，而非创建时。
执行上下文： 简言之就是JavaScript代码所处的环境的抽象概念，当代码动态运行时，是处于执行上下文中运行的。

考察重点： 各使用态的指针指向
隐式绑定： this指向调用堆栈的上一级，对象、数组等引用关系逻辑。

/*** 对象引用 ***/
function fn() {
	console.log('隐式绑定', this.a)
}
const obj = {
	a: 1,
	fn 
}
obj.fn = fn;
obj.fn();   // obj


/*** 函数嵌套 ***/
const foo = {
	years: 10,
	fn: function() {
		console.log(this.years);
		console.log(this);
	}
}
// 取出赋值
let fn1 = foo.fn;
// 独立执行
fn1();   // undefined  window

// 改变属性指向
const o1 = {
	text: 'o1',
	fn: function(){
        // 直接使用上下文
        console.log('o1fn_this', this);
        return this.text;
   	}
}
    
const o2 = {
   text: 'o2',
   fn: function() {
		// 呼叫上级执行
		return o1.fn();
	}
}

const o3 = {
	text: 'o3',
	fn: function() {
	    // 直接内部构造
	    let fn = o1.fn;
	    return fn();
    }
} 
console.log('o1fn', o1.fn()); 
// o1fn_this {text: 'o1', fn: ƒ}
// o1fn o1
console.log('o2fn', o2.fn());
// o1fn_this {text: 'o1', fn: ƒ}
// o2fn o1
console.log('o3fn', o3.fn());
// o1fn_this Window
// o3fn undefined

显式绑定： 函数表达式、bind 、apply 、 call
注： call、apply、bind是在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法。三者最大的不同在于：bind返回一个绑定上下文的函数，其余两者直接执行函数

1. 函数表达式

function foo() {
	console.log(this)
}
foo()  // window

2. apply()：第一个参数为新的this指向，第二个参数是数组，只接收两个参数。模拟apply方法实现如下：

// 模拟Symbol属性
function newSymbol(obj) {
	var unique_pro = 'xx' + Math.random()
	if(obj.hasOwnProperty(unique_pro)) {
		newSymbol(obj)   // 如果存在该属性，递归调用，直到没有
	} else {
		return unique_pro
	}
}
// 封装apply
Function.prototype.newApply = function(context) {
	// 暂存新的this指向
	var context = context || window
	var args = arguments[1]  // 获取调用函数的实参
	var fn = newSymbol(context)  // 获取唯一的函数名
	// 挂载方法
	context[fn] = this
	if(args == void 0) {
		return context[fn]()
	}
	// 使用ES3方法获得函数运行结果
	var fnStr = 'context[fn]('
	for(let i = 0; i < args.length; i++) {
		fnStr += i === args.length - 1 ? args[i] + ')' : args[i] + ','
	}
	var result = eval(fnStr)
	/**  使用ES6方法得到结果
		let result = context[fn](...args)
	**/
	// 删除方法
	delete context.fn
	// 返回函数值
	return result
}

3. call()：第一个参数为新的this指向，第二个到后续若干个参数为调用函数的传参，依次传入，可以只传递一个参数。模拟call方法实现如下：

Function.prototype.newCall = function (context) {
	// context: 新的this指向对象   this：调用call方法的对象
	var context = context || window
	// 将将要运行的方法挂载到新的this指向中
	context.fn = this
	// 获取函数传参
	var args = []
	for(let i = 1; i < argumrnts.length; i++) {
		args.push(arguments[i])
	}
	// 运行函数结果赋值
	var result = args.length === 0 ? context.fn() : context.fn(...args)
	// 删除新的this指向中的方法，恢复成原本的结构
	delete context.fn
	// 返回结果
	return result
}

4. bind(): 是ES5新增的方法，第一个参数为新的this指向，第二个到后续若干个参数为调用函数的传参，依次传入。bind方法创建一个新函数称之为绑定函数，当新函数被调用时，它的this值传递给bind()的第一个参数，它的参数是bind()的其他参数和其原本的参数，bind()返回的绑定函数也能使用new操作符创建对象：相当于把原函数当成构造器，提供的this值被忽略，同时调用时的参数被提供给模拟函数。模拟bind方法实现如下：

Function.prototype.newBind = function(context) {
	// 暂存目标函数的this指向
	var _this = this
	// 获取调用函数的入参
	var args = Array.prototype.slice.newCall(arguments, 1)
	var F = function () {}
	F.prototype = this.prototype
	var fnBond = function () {
		var innerArgs = Array.prototype.slice.newCall(argumens)
		var finalArgs = args.concat(innerArgs)
		return _this.newApply(
			this instanceof Fnop ? this : context|| this，   // this指向new出的obj， 如果传递的上下文为空，则将fnBond的调用者作为this
			// 通过bind传递的参数和调用时传递的参数进行合并，作为最终的参数传递
			finalArgs)
		)
	}
	// 将目标函数的原型对象拷贝到新的函数中，因为目标函数可能被当作构造函数使用
	fnBond.prototype = new Fnop()
	// 返回fnBond的引用，有外部按需调用
	return fnBond


	/**
		// 简便版bind实现
		Function.prototypr.newBind = function() {
			// 存储当前的this指向
			const _this = this
			// 接受参数args，第一项是新的this指向，第二项到最后一项是函数的传参
			const args = Array.prototype.slice.call(arguments)
			const newThis = args.shift()  // 函数传参的第一个参数
		
			// 3.返回值
			return function() {
				return _this.newApply(newThis, args)
			}
		｝
	**/

疑问：newBind中agrs、innerArgs以及传参时还没有弄清楚。
bind实现方法是网上各个资料整理的版本，还有些地方没有理解，先记录下来。