js 中函數的 4 種調用方式：

① 作為普通函數來調用，this 的值指向 window，準確地說，this 為 null，被解釋成為 window。在 ECMAScript5 標準中，如果 this 為 null，則解釋成 undefined

<script> function t(){this.x = 'hello'; } t(); alert(window.x); </script>

彈出：hello

?

② a.作為對象的方法來調用，this 指向方法的調用者，即該對象

<script> var obj = {x:'hello',y:'world',t:function(){alert(this.x)}}; obj.t(); </script>

彈出：hello

?

b.

<script> var obj = {x:'hello',y:'world',t:function(){alert(this.x)}};var dog = {x:'wang'}; dog.t = obj.t; dog.t(); </script>

彈出：wang

作為方法調用時，this 指向其調用那一刻的調用者，即母體對象，不管被調用函數，聲明時屬于方法還是函數

?

c.

<script> var obj = {x:'hello',y:'world',t:function(){alert(this.x)}};var dog = {x:'wang'}; dog.t = obj.t; dog.t();show = function(){alert('show '+this.x); } dog.t = show; dog.t(); </script>

?

d.

<script> var obj = {x:'hello',y:'world',t:function(){alert(this.x)}};var dog = {x:'wang'}; dog.t = obj.t; dog.t();show = function(){alert('show '+this.x); } dog.t = show; dog.t(); </script>

彈出：show wang

?

③ 作為構造函數調用時

js 中沒有類的概念，創建對象使用構造函數來完成，或者直接用 json 格式{} 來寫對象

<script> function Dog(name,age){this.name = name;this.age = age;this.bark = function(){alert(this.name);} } var dog = new Dog('妞妞',2); dog.bark(); </script>

彈出：妞妞

new Dog 發生了一下幾個步驟：

a. 系統創建空對象{}，（空對象 construct 屬性指向 Dog 函數）

b. 把函數的 this 指向該空對象

c. 執行該函數

d. 返回該對象

?

例：

<script> function Robit(){this.name = '瓦力';return 'wali'; } var robit = new Robit(); console.log(robit); </script>

這段代碼將輸出？

答案：

Robit {name: "瓦力"}

輸出的是 Robit 對象，因為函數作為構造函數運行時，return 的值是忽略的，依然返回對象（return 無意義）。

?

?

④ 函數通過 call，apply 調用

語法格式：函數.call(對象，參數1，參數2...參數n);

<script> function t(num){alert('我的年齡是 '+this.age);alert('雖然我看起來像 '+(this.age+num)); } var human = {name:'迭戈.科斯塔',age:27}; human.t = t; human.t(10); </script>

彈出：我的年齡是 27

彈出：雖然我看起來像 28

?

接下來，不把 t 賦為 human 的屬性，也能把 this 指向 human

<script> function t(num){alert('我的年齡是 '+this.age);alert('雖然我看起來像 '+(this.age+num)); }var giroud = {name:'Giroud',age:28}; t.call(giroud,-5); </script>

彈出：我的年齡是 28

彈出：雖然我看起來像 23

【分析】：

fn.call(對象，參數1，參數2...參數n);

運行如下：

a. fn 函數中的 this 指向對象 obj

b. 運行 fn（參數1，參數2...參數n）

?

轉載于:https://www.cnblogs.com/dee0912/p/4430658.html

總結

以上是生活随笔為你收集整理的Javascript 笔记与总结（1-4）this的全部內容，希望文章能夠幫你解決所遇到的問題。

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