this的用法

標籤：

this的用法

在函數中this到底取何值,是在**函數真正被調用執行的時候確定的**,函數定義的時候確定不了.因為this的取值是執行內容環境的一部分,每次調用函數,都會產生一個新的執行內容環境.

**1. 建構函式之this**

```

function Foo() {

    this.name = "zhangsan";

    this.age = 20;

    console.log(this);

}

var f1 = new Foo();

```

**說明:**

1. 如果函數作為建構函式使用,那麼其中的this就代表它```new```出來的對象

2. 如果函數作為普通函數調用,這種情況this是指window.



```

function Foo() {

    this.name = "zhangsan";

    this.age = 20;

    console.log(this);

}

Foo();

console.log(window.name);

console.log(window.age);

```

**2. 函數作為對象的一個屬性**

如果函數作為對象的一個屬性時,並且作為對象的一個屬性被調用時,函數中的this指向該對象

```

//程式碼片段1

var obj = {

    x:10,

    fn:function() {

        console.log(this.x);

    }

};

obj.fn();



//程式碼片段2

var obj = {

    x:10,

    fn:function() {

        console.log(this.x);

    }

};

var obj1 = {

    x:20

};

obj1.fn = obj.fn;

obj1.fn();

```

**3. 函數用call或apply調用**

當一個函數被call和apply調用時,this的值就去傳入的對象的值

```

var test = "Tony";

function doSomething() {

    console.log(this.test);

}

var obj = {

    test:"Tom"

};

doSomething();

doSomething.call(obj);//doSomething中的this指向obj

```

**4. 全域&普通函數的調用**

在全域環境下,this指向的是window對象

```

console.log(this === window);//true

```

普通函數調用時,其中的this也是指向的window對象

```

var x = 10;

var fn = function() {

    console.log(this);//window

    console.log(this.x);//10

};

fn();

```

注意以下情況:雖然函數f是在obj對象內部定義的,但是他任然是一個普通函數,this指向的還是window對象.

```

var x = 20;

var obj = {

    x:10,

    fn:function() {

        function f() {

            console.log(this);

            console.log(this.x);

        }

        f();

    }

};

obj.fn();

```

**5. 建構函式prototype**

this代表的是當前對象的值,不僅僅是在建構函式的prototype,即便是在整個原型鏈中.

```

function Fn(name, age) {

    this.name = name;

    this.age = age;

}

Fn.prototype.sayName = function() {

    console.log(this.name);

};

var f1 = new Fn("zhangsan", 20);

console.log(f1.name);

```

this的用法