1.1词法作用域
之前说过js的作用域包括全局作用域和函数作用域，而其实js的作用域是词法作用域，其主要特征为是在函数定义时确定的。
动态作用域呢是在函数运行时确定的，this也是如此。
function foo(){
console.log(a);
}
function bar(){
var a = 3;
foo();
}
bar();
var a = 2;
如果js是动态作用域这里的结果应该是3，可js是词法作用域所以结果为2。词法作用域关心的是函数在何处定义,动态作用域关注函数在何处被调用。上述代码中，foo函数是定义在window上的。而在执行bar函数时需要执行foo函数，其本身函数作用域内并为有foo，也是沿着作用域链找到window全局对象，发现foo函数，于是执行。
1.2调用栈
在研究this指向前先理解调用栈。
调用位置就是函数被调用的位置。
function baz(){
// 当前调用栈 是 baz
// 因此调用位置是在全局
console.log("baz");
bar(); // bar的调用位置
}
function bar(){
// 当前调用栈 是 baz -- bar
// 因此调用位置是baz
console.log("bar");
foo(); // foo的调用位置
}
function foo(){
// 当前调用栈 是 baz -- bar -- foo
// 因此调用位置是bar中
console.log("foo");
}
baz() // baz的调用位置
1.3this指向
this指向的是一个对象，我们把这个对象叫做函数的执行上下文（执行环境）。
函数被调用时this指向调用函数的对象，并于预编译阶段在函数的AO作用域里添加this作为属性名，并默认赋值undefined。
function test(){
console.log(this)//undefined
}
2this绑定
2.1默认绑定
function test() {
console.log(this.a)
}
var a = 10;
test()//10
2.2隐式绑定
考虑函数调用位置的上下文对象。最大的上下文对象就是window，所以默认绑定似乎又多了一种理解方式。
隐式绑定一般是通过某个对象进行函数调用。
function showThis() {
console.log(this.num)
}
obj1 = {
num:1,
fun:showThis
}
obj2 = {
num : 2,
fun:showThis
}
obj1.fun();//1
obj2.fun();//2
我们改一下代码。
function showThis() {
console.log(this.num)
}
obj1 = {
num:1,
fun:showThis
}
obj2 = {
num : 2,
obj1:obj1,
}
obj2.obj1.fun();//1
showThis是在obj1上调用的，不管obj2。
函数名复值情况会丢失绑定对象.
function showThis() {
console.log(this.num)
};
obj1 = {
num:1,
fun:showThis
};
let myFun = obj1.fun;
myFun();//undefined
上述代码相当于
function showThis() {
console.log(this.num)
};
obj1 = {
num:1,
fun:showThis
};
//obj1.fun == showThis;
showThis();//undefined
无疑window对象上没有num这个属性
2.3显式绑定
隐式绑定时,必须在一个对象内部包含一个指向函数的属性.并通过这个属性间接的应用函数.从而把this隐式的绑定到这个对象上.
显示绑定就不必如此。
2.3.1
call与apply方法
使用显式绑定方法(还有bind)，意味着执行函数，并修改this指向的对象。
function showThis() {
console.log(this.num)
}
obj1 = {
num:1,
}
obj2 = {
num : 2,
}
showThis.call(obj2);//2
showThis.call(obj1);//1
showThis.apply(obj2);//2
showThis.apply(obj1);//1
这两者有什么区别呢，
apply与call接受的第一个参数为this指向，还可以继续添加参数，而后面的参数会传给函数。
function showThis(a,b) {
console.log(a + b + this.c)
}
obj1 = {
c:1,
}
obj2 = {
c: 2,
}
showThis.apply(obj1,[1,2])//1+2+1=4;
showThis.call(obj2,1,2)//1+2+2 = 5;
2.3.2
再来介绍一下bind方法，bind方法也叫硬绑定，是显示绑定但又能不被apply和call方法改变。
function showThis() {
console.log(this.a)
}
obj1 = {
a:1,
}
var a = 2;
let test = showThis.bind(obj1);//1
test.call(window)
2.4 new操作符
举个例子
function myTest(n) {
let num = n;
console.log(num)
}
let fun = new myTest(10);//10
3优先级
3.1默认最低；
这是毫无疑问的，不然就没有显式和隐式绑定了；
3.2显式高于隐式
function showThis() {
console.log(this.num)
}
obj1 = {
num:1,
fun:showThis
}
obj2 = {
num : 2,
fun:showThis
}
obj1.fun();//1
obj2.fun();//2
obj1.fun.call(obj2);//2
obj2.fun.call(obj1);//1
obj1.fun.apply(obj2);//2
obj2.fun.apply(obj1);//1
3.3new 高于隐式
function myTest(n) {
this.num = n;
}
obj1 = {
myTest:myTest
}
obj1.myTest(10);
let test1 = new obj1.myTest(100);
console.log(obj1.num);//10
console.log(test1.num);//100
3.4 new 比bind优先级高；
function myTest(n) {
this.num = n;
}
obj1 = {}
let test1 = myTest.bind(obj1);
test1(10);
let test2 = new test1(100)
console.log(obj1.num);//10
console.log(test2.num);//100
4特殊操作
4.1
null和apply方法地第一个参数可传入null；就意味着不指向任何对像；
function sum(a,b){
console.log(a + b)
}
sum.apply(null,[1,2]);//1+2=3