JS中function()使用方法

JS中function（）的使用方法

• • 方法調用模式
  • 函數調用模式
  • 構造器調用模式
  • Apply 調用模式

Javascript 函數不同于其他的語言，每個函數都是作為一個對象被維護和運作的。通過函數對象的性質，可以很友善的将一個函數指派給一個變量或者将函數作為參數傳遞。在繼續講述之前，先看一下函數的使用文法：

以下是引用片段：

function func1(…){…} 
var func2=function(…){…}; 
var func3=function func4(…){…}; 
var func5=new Function(); 
           

方法調用模式

當一個函數被儲存為對象的一個屬性時，我們稱之它為該對象的一個方法，那麼this被綁定到該對象上

var myObject = {
        name: "myObject",
        value: 0,
        increment: function (num) {
            this.value += typeof (num) === 'number' ? num : 0;
            return this;
        },
        toString: function () {
            return '[Object:' + this.name + ' {value:' + this.value + '}]';
        }
    }
    alert(myObject.increment(10).increment(20).toString()); // [Object:myObject {value:30}] 
           

函數調用模式

當一個函數并非一個對象的函數時，那麼它被當作一個函數來調用，this被綁定到全局對象上。這是語言設計的一個錯誤。倘若語言設計正确，當内部函數調用時，this應該仍然綁定到外部函數的this變量上

var myObject = {
        name: "myObject",
        value: 0,
        increment: function (num) {
            this.value += typeof (num) === 'number' ? num : 0;
            return this;
        },
        toString: function () {
            return '[Object:' + this.name + ' {value:' + this.value + '}]';
        },
        getInfo: function () {
            var self = this;
            return (function () {
                // return this.toString(); // 内部匿名函數中this指向了全局對象window， 輸出 [object Window] 
                return self.toString(); // 定義一個變量selft并給它指派為this，那麼内部函數通過該變量通路到指向該對象的this 
            })();
        }
    }
    alert(myObject.getInfo().toString())
           

構造器調用模式

JavaScript是一門基于原型繼承的語言, 這意味着對象可以直接從其他對象繼承屬性, 該語言是無類别的。 如果一個函數前面帶上new來調用，那麼将建立一個隐藏連接配接到該函數的prototype成員的新對象，同時this将會被綁定到構造函數的執行個體上

function MyObject(name) {
        this.name = name || 'MyObject';
        this.value = 0;
        this.increment = function (num) {
            this.value += typeof (num) === 'number' ? num : 0;
        };
        this.toString = function () {
            return '[Object:' + this.name + ' {value:' + this.value + '}]';
        }
        this.target = this;
    }

    MyObject.prototype.getInfo = function () {
        return this.toString();
    }

    // 同時建立一個MyObject.prototype對象，myObject繼承了MyObject.prototype的所有的屬性， this綁定到了MyObject的執行個體上 
    var myObject = new MyObject();
    myObject.increment(10);
    console.log(myObject.value); //10 
    var otherObject = new MyObject();
    otherObject.increment(20);
    console.log(otherObject.value); //20 
    console.log(myObject.target === myObject); // ture 
    console.log(myObject.target.getInfo()); // [Object:MyObject {value:10}] 
           

Apply 調用模式

JavaScript是一門函數式的面向對象程式設計語言，是以函數可以擁有方法。 函數的apply方法，如同該對象擁有此方法,此時this指向該對象。 apply接收兩個參數，第一個是要綁定的對象（this指向的對象）,第二個是參數數組.

function MyObject(name) {
        this.name = name || 'MyObject';
        this.value = 0;
        this.increment = function (num) {
            this.value += typeof (num) === 'number' ? num : 0;
        };
        this.toString = function () {
            return '[Object:' + this.name + ' {value:' + this.value + '}]';
        }
        this.target = this;
    }

    function getInfo() {
        return this.toString();
    }
    var myObj = new MyObject();
    alert(getInfo.apply(myObj)); //[Object:MyObject {value:0}], this指向myObj 
    alert(getInfo.apply(window)); //[object Window], this指向window 
           

轉載自: link

對原文進行了整理