關(guān)于This對象

js 中的this 是一個(gè)比較難理解的對象；所以也經(jīng)常作為面試的考點(diǎn)，考察應(yīng)聘者的js 基礎(chǔ)能力；其實(shí)this的指向也就那么幾種情況，接下來我們一一看一下：

函數(shù)中的this取何值是在函數(shù)真正被調(diào)用時(shí)確定的(也就是運(yùn)行時(shí))，函數(shù)定義時(shí)確定不了。

1、在全局調(diào)用函數(shù) this 指向 window

var a=10; function fn(){console.log(this);// widowconsole.log(this.a);//10 } var foo=document.getElementById('foo'); foo.addEventListener('click',fn); function fn(){console.log(this); // <div id="foo">click</div> } var obj={name:"daxiong",fn:function(){console.log(this);} }; obj.fn(); // obj var obj={name:"daxiong",fn:function(){console.log(this);} }; var f1= obj.fn; f1(); // window var obj={name:'daxiong',fn:function(){return function(){console.log(this);}} }; obj.fn()(); // window var obj={name:'daxiong',fn:function(){console.log(this); var f1=function(){console.log(this);}f1();} }; obj.fn(); // obj // window var obj={name:'daxiong',fn:function(){console.log(this);var f1=()=>{console.log(this);}f1();} } obj.fn(); //obj; var f2=obj.fn; f2(); // window // window 所以說 箭頭函數(shù)f1的作用域是 obj.fn的作用域；

5、當(dāng)然也有例外，比如箭頭函數(shù)中的this，是詞法作用域，this 指向定義所在的作用域。

var bar =foo();

4、如果都不是的話，就是默認(rèn)綁定。在嚴(yán)格模式下，就綁定到 undefined,否則綁定到全局對象。

var bar=obj1.foo();

3、函數(shù)是否在某個(gè)上下文對象中調(diào)用（隱式綁定）？如果是的話，this 指向那個(gè)上下文對象。

var bar =foo.call(obj2);

2、函數(shù)是否通過call、apply （顯示綁定）？如果是this指向的是指定的對象；

var bar = new foo();

1、函數(shù)是否在new 中調(diào)用（new綁定）？如果是的話this 綁定的就是新創(chuàng)建的對象。

8、綜上所述，我們可以使用下面的規(guī)則，對this的指向進(jìn)行判斷：

function foo(){console.log(this.a); } var obj={a:1 } foo.call(obj); //1;

1、call、apply 可以顯式綁定；這兩個(gè)函數(shù)的第一個(gè)參數(shù)是一個(gè)對象；他們會(huì)把這個(gè)對象綁定到this，接著調(diào)用函數(shù)時(shí)指定這個(gè)this；

7、顯式綁定 改變this的指向

//偽代碼； var new1=function(fn){var newObj=Object.create(fn);fn.call(newObj);return newObj; };

4、返回這個(gè)對象；

3、執(zhí)行構(gòu)造函數(shù)中的代碼（這個(gè)函數(shù)的調(diào)用會(huì)綁定到新對象的this）；

2、將這個(gè)新對象的原型指向 構(gòu)造函數(shù)的 Prototype

1、創(chuàng)建一個(gè)新的對象；

我們看一下 new 關(guān)鍵字主要做了哪些事：

6、構(gòu)造函數(shù)中的this 指向創(chuàng)建的實(shí)例對象

f1定義的作用域，是obj.fn 的作用域；所以f1 的作用域指向了obj;

箭頭函數(shù)中this 指向與其他不同，他是在函數(shù)定義是就確定了（詞法作用域）；

5、箭頭函數(shù)中的This

第一個(gè)輸出是obj是一位函數(shù)在obj中調(diào)用了； f1的調(diào)用為什么會(huì)是window呢：因?yàn)樗麤]有綁定到任何一個(gè)對象中；

我們在看下這個(gè)例子：

在紅皮書中有這么一句話：匿名函數(shù)的執(zhí)行環(huán)境具有全局性 所以這個(gè)輸出的是window； 那么為什么呢，其實(shí)在這個(gè)上下文（執(zhí)行環(huán)境）中匿名函數(shù)并沒有綁定到任何一個(gè)對象中，所以指向了window （非嚴(yán)格模式）

4、匿名函數(shù)中的 this 具有全局性

為什么會(huì)指向window呢，以為這個(gè)函數(shù)的指針已經(jīng)指向了 f1 而f1 的執(zhí)行環(huán)境時(shí) window 所以指向了window；

如果我們做個(gè)變形：

3、函數(shù)作為對象方法調(diào)用時(shí)，this就等于那個(gè)對象；

這個(gè)不難理解；由于DOM元素 調(diào)用的他，所以指向了DOM元素

2、DOM事件中的this 指向DOM節(jié)點(diǎn)

因?yàn)楹瘮?shù)是在全局調(diào)用的，所以this 指向 window；

總結(jié)

以上是生活随笔為你收集整理的js 上下箭头滚动_JS中的this完全讲解，再也不会被this搞晕了的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。