JavascriptのFunctionオブジェクトの属性と方法

1.プロパティ(Propties)

アーグメンントは、実際に関数に伝達されるパラメータを取得し、同様の配列は、argments[n]を用いて単一のパラメータの値にアクセスすることができ、Arayの例ではなくObjectの例である.

function testArg(a, b) {
    var actCount = arguments.length,
        expCount = testArg.length,
        result;

    result = "Expected arguments' count is " + expCount + ";
";
    result += "Actual arguments' count is " + actCount + ".
";
    result += "They are:
";
    for (var i = 0; i < actCount; i++) {
        result += arguments[i] + ";
";
    }
    if (arguments instanceof Array) {
        result += "arguments is an Array instance."
    } else if (arguments instanceof Object) {
        result += "arguments is an Object instance."
    }
    document.write(result);
}
testArg(1);
//output result is:
Expected arguments' count is 2;
Actual arguments' count is 1.
They are:
1;
arguments is an Object instance.

length取得関数【定義】のパラメータ個数

functionName.length

callerは、現在の関数を呼び出す関数を取得する.caler属性は、関数が実行されている場合にのみ定義されます.

functionName.caller
関数がJavaScriptプログラムのトップから呼び出された場合、calerはnullを含みます.文字列コンテキストでcaler属性を使用すると、その結果はfunctionName.toStringと同じで、つまり関数の逆コンパイルテキストが表示されます.

function test() {
    if (test.caller == null) {
        document.write("test is called from the toppest level");
    } else {
        document.write("test is called from the function:
");
        document.writeln(test.caller.toString());
    }
    document.write("
");
}
//call from the top level
test();
//output: test is called from the toppest level

function testOuter() {
    test();
}

//call from the function testOuter
testOuter();
//output:
//test is called from the function:
//function testOuter() { test(); }

caleeは実行中のFunctionオブジェクト、すなわち指定されたFunctionオブジェクトの本文を返します.

[functionName.]argments.calee
calee属性は、相関関数が実行されている場合にのみ使用できるアーグメンントオブジェクトのメンバーです.この属性は通常、再帰的に匿名関数を呼び出すために使用される.

var fac = function(n){
  if (n <= 0)
     return 1;
  else
     return n * arguments.callee(n - 1);
}(4);
document.write(fac);//24

constructorは、あるオブジェクトを作成する関数を取得する.コントローラーはそれぞれ原型を持つ対象の原型メンバーです.これはGlobalとMathオブジェクト以外のすべてのJavaScriptの内部オブジェクトを含みます.constructor属性は、オブジェクトのインスタンスを構成するための関数参照です.

// A constructor function.
function MyObj() {
    this.number = 1;
}

var x = new String("Hi");

if (x.constructor == String)
    document.write("Object is a String.");
document.write ("
");

var y = new MyObj;
if (y.constructor == MyObj)
    document.write("Object constructor is MyObj.");

// Output:
// Object is a String.
// Object constructor is MyObj.

prototypeは、オブジェクトのプロトタイプを取得する.各コンストラクタにはプロトタイプの属性があり、他のオブジェクトを指します.このオブジェクトのすべての属性と方法は、構成関数の例によって引き継がれます.つまり、私たちはそれらの不変の属性と方法をプロタイプオブジェクトに定義することができます.

function Man(name, age) {
    this.name = name;
    this.age = age;
}
Man.prototype.sex = "M";
Man.prototype.struggle = function () {
    alert("day day up!!!!");
}
var li = new Man("Leo", 10);
alert(li.sex);//M
li.struggle();//day day up
Man.prototype.isStrong = true;
alert(li.isStrong);//true

また、定義されたオブジェクト(jsの元のオブジェクトを含む)に方法と属性を追加することもできる.

var a = new Number(2);
console.log(typeof(a.add);  // undefined
Number.prototype.add = function (add1) {
  return this+add1;
}
alert(aa.add(1)); // 3

2.方法(Propties)

appyは関数を呼び出し、関数の引数を指定されたオブジェクトに対してthis値を置換しながら指定された配列で置換します.

functionName.apply([thisObj],[,argAray])
もしargArayが無効であれば、「Object expected」エラーを投げます.thisObjとargArayが提供されていない場合は、現在のthisをthisObjとして使用します.

function callMe(arg1, arg2) {
    var s = "";

    s += "this value: " + this;
    s += "
";
    for (i in callMe.arguments) {
        s += "arguments: " + callMe.arguments[i];
        s += "
";
    }
    return s;
}

document.write("Original function: 
");
document.write(callMe(1, 2));
document.write("
");

document.write("Function called with apply: 
");
document.write(callMe.apply(3, [4, 5]));
document.write("
");

document.write("Function called with apply with invalid array: 
");
try{
    document.write(callMe.apply(3,2));
} catch (e) {
    document.write(e.message);
}
document.write("

");

document.write("Function called with apply without any argument: 
");
document.write(callMe.apply());
//Output result:
//Original function: 
//this value: [object Window]
//    arguments: 1
//    arguments: 2

//Function called with apply: 
//this value: 3
//    arguments: 4
//    arguments: 5

//Function called with apply with invalid array: 
//Function.prototype.apply: Arguments list has wrong type

//Function called with apply without any argument: 
//this value: [object Window]

コールは、オブジェクトを呼び出す方法で、現在のオブジェクトを別のオブジェクトに置き換えます.

call([thisObj],arg 1[,arg 2[,argN]]])
関数のthisオブジェクトを初期コンテキストからthisObjに指定された新しいオブジェクトに変更できます.thisObjパラメータが提供されていない場合、globalオブジェクトはthisObjとして使用される.appy方法と唯一の違いは、appyの第二のパラメータタイプはArayでなければなりませんが、call方法は全てのパラメータを列挙してカンマで区切っています.

function callMe(arg1, arg2){
    var s = "";

    s += "this value: " + this;
    s += "
";
    for (i in callMe.arguments) {
        s += "arguments: " + callMe.arguments[i];
        s += "
";
    }
    return s;
}

document.write("Original function: 
");
document.write(callMe(1, 2));
document.write("
");

document.write("Function called with call: 
");
document.write(callMe.call(3, 4, 5));

// Output: 
// Original function: 
// this value: [object Window]
// arguments: 1
// arguments: 2

// Function called with call: 
// this value: 3
// arguments: 4
// arguments: 5

bitは、与えられた関数に対して、元の関数と同じ主体を有するバインディング関数を作成する.結合機能において、thisオブジェクトは、指定された初期パラメータを有する着信オブジェクトとして解析される.

function.bind(thisArg[,arg 1[,arg 2[,argN]);
functionとthisArgは必須オプションであり、function関数と同じ新しい関数を返します.ただし、thisオブジェクトとパラメータは違います.

// Define the original function.
var checkNumericRange = function(value) {
  if (typeof value !== 'number') {
    return false;
  } else {
    return value >= this.minimum && value <=this.maximum;
  }
}
// The range object will become the this value in the callback function.
var range = {minimum:10, maximum:20};

// Bind the checkNumericRange function.
var boundCheckNumericRange = checkNumericRange.bind(range);

// Use the new function to check whether 12 is in the numeric range.
var result = boundCheckNumericRange (12);
document.write(result);

// Output: true

以下のコードでは、arg 1[,arg 2[,argN]]パラメータを使用する方法を示します.このバインディング関数は、bind法で指定されたパラメータを第一パラメータと第二パラメータとして使用する.このバインディング関数を呼び出すと、指定された任意のパラメータが第3のパラメータ、第4のパラメータとして使用されます.

// Define the original function with four parameters.
var displayArgs = function (val1, val2, val3, val4) {
    document.write(val1 + " " + val2 + " " + val3 + " " + val4);
}

var emptyObject = {};

// Create a new function that uses the 12 and "a" parameters
// as the first and second parameters.
var displayArgs2 = displayArgs.bind(emptyObject, 12, "a");

// Call the new function. The "b" and "c" parameters are used
// as the third and fourth parameters.
displayArgs2("b", "c");
// Output: 12 a b c

オブジェクト定義の内部でビッド法を使用すると、あるイベントをオブジェクト内部にバインドする方法があります.

    function Car(owner) {
        this.owner = owner;
        this.start = function () {
            //start the car
            console.log(this);
            //output: Car {owner: "Mike", start: function, stop: function} check.html:14
            console.log(this.owner + "'s car is starting.");
            //output: Mike's car is starting. 
        };
        this.stop = function () {
            console.log(this);
            //output: <input type="button" id="stop" value="Stop" />
            console.log(this.owner + "'s car is starting.");
            //output: undefined's car is stopping.
        };
    }
    var btnStart = document.getElementById("start"),
        btnStop = document.getElementById("stop"),
        someCar = new Car("Mike");

    if (document.attachEvent) {
        btnStart.attachEvent("onClick", someCar.start.bind(someCar));
        btnStop.attachEvent("onClick", someCar.stop);
    } else if (document.addEventListener) {
        btnStart.addEventListener("click", someCar.start.bind(someCar), false);
        btnStop.addEventListener("click", someCar.stop, false);
    }

上のSampleから発見しました.bindメソッドを使用しないと、イベントの中のthisが指すトリガclickイベントdom元素inputはもちろんowner属性がありません.bind指定イベントの中のthisオブジェクトを利用すれば、私たちが望む効果が得られます.