最近一直在看《你不知道的javascript》很有感觸，結(jié)合書中的一些觀點再加上現(xiàn)實的一些例子，準(zhǔn)備與大家分享一下我的心得體會。
引入
demo1:
function foo(num){
console.log(`foo:${num}`);
this.count++;
//console.log(this.count)
}
foo.count = 0;
var i;
for(i=0;i<10;i++){
if(i>5){
foo(i)
}}
console.log(foo.count);
//foo:6
//foo:7
//foo:8
//foo:9
//0
demo2:
debugger //debugger會進入調(diào)試模式
function foo(){
var a = 2;
this.bar();
}
function bar(){
console.log(this.a)
}
foo()
綁定規(guī)則
- 默認(rèn)綁定
默認(rèn)綁定this 指向全局；在不帶任何修飾的函數(shù)引用進行調(diào)用的 都是默認(rèn)綁定
- 隱式綁定
是否被某個對象擁有或者包含，若是則為隱式綁定，this綁定到函數(shù)引用的上下文
引用函數(shù)（如setTimeout中調(diào)用的）會使隱式綁定丟失 從而變成默認(rèn)綁定
- 顯式綁定
var a= {
name: 'hello',
test:function(x,y){
console.log(this.a+""+x+""+y);
}
}
var b = a.test()
b()//undefined
>3.1 call
>```
b.call(a,x,y) //將b的this指向a，并傳入?yún)?shù)
3.2 apply
b.apply(a,[x,y]) //將b的this指向a，并傳入?yún)?shù)
ps:call/apply this指向為null的時候，指向的是window
3.3 bind
var c=b.bind(a,x,y) //將b的this指向a,并傳入?yún)?shù) 然后返回一個新的函數(shù)
c();
- new 綁定
使用new來調(diào)用函數(shù)的時候，會自動執(zhí)行下面的步驟
4.1 創(chuàng)建一個全新的對象
4.2 這個新對象會被執(zhí)行[[原型]]連接
4.3 新對象會被綁定到函數(shù)調(diào)用的this
4.4 如果函數(shù)沒有返回其他對象，那么new表達式中的函數(shù)調(diào)用會自動返回這個對象
eg:
function foo(a){
this.a=a;
}
var bar=new foo(2)
console.log(bar.a) //2
---
### 小試牛刀
下面用網(wǎng)上一個比較火的例子 來練習(xí)一下。
function Foo() {
getName = function () { alert (1); };
return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}
//請寫出以下輸出結(jié)果：
Foo.getName();//2
getName();//4
Foo().getName();//1
getName();//1
new Foo.getName();//2
new Foo().getName();//3
new new Foo().getName();//3
1. Foo.getName()： 直接調(diào)用Foo.getName = function () { alert (2);};
2. getName()：這里又再次涉及到了變量提升，這里我們通過編譯器相關(guān)原理來解釋; 首先是聲明階段 然后才是賦值一些的操作; 所以順序應(yīng)該是
```
var getName;
function getName() { alert (5);}
getName=function () { alert (4);};
```
3. Foo().getName(); 直接調(diào)用
function Foo() {
getName = function () { alert (1); };
return this;
} // 注意這里getName的值已經(jīng)修改為1
4. getName() // 1
5. new Foo.getName() // new的優(yōu)先度 小于. 所以為 new (Foo.getName)()
6. new Foo().getName() // () > . > new ，所以 (new Foo()).getName() //new Foo 返回
新foo函數(shù)，因為內(nèi)部的getName沒有綁定this，所以不會再new之后擁有，于是回去原型鏈查找
7. new new Foo().getName() // 同上 3