建站
咨詢
售后
建站咨詢
新聞中心
隱式綁定
成都創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站制作、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)金寨,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108
關(guān)于this，一般來說，誰調(diào)用了方法，該方法的this就指向誰，如：
- function foo(){
- console.log(this.a)
- }
- var a = 3;
- var obj = {
- a: 2,
- foo: foo
- };
- obj.foo(); // 輸出2,因?yàn)槭莖bj調(diào)用的foo，所以foo的this指向了obj，而obj.a = 2
如果存在多次調(diào)用，對象屬性引用鏈只有上一層或者說***一層在調(diào)用位置中起作用，如：
- function foo() {
- console.log( this.a )
- }
- var obj2 = {
- a: 42,
- foo: foo
- }
- var obj1 = {
- a: 2,
- obj2: obj2
- }
- obj1.obj2.foo(); // 42
隱式丟失
一個最常見的this綁定問題就是被隱式綁定的函數(shù)會丟失綁定對象，也就是說他回應(yīng)用默認(rèn)綁定，從而把this綁定到全局對象或者undefined上，取決于是否是嚴(yán)格模式。
- function foo() {
- console.log( this.a )
- }
- var obj1 = {
- a: 2,
- foo: foo
- }
- var bar = obj1.foo; // 函數(shù)別名！
- var a = "oops, global"; // a是全局對象的屬性
- bar(); // "oops, global"
雖然bar是obj.foo的一個引用，但是實(shí)際上，它引用的是foo函數(shù)本身，因此此時的bar()其實(shí)是一個不帶任何修飾的函數(shù)調(diào)用，因此應(yīng)用了默認(rèn)綁定
一個更微妙、更常見并且更出乎意料的情況發(fā)生在傳入回調(diào)函數(shù)時：
- function foo() {
- console.log( this.a )
- }
- function doFoo( fn ){
- // fn 其實(shí)引用的是 foo
- fn(); // <-- 調(diào)用位置！
- }
- var obj = {
- a: 2,
- foo: foo
- }
- var a = "oops, global"; // a是全局對象的屬性
- doFoo( obj.foo ); // "oops, global"
參數(shù)傳遞其實(shí)就是一種隱式賦值，因此我們傳入函數(shù)時也會被隱式賦值，所以結(jié)果和上一個例子一樣，如果把函數(shù)傳入語言內(nèi)置的函數(shù)而不是傳入自己聲明的函數(shù)(如setTimeout等)，結(jié)果也是一樣的
顯式綁定
簡單的說，就是指定this，如：call、apply、bind、new綁定等
硬綁定
- function foo( something ) {
- console.log( this.a, something)
- return this.a + something
- }
- var obj = {
- a: 2
- }
- var bar = function() {
- return foo.apply( obj, arguments)
- }
- var b = bar(3); // 2 3
- console.log(b); // 5
這里簡單做一下解釋： 在bar函數(shù)中，foo使用apply函數(shù)綁定了obj，也就是說foo中的this將指向obj，與此同時，使用arguments(不限制傳入?yún)?shù)的數(shù)量)作為參數(shù)傳入foo函數(shù)中;所以在運(yùn)行bar(3)的時候，首先輸出obj.a也就是2和傳入的3，然后foo返回了兩者的相加值，所以b的值為5
同樣，本例也可以使用bind:
- function foo( something ) {
- console.log( this.a, something)
- return this.a + something
- }
- var obj = {
- a: 2
- }
- var bar = foo.bind(obj)
- var b = bar(3); // 2 3
- console.log(b); // 5
new綁定
在傳統(tǒng)面向類的語言中，使用new初始化類的時候會調(diào)用類中的構(gòu)造函數(shù)，但是JS中new的機(jī)制實(shí)際上和面向類和語言完全不同。
使用new來調(diào)用函數(shù)，或者說發(fā)生構(gòu)造函數(shù)調(diào)用時，會自動執(zhí)行下面的操作：
- 創(chuàng)建(或者說構(gòu)造)一個全新的對象
- 這個新對象會被執(zhí)行[[Prototype]]連接
- 這個新對象會綁定到函數(shù)調(diào)用的this
- 如果函數(shù)沒有返回其他對象，那么new表達(dá)式中的函數(shù)會自動返回這個新對象 如：
- function foo(a){
- this.a = a
- }
- var bar = new foo(2);
- console.log(bar.a); // 2
使用new來調(diào)用foo(…)時，我們會構(gòu)造一個新對象并把它綁定到foo(…)調(diào)用中的this上。new是***一種可以影響函數(shù)調(diào)用時this綁定行為的方法，我們稱之為new綁定。
this的優(yōu)先級
毫無疑問，默認(rèn)綁定的優(yōu)先級是四條規(guī)則中***的，所以我們可以先不考慮它。
隱式綁定和顯式綁定哪個優(yōu)先級更高?我們來測試一下：
- function foo(a){
- console.log(this.a)
- }
- var obj1 = {
- a: 2,
- foo: foo
- }
- var obj2 = {
- a: 3,
- foo: foo
- }
- obj1.foo(); // 2
- obj2.foo(); // 3
- obj1.foo.call(obj2); // 3
- obj2.foo.call(obj1); // 2
可以看到，顯式綁定優(yōu)先級更高，也就是說在判斷時應(yīng)當(dāng)先考慮是否可以存在顯式綁定。
現(xiàn)在我們要搞清楚new綁定和隱式綁定的優(yōu)先級誰高誰低 ：
- function foo(something){
- this.a = something
- }
- var obj1 = {
- foo: foo
- }
- var obj2 = {}
- obj1.foo(2);
- console.log(obj1.a); // 2
- obj1.foo.call(obj2,3);
- console.log(obj2.a); // 3
- var bar = new obj1.foo(4)
- console.log(obj1.a); // 2
- console.log(bar.a); // 4
可以看到new綁定比隱式綁定優(yōu)先級高。但是new綁定和顯式綁定誰的優(yōu)先級更高呢?
- function foo(something){
- this.a = something
- }
- var obj1 = {}
- var bar = foo.bind(obj1);
- bar(2);
- console.log(obj1.a); // 2
- var baz = new bar(3);
- console.log(obj1.a); // 2
- console.log(baz.a); // 3
可以看到，new綁定修改了硬綁定中的this，所以new綁定的優(yōu)先級比顯式綁定更高。
之所以要在new中使用硬綁定函數(shù)，主要目的是預(yù)先設(shè)置函數(shù)的一些參數(shù)，這樣在使用new進(jìn)行初始化時就可以只傳入其余的參數(shù)。bind(…)的功能之一就是可以把除了***個參數(shù)(***個參數(shù)用于綁定this)之外的其他參數(shù)都傳給下層的函數(shù)(這種技術(shù)稱為“部分應(yīng)用”，是“柯里化”的一種)。舉例來說：
- function foo(p1,p2){
- this.val = p1 + p2;
- }
- // 之所以使用null是因?yàn)樵诒纠形覀儾⒉魂P(guān)心硬綁定的this是什么
- // 反正使用new時this會被修改
- var bar = foo.bind(null,'p1');
- var baz = new bar('p2');
- baz.val; // p1p2
- }
柯里化:在直覺上，柯里化聲稱“如果你固定某些參數(shù)，你將得到接受余下參數(shù)的一個函數(shù)”。所以對于有兩個變量的函數(shù)yx，如果固定了 y = 2，則得到有一個變量的函數(shù) 2x
This在箭頭函數(shù)中的應(yīng)用
箭頭函數(shù)不使用this的四種標(biāo)準(zhǔn)規(guī)則，而是根據(jù)外層(函數(shù)或者全局)作用域來決定this。
我們來看一下箭頭函數(shù)的詞法作用域：
- function foo() {
- // 返回一個箭頭函數(shù)
- return (a) => {
- // this繼承自foo()
- console.log(this.a)
- };
- }
- var obj1 = {
- a: 2
- };
- var obj2 = {
- a: 3
- };
- var bar = foo.call(obj1);
- bar.call(obj2); // 2, 不是3！
foo()內(nèi)部創(chuàng)建的箭頭函數(shù)會捕獲調(diào)用時foo()的this。由于foo()的this綁定到obj1，bar(引用箭頭函數(shù))的this也會綁定到obj1，箭頭函數(shù)的綁定無法被修改。(new也不行!)
總結(jié)
如果要判斷一個運(yùn)行中的函數(shù)的this綁定，就需要找到這個函數(shù)的直接調(diào)用位置。找到之后就可以順序應(yīng)用下面這四條規(guī)則來判斷this的綁定對象。
由new調(diào)用?綁定到新創(chuàng)建的對象。
由call或者apply(或者bind)調(diào)用?綁定到指定的對象。
由上下文對象調(diào)用?綁定到那個上下文對象。
默認(rèn)：在嚴(yán)格模式下綁定到undefined，否則綁定到全局對象。
新聞標(biāo)題：JavaScript中的this全面解析
路徑分享：http://fisionsoft.com.cn/article/dpcigoi.html
