JS基礎知識04 this的繫結規則及優先順序

2021-10-01 23:14:54 字數 2739 閱讀 5854

this的繫結規則有：

預設繫結

隱式繫結

顯式繫結

new繫結

用一句話總結this的指向規則：

this的指向，是在執行函式時根據執行上下文所動態決定的

（呼叫函式會建立新的屬於函式自身的上下文，執行上下文的呼叫建立階段會決定this的指向）

一般來說，this 繫結的優先順序： new > 顯示繫結 > 隱式繫結 > 預設繫結。

var a = 'global'


function fn1() 


fn1();   //global
函式在全域性環境呼叫執行時，this指向全域性物件，如果使用嚴格模式，this繫結到undefined

var a = 'globala';


var obj = 


function test () 


obj.test();  // obja
函式作為物件的方法被呼叫時，this指向方法執行時所在的當前物件，即obj。

var obj2 = ;


var obj1 = ;


function test() 


obj1.obj2.foo(); // 42
如果是多重物件的呼叫，this 也還是繫結在上一級物件上,即obj2上。

物件屬性引用鏈中只有最後一層會影響呼叫位置。

2.1.1 隱式丟失

var a = 'global'


const zhangsan = ,


wait() 


foo1();


}};zhangsan.wait();    //global
這裡的函式呼叫比上面的程式多了一層函式的巢狀，繫結的 this 就發生了變化，變成了 winodw 全域性物件

解決辦法：

wait() 


foo1();


}
或者使用箭頭函式

wait() 


foo1();


}
箭頭函式內的this取上級作用域（waitagain方法）的this,即waitagain方法執行時所在的當前物件張三。

箭頭函式中的this是在定義函式的時候繫結，而不是在執行函式的時候繫結。this指向箭頭函式上級作用域指向的this，this是繼承自父執行上下文！！！

箭頭函式面試題：

var name = 'window';


const person1 = 


}person1.sayname();//window
var b = '0'


let obj = }}}


obj.a()()()


// this指向的是obj


//
var name = 'a'


let obj = ,


name: 'jack',


showname: this.name // 箭頭函式


}obj.a()  // obj


console.log(obj.showname)  // a


let a = obj.a


a() // window
function fn1() 


fn1.call();  //
fn.call(,p1,p2,p3)  //call後面的引數是乙個引數列表，乙個乙個傳進去的


fn.bind(,p1,p2,p3)  //bind和call相似，從第二個引數開始是接收的引數列表。區別在於bind方法返回值是函式,沒有立即執行。
var x = "global!";


function obj()


var o = new obj();


console.log(o.x);   //obj!
函式通過new呼叫後，會返回乙個新物件，並將新物件會繫結到函式呼叫的 this上

使用 new 呼叫函式，會自動執行下面的操作：

1.建立乙個新物件。

2. 將新物件繫結到函式呼叫的 this上。這個新物件會被執行 [[prototype]] 連線。物件.proto = 建構函式.prototype

3. 執行建構函式

4. 如果函式沒有返回其他物件，那麼 new 表示式中的函式呼叫會自動返回這個新物件。

面試題

建構函式中返回乙個物件對結果有什麼影響???

function super (a)   


super.prototype.sayhello = function()  


function super_ (a) ;  


}  super_.prototype.sayhello = function()   


const super1 = new super(3)


const super2 = new super_(3)


console.log(super1)    // super 


console.log(super2) //
在建構函式中 return 基本型別 不會影響建構函式的值, 而 return 物件型別 則會替代建構函式返回該物件。

java 基礎知識 04

1.1.抽象類除了包含抽象方法外，還可以包含具體的變數和具體的方法。類即使不包含抽象方法，也可以被宣告為抽象類，防止被例項化。關於抽象類的幾點說明 在下列情況下，乙個類將成為抽象類 當乙個類的乙個或多個方法是抽象方法時 當類是乙個抽象類的子類，並且不能為任何抽象方法提供任何實現細節或方法主體時 當乙...

JS基礎知識

本週抽空學習了一些js新手需要知道的知識 1 js中用 來賦值，例如var a 1.2 迴圈結構和c 基本相同。3 簡單 基本 資料型別 number string boolean undefined null。4 複雜 引用 資料型別 object array date function。還有一些...

js基礎知識

1.ecmascript 直譯器 0,1 幾乎沒有相容性問題 2.dom 文件，物件，模型 document object model 相容性一般 3.bom 瀏覽器 物件，模型 browser object model 完全不相容 number string boolean function ob...