JavaScript オブジェクトの学習メモ

オブジェクトは JavaScript の基本単位であり、実際にはすべてがオブジェクトであり、その機能は独自のスタイルを持つだけでなく、独特の機能も備えています。

1. 参照

参照の概念は、オブジェクトの実際の位置へのポインターです。以下の例を参照してください:

var items = new Array("abc","def","hig");
//创建此数组的引用
var Ref = items;
items.push("klm");
alert(Ref.lenth);  //此处应该显示4

ただし、それが文字列の場合は、別の状況が発生します。以下のコードを参照してください:

var items = "abc";
var Ref = items;
items += "def";  //这里创建了一个新对象，而非原对象的修改。

これで、Ref と items は異なるオブジェクトを指します。

2. 関数のオーバーロード

JS のすべての関数には、すべてのパラメーターを受け取る疑似配列である変数引数があります。なぜ「擬似」なのかというと、変更することはできませんが、長さのプロパティがあるからです。次の例を見てみましょう:

function  myFun(num1,num2)
{
    if(arguments.length == 2) { alert("我有两个参数"); }
    if(arguments.length == 1) { alert("我有一个参数"); }
}

次に、関数 myFun("abc"); を呼び出して、違いを確認します。関数の重複をロードします:)

3. スコープ

JavaScript では、スコープはブロック (while、if、for) ではなく関数によって分割されます。これにより、一部のコードを理解する際に問題が発生する可能性があります。詳細を説明するために、次の例を見てみましょう:

var temp="oldTemp"    //全局变量
if(true)
{
    var temp = "newTemp"   //这里还在全局中
}
alert(temp == "newTemp")   //发现相等

しかし、関数内で temp 変数を宣言して変更すると、効果はまったく異なります。例を参照してください:

var temp="oldTemp" ;   //全局变量
function test()
{
    var temp = "newTemp";
}
test();
alert(temp == "newTemp") ;  //发现不相等

JS では、グローバル変数はメンバーですwindow オブジェクトのプロパティの、上記の例では、グローバル変数 temp == window.temp ですが、特定の変数に宣言がない場合、その変数は自動的にグローバル変数になることにも注意してください。特定の機能でのみ使用されます。

4. クロージャ

クロージャとは、外部関数が終了した場合でも、内部関数がその周囲の関数内の変数を参照できることを意味します。以下の例を参照してください:

function AddNum(num1)
{
    return function (num2)
    {
        return num1 + num2;
    }
}
var temp = AddNum(4);          //传入第一个参数，然后AddNum消失
var temp2 = temp(5);           //传入第二个参数，然后相加，返回9
alert(temp2);

この例はクロージャの概念をよく表しています。これは特殊なケースであり、このように使用されることはありません。

5. コンテキスト オブジェクト

コンテキスト オブジェクトはこの変数を通じて反映され、常に現在のコードが配置されているオブジェクトを指します。以下のコードを参照してください:

var obj ={
    yes:function(){
        this.val = true;
    },
    no:function(){
        this.val = false;
    }
}
alert(obj.val == null);   //这里我们发现对象obj没有val属性
obj.yes();                     //执行yes函数，obj有了val属性
alert(obj.val == true);
 
window.no = obj.no     //把obj的no函数传给window对象
window.no();
alert(obj.val == true) ;  //发现没有变化
alert(window.val == false)   //window里的val变为false;

ここで理解するのは簡単ではありませんが、幸いなことに、JS には call メソッドが用意されています。以下の例を参照してください:

function changeColor(color)
{
    this.style.color = color;
}
changeColor("Red");    //这里不行，因为window对象没有style属性
var temp = document.getElementById("temp");
changeColor.call(temp,"White");  //这里注意call的用法

call メソッドは、コンテキスト オブジェクトを最初のパラメーターとして設定し、他のパラメーターを元の関数のパラメーターとして設定します。

6. オブジェクト

ここでトピックに入ったばかりですが、前の概念では、実際にはこのブロックにはそれほど多くのコンテンツはありません。例を直接見てみましょう:

var obj = new Object();    //创建一个对象obj
obj.val = 5;               //创建属性obj，并为其赋值
obj.click = function()     //创建函数
{
    alert("我被单击了");
}

上記のコードは次のコードと同等です:

var obj = {
    val : 5,
    click: function(){
        alert("我被单击了");
    }
}

他のオブジェクト指向言語とは異なり、JS にはクラスの概念がありません。他の言語では、基本的に特定のクラスをインスタンス化する必要があります。クラスのインスタンスですが、JS ではそのアプローチが異なります。あらゆる関数をオブジェクトとしてインスタンス化できます。まず単純なオブジェクトを作成します:

function User(name)
{
    this.name = name;
}
var temp = new User("张三");
alert(temp.name);

上記のオブジェクト User が関数としてのみ使用される場合はどうなるでしょうか?

User("只作为函数使用");
alert(window.name);

これのコンテキストがウィンドウオブジェクトになります。

7. オブジェクト メソッド

エンド ユーザーはオブジェクトのコンテキストでパブリック メソッドにアクセスできます。ここでは、prototype 属性を理解する必要があります。以下のコードを参照してください:

function User(name,age)
{
    this.name = name;
    this.age = age;
}
User.prototype.getName = function(){ return this.name};
var user = new User("张三",25);
alert(user.getName());

パブリック メソッドを動的に作成することもできます。以下のコードを参照してください:

function User(name,age)
{
    this.name = name;
    this.age = age;
    this.getName = function(){ return this.name};
}
 
var user = new User("张三",25);
alert(user.getName());

コードが初めてコンパイルされるとき、動的に生成されたメソッドは生成されません。この手法は、オーバーヘッドのプロトタイプを作成するために使用されます。さらに強力かつ柔軟です。

上記は JavaScript オブジェクト学習ノートの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。