Js函式和物件學習體會

wow306225541發表於2018-03-03
JS函式物件

最近在通過廖雪峰老師的網站學習javascript，學到箭頭函式的時候，我才對this的指向完全懵逼，於是陸續看了幾篇文章，先從原理上講了建立，例項化及呼叫的過程。

一 this指向

1 基本原理

關於JavaScript函式執行環境的過程，IBM developerworks文件庫中的一段描述感覺很不錯，摘抄如下：

　　“JavaScript 中的函式既可以被當作普通函式執行，也可以作為物件的方法執行，這是導致 this 含義如此豐富的主要原因。一個函式被執行時，會建立一個執行環境（ExecutionContext），函式的所有的行為均發生在此執行環境中，構建該執行環境時，JavaScript 首先會建立 arguments變數，其中包含呼叫函式時傳入的引數。接下來建立作用域鏈。然後初始化變數，首先初始化函式的形參表，值為 arguments變數中對應的值，如果 arguments變數中沒有對應值，則該形參初始化為 undefined。如果該函式中含有內部函式，則初始化這些內部函式。如果沒有，繼續初始化該函式內定義的區域性變數，需要注意的是此時這些變數初始化為 undefined，其賦值操作在執行環境（ExecutionContext）建立成功後，函式執行時才會執行，這點對於我們理解 JavaScript 中的變數作用域非常重要，鑑於篇幅，我們先不在這裡討論這個話題。最後為 this變數賦值，如前所述，會根據函式呼叫方式的不同，賦給 this全域性物件，當前物件等。至此函式的執行環境（ExecutionContext）建立成功，函式開始逐行執行，所需變數均從之前構建好的執行環境（ExecutionContext）中讀取。”

（http://www.cnblogs.com/isaboy/archive/2015/10/29/javascript_this.html）

2 通過呼叫方式判斷（非嚴格模式）

    可以根據是否通過new的方式呼叫，是則指向當前，否則繼續是否通過 .xx    的方式呼叫，是則指向當前，否則指向window

    這裡講到了建構函式的概念：當任意一個普通函式用於建立一類物件時，它就被稱作建構函式，或構造器。

1、 在函式內部對新物件（this）的屬性進行設定，通常是新增屬性和方法。

2、 建構函式可以包含返回語句（不推薦），但返回值必須是this，或者其它非物件型別的值。


    function obj2(name,age){ 
        this.name = name;
        this.age = age;
        this.say=function(){ 
            return "我是:"+this.name+"我很帥,帥的不得了";
        }
    }
var o = new obj2();

那麼，在使用new操作符來呼叫一個建構函式的時候，發生了什麼呢？其實很簡單，就發生了四件事：


var obj  ={};
obj.__proto__ = CO.prototype;
CO.call(obj);
return obj;


3 特殊的箭頭函式

    箭頭函式的呼叫的函式內判斷，判斷此函式是否包含this，否則就向上一層判斷

    箭頭函式this的定義：箭頭函式中的this是在定義函式的時候繫結，而不是在執行函式的時候繫結。

var x=11;

var obj={
 x:22,
 say:()=>{
   console.log(this.x);
 }
}
obj.say();
//輸出的值為11

所謂的定義時候繫結，就是this是繼承自父執行上下文！！中的this，比如這裡的箭頭函式中的this.x，箭頭函式本身與say平級以key:value的形式，也就是箭頭函式本身所在的物件為obj，而obj的父執行上下文就是window，因此這裡的this.x實際上表示的是window.x，因此輸出的是11。


4.嚴格模式

在嚴格模式下，未指定環境物件而呼叫函式，則 this 值不會轉型為 window。 除非明確把函式新增到某個物件或者呼叫 apply()或 call()，否則 this 值將是 undefined。

嚴格模式下,沒有宿主呼叫的函式中的this是undefined!!!所以箭頭函式中的也是undefined!


二 函式和物件的關係

物件內封裝函式

var person = {
    firstName:"zhang",
    lastName:"erga",
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}

三 作用域和作用域鏈

https://www.cnblogs.com/wupeiqi/p/5649402.html

四  函式呼叫方式

https://www.cnblogs.com/liu666/p/5751363.html



相關文章