1.1詞法作用域
之前說(shuō)過(guò)js的作用域包括全局作用域和函數(shù)作用域，而其實(shí)js的作用域是詞法作用域，其主要特征為是在函數(shù)定義時(shí)確定的浮创。
動(dòng)態(tài)作用域呢是在函數(shù)運(yùn)行時(shí)確定的蜂嗽，this也是如此。
function foo(){
console.log(a);
}
function bar(){
var a = 3;
foo();
}
bar();
var a = 2;
如果js是動(dòng)態(tài)作用域這里的結(jié)果應(yīng)該是3，可js是詞法作用域所以結(jié)果為2。詞法作用域關(guān)心的是函數(shù)在何處定義,動(dòng)態(tài)作用域關(guān)注函數(shù)在何處被調(diào)用。上述代碼中筋蓖，foo函數(shù)是定義在window上的。而在執(zhí)行bar函數(shù)時(shí)需要執(zhí)行foo函數(shù)退敦，其本身函數(shù)作用域內(nèi)并為有foo粘咖，也是沿著作用域鏈找到window全局對(duì)象，發(fā)現(xiàn)foo函數(shù)侈百，于是執(zhí)行瓮下。
1.2調(diào)用棧
在研究this指向前先理解調(diào)用棧。
調(diào)用位置就是函數(shù)被調(diào)用的位置钝域。
function baz(){
// 當(dāng)前調(diào)用棧 是 baz
// 因此調(diào)用位置是在全局
console.log("baz");
bar(); // bar的調(diào)用位置
}
function bar(){
// 當(dāng)前調(diào)用棧 是 baz -- bar
// 因此調(diào)用位置是baz
console.log("bar");
foo(); // foo的調(diào)用位置
}
function foo(){
// 當(dāng)前調(diào)用棧 是 baz -- bar -- foo
// 因此調(diào)用位置是bar中
console.log("foo");
}
baz() // baz的調(diào)用位置
1.3this指向
this指向的是一個(gè)對(duì)象讽坏，我們把這個(gè)對(duì)象叫做函數(shù)的執(zhí)行上下文（執(zhí)行環(huán)境）。
函數(shù)被調(diào)用時(shí)this指向調(diào)用函數(shù)的對(duì)象例证，并于預(yù)編譯階段在函數(shù)的AO作用域里添加this作為屬性名路呜，并默認(rèn)賦值undefined。
function test(){
console.log(this)//undefined
}
2this綁定
2.1默認(rèn)綁定
function test() {
console.log(this.a)
}
var a = 10;
test()//10
2.2隱式綁定
考慮函數(shù)調(diào)用位置的上下文對(duì)象。最大的上下文對(duì)象就是window胀葱，所以默認(rèn)綁定似乎又多了一種理解方式漠秋。
隱式綁定一般是通過(guò)某個(gè)對(duì)象進(jìn)行函數(shù)調(diào)用。
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上調(diào)用的庆锦，不管obj2。
函數(shù)名復(fù)值情況會(huì)丟失綁定對(duì)象.
function showThis() {
console.log(this.num)
};
obj1 = {
num:1,
fun:showThis
};
let myFun = obj1.fun;
myFun();//undefined
上述代碼相當(dāng)于
function showThis() {
console.log(this.num)
};
obj1 = {
num:1,
fun:showThis
};
//obj1.fun == showThis;
showThis();//undefined
無(wú)疑window對(duì)象上沒(méi)有num這個(gè)屬性
2.3顯式綁定
隱式綁定時(shí),必須在一個(gè)對(duì)象內(nèi)部包含一個(gè)指向函數(shù)的屬性.并通過(guò)這個(gè)屬性間接的應(yīng)用函數(shù).從而把this隱式的綁定到這個(gè)對(duì)象上.
顯示綁定就不必如此轧葛。
2.3.1
call與apply方法
使用顯式綁定方法(還有bind)搂抒，意味著執(zhí)行函數(shù)，并修改this指向的對(duì)象尿扯。
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
這兩者有什么區(qū)別呢燕耿，
apply與call接受的第一個(gè)參數(shù)為this指向，還可以繼續(xù)添加參數(shù)姜胖，而后面的參數(shù)會(huì)傳給函數(shù)。
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
再來(lái)介紹一下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操作符
舉個(gè)例子
function myTest(n) {
let num = n;
console.log(num)
}
let fun = new myTest(10);//10
3優(yōu)先級(jí)
3.1默認(rèn)最低档插；
這是毫無(wú)疑問(wèn)的慢蜓，不然就沒(méi)有顯式和隱式綁定了；
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優(yōu)先級(jí)高郭膛；
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方法地第一個(gè)參數(shù)可傳入null晨抡；就意味著不指向任何對(duì)像；
function sum(a,b){
console.log(a + b)
}
sum.apply(null,[1,2]);//1+2=3
