關于This對象

js 中的this 是一個比較難理解的對象；所以也經常作為面試的考點，考察應聘者的js 基礎能力；其實this的指向也就那么幾種情況，接下來我們一一看一下：

函數中的this取何值是在函數真正被調用時確定的(也就是運行時)，函數定義時確定不了。

1、在全局調用函數 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 所以說 箭頭函數f1的作用域是 obj.fn的作用域；

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

var bar =foo();

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

var bar=obj1.foo();

3、函數是否在某個上下文對象中調用（隱式綁定）？如果是的話，this 指向那個上下文對象。

var bar =foo.call(obj2);

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

var bar = new foo();

1、函數是否在new 中調用（new綁定）？如果是的話this 綁定的就是新創建的對象。

8、綜上所述，我們可以使用下面的規則，對this的指向進行判斷：

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

1、call、apply 可以顯式綁定；這兩個函數的第一個參數是一個對象；他們會把這個對象綁定到this，接著調用函數時指定這個this；

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

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

4、返回這個對象；

3、執行構造函數中的代碼（這個函數的調用會綁定到新對象的this）；

2、將這個新對象的原型指向 構造函數的 Prototype

1、創建一個新的對象；

我們看一下 new 關鍵字主要做了哪些事：

6、構造函數中的this 指向創建的實例對象

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

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

5、箭頭函數中的This

第一個輸出是obj是一位函數在obj中調用了； f1的調用為什么會是window呢：因為他沒有綁定到任何一個對象中；

我們在看下這個例子：

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

4、匿名函數中的 this 具有全局性

為什么會指向window呢，以為這個函數的指針已經指向了 f1 而f1 的執行環境時 window 所以指向了window；

如果我們做個變形：

3、函數作為對象方法調用時，this就等于那個對象；

這個不難理解；由于DOM元素 調用的他，所以指向了DOM元素

2、DOM事件中的this 指向DOM節點

因為函數是在全局調用的，所以this 指向 window；

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。