《你不知道的js》——this全面解析

標籤：修改   重複   接收   傳遞   error   style   var   timeout   define   

預設綁定

//全域對象用於預設綁定function foo(){    console.log(this.a)}var a=2;foo();  //2

//strict 模式下，不能將全域對象用於預設綁定function foo(){    ‘use strict‘;    console.log(this.a)}var a=2;foo();  //TypeError: this is undefined

//在strict 模式下調用foo()則不影響預設綁定function foo(){    console.log(this.a)}var a=2;(function(){    ‘use strict‘;    foo();})();  //2

 

隱式綁定

//當函數擁有內容物件時，隱式綁定規則會把函數調用中的this綁定到這個內容物件function foo(){    console.log(this.a)}var obj={    a:2,    foo:foo}obj.foo();    //2

//對象屬性鏈中只有上一層或者最後一層在調用位置中起作用function foo(){    console.log(this.a)}var obj2={    a:42,    foo:foo}var obj1={    a:2,    obj2:obj2}obj1.obj2.foo();    //42

//this 被隱式綁定的函數會丟失綁定對象，也就是說會應用預設綁定，從而把this綁定到全域對象或者undefined上function foo(){    console.log(this.a)}var obj={    a:2,    foo:foo} var bar=obj.foo;var a="hello";bar();  //hello

//參數傳遞其實就是隱式傳遞，因此我們傳入函數是也會被隱式賦值function foo(){    console.log(this.a)}function doFoo(fn){    fn();}var obj={    a:2,    foo:foo}var bar=obj.foo;var a="hello";doFoo(obj.foo)  //hello

//回呼函數丟失this綁定function foo(){    console.log(this.a)}var obj={    a:2,    foo:foo} var a="hello";setTimeout(obj.foo,100)   //hello

顯式綁定

//通過foo.call(..),在調用foo時強制把它的this綁定到obj上function foo(){    console.log(this.a)}var obj={    a:2}foo.call(obj) //2

//硬綁定function foo(){    console.log(this.a)}var obj={    a:2} var bar=function(){    foo.call(obj)};bar(); //2setTimeout(bar,100);  //2//硬綁定的bar    不可能再修改它的thisbar.call(window); //2

//硬綁定典型應用情境：建立一個包裹函數，負責接收參數並傳回值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 3console.log(b)    //5

//硬綁定典型應用情境：建立一個可以重複使用的輔助函數function foo(something){    console.log(this.a,something);    return this.a + something;}    //簡單的輔助綁定函數function bind(fn,obj){    return function(){        return fn.apply(obj,arguments)    }}var obj={    a:2}var bar=bind(foo,obj);var b=bar(3); //2 3console.log(b)  //5

 

《你不知道的js》——this全面解析