JavaScriptは対象の中の属性を深く理解します.

10695 ワード

この記事では、主にJSのオブジェクトの属性を紹介します.属性の分類、アクセス方法、検出属性、エルゴード属性、属性などが含まれます.
目次
1.紹介:属性を記述する命名方法、検索経路および分類
2.属性のアクセス方法:'.''アクセス方式、''''''中かっこアクセス方式を紹介する.
3.属性の削除:deleteキーでオブジェクトのある属性を削除します.
4.検出属性:ある属性が対象かどうかを判断する例示的な属性を紹介する.in、obj.hasOwnProperty、obj.propertyIs Enumerable
5.エルゴード属性:三つのエルゴードオブジェクトの属性を紹介する:for/inブロック、Object.keys(obj)、Object.getOwnPropertyNames(obj)
6.属性特性:Escript 5に属性特性を追加しました.属性は列挙可能か、修正可能かなどの特性を設定できます.

1.紹介
1.1説明
属性とは、オブジェクトのメンバーを指すもので、単に「属性」だけでなく、方法も含まれています.

1.2命名方式
属性名は、英字、数字(先頭には出せない)、特殊記号(例えば:-、_、米ドルなど)を含むことができます.
しかし、普通は純粋な英語の文字を使っています.特殊な場合は、-(バー:-webkit-、-moz-を追加します. )及び_(下線).
属性名が-(バー)を含む場合、属性アクセスは'[]'中かっこのみでアクセスできます.

var o = {
    x: 1,
    y: 2,
    '-x': 3,
    '-showX': function () {
        alert(this.x);
    }
}
// o.-x; //          
console.log(o['-x']); // => 3 ：   -(  )     ，    '[ ]'       
o['-showX'](); // =>   1 ：      -(  )，

1.3属性の検索パス
あるオブジェクトの属性xを読み込むと、まずこのオブジェクトの例示的な属性が検索されます.見つからない場合は、このオブジェクトのプロトタイプオブジェクトの中から属性xが検索されます.プロトタイプオブジェクトに属性xがない場合は、プロトタイプオブジェクトのプロトタイプ(プロトタイプオブジェクトがプロトタイプを含むと仮定している)を探し続けます.

1.4属性の分類
オブジェクトの属性は、自分自身の属性によって、自己属性と継承属性に分類されます.
①自己属性:インスタンス属性ともいい、オブジェクト自体の属性を指します.
②継承属性:原型属性ともいい、対象が原型から継承される属性を指します.

2.属性のアクセス方法
'.'点アクセス方式と'''''中かっこ方式に分けられます.
説明:存在しない属性を読み込むとundefinedに戻ります.オブジェクトが存在しない属性を設定すると、この属性がオブジェクトに追加されます.
2.1''点アクセス方式
文法:obj.propertyName
説明:属性名は必ず標示子(静的文字列)であり、変数ではありません.
例:

var o = {};
o.x = '1';

2.2'[]'中かっこアクセス方式
文法:obj[propertyName]
説明:属性名は静的文字列でもあり、変数でもあります.変数であれば、アクセスする属性は変数の値です.
特徴:''''アクセス方式とは異なり、'''''の中かっこアクセス方式は柔軟性が大きい:動的アクセスが可能(変数指定属性名)、特定の特殊文字を含む属性にアクセス可能(例えば、属性名バンド'-')
例:

var o = { x: 1, y: 2 };
console.log(o['x']); // => 1 ：  x  
var a = 'y';
console.log(o[a]); // => 2 ：    y  (  a  )

3.delete削除属性
文法:delete obj.propertyName またはdelete obj[propertyName]
説明:deleteは対象の固有属性のみ削除できます.継承属性は削除できません.
例:

var o = {};
o.x = '1';
console.log(o.x); // => 1
delete o.x;
console.log(o.x); // => undefined ：        ，  undefined

o.constructor.prototype.y = '2'; //           y  
console.log(o.y); // => 2
delete o.y; //       y
console.log(o.y); // => 2 ：          y

4.検出属性
オブジェクトに属性が含まれているかどうかを検出します.
4.1 in演算子
説明:オブジェクトに属性が含まれているかどうかを判断すると、オブジェクトのインスタンス属性、継承属性から検出されます.
文法:propertyName in obj
戻り値:
この属性は、オブジェクトのインスタンス属性または引継ぎに含まれるかどうかを判断します.
true:オブジェクトの例示的な属性または引継ぎ属性はこの属性を含みます.
false:オブジェクトの例示的な属性または継承属性にはこの属性が含まれていません.
例:

function People(name) {
    this.name = name;
}
function Student(age) {
    this.age = age;
}
Student.prototype = new People(); //   Student    People  

var s = new Student(22);

console.log('age' in s); // => true ：age     
console.log('name' in s); // => true ：name     
console.log('address' in s); // => false ：address       ，  false

4.2 obj.hasOwnProperty(propertyName)
説明:オブジェクトが指定された名前のインスタンス属性を持っているかどうかを判断します.継承属性は確認されません.
パラメータ:
①propertyName{string}:属性名.
文法:obj.hasOwnProperty(propertyName)
戻り値:
｛book｝オブジェクトが指定された名前のインスタンス属性を持っているかどうかを判断します.この方法はオブジェクトのプロトタイプチェーンの属性を検査しません.
true:属性は対象の実例的な属性で、継承されていません.
false:属性はオブジェクトの例示的な属性ではありません.
例:

var Student = function (name) {
    this.name = name;
};
//  Student       sayHello  
Student.prototype.sayHello = function () {
    alert('Hello,' + this.name);
}
//  Student       age  
Student.prototype.age = '';
 
var st = new Student('  '); //      st
console.log(st.hasOwnProperty('name')); // => true ：       ，  this.name        
console.log(st.hasOwnProperty('sayHello')); // => false ：sayHello         
console.log(st.hasOwnProperty('age')); // => false ：age

4.3 obj.propertyIs Eumerable(propertyName)
説明:指定された名前の属性がインスタンス属性であるかどうかを判断し、列挙可能です.
パラメータ:
①propertyName{string}:属性名.
文法:obj.propertyIs Eumerable
戻り値:
{ブック} 属性がインスタンス属性であるかどうかを判断し、エニュメレーション可能(利用可能for／inサイクルエニュメレーション)であり、プロトタイプチェーン内のメンバを考慮しない.
true:属性は対象の実例となる属性で、列挙可能です.
false:属性はオブジェクトの実例となる属性ではないか、列挙できないものです.
例:

var o = Object.create({}, {
    name: {
        value: 'tom',
        enumerable: true //    
    },
    age: {
        value: 22,
        enumerable: false //     
    }
});

console.log(o.propertyIsEnumerable('name')); // => true ：name          
console.log(o.propertyIsEnumerable('age')); // => false ：age          

console.log(o.hasOwnProperty('age')); // => true ：hasOwnProperty()

4.4まとめ
検出モード
構文
属性を検出する範囲
戻り値
in演算子
propertyName in obj
インスタンス属性、継承属性
{bol}true:該当条件;fasle:該当しない
obj.hasOwnProperty(propertyName)
obj.hasOwnProperty(propertyName)
インスタンスのプロパティ
{ブック} true:該当条件;fasle:不適合
obj.propertyIs Eumerable(propertyName)
obj.propertyIs Eumerable(propertyName)
列挙可能なインスタンス属性
{ブック} true:該当条件;fasle:不適合

5.エルゴード属性
オブジェクトのインスタンス属性、継承属性を巡回します.
5.1 for/inブロック
説明:オブジェクトを巡回して列挙できる例示的な属性と継承属性
構文:
for(p in obj){/pは遍歴の属性名を表します}
例:

var po = { px: 1, py: 2 };
var o = { x: 1, y: 2 };
o.__proto__ = po; //   o    po
for (property in o) {
    console.log(property); // =>        ：x、y、px、py
    console.log(o[property]); // =>          ，      
}

5.2 Object.keys(obj)
説明:オブジェクトの列挙可能な属性名を含む配列を返します.
パラメータ:
①obj {object}:インスタンスオブジェクト
戻り値:
{Aray}オブジェクトの列挙可能な例示的な属性名を含む配列を返します.
例:

var po = { px: 1, py: 2 };
var o = { x: 1, y: 2 };
o.__proto__ = po; //   o    po
var propertyArray = Object.keys(o); // =>                     
for (var i = 0, len = propertyArray.length; i < len; i++) {
    console.log(propertyArray[i]); // =>         ：x、y
}

5.3 Object.getOwn PropertyNames(Obj)
説明:オブジェクトの例示的な属性名を含む配列を返します.列挙可能なものと列挙できないものを含みます.
パラメータ:
①obj {object}:インスタンスオブジェクト
戻り値:
{Aray}オブジェクトの例示的な属性名を含む配列を返します.
Object.keys()との違い:Object.keys()は列挙可能なインスタンス属性のみを返します.Object.getOwnPropertyNames()はすべてのインスタンス属性を返します.
例:

var po = { px: 1, py: 2 };
var o = { x: 1, y: 2 };
//     o     ：  x    ，  y     
Object.defineProperties(o, {
    x: {
        enumerable: true
    },
    y: {
        enumerable: false
    }
});
o.__proto__ = po; //   o    po

// 1.Object.keys()：                 
var propertyArray = Object.keys(o);
for (var i = 0, len = propertyArray.length; i < len; i++) {
    console.log(propertyArray[i]); // =>         ：x 
}

// 2.Object.getOwnPropertyNames()：                ，           
propertyArray = Object.getOwnPropertyNames(o);
for (var i = 0, len = propertyArray.length; i < len; i++) {
    console.log(propertyArray[i]); // =>         ：x、y
}

5.4まとめ
検出モード
構文
属性を巡回する範囲
戻り値
for/inブロック
for(p in obj){/pは遍歴の属性名を表します}
列挙可能なインスタンス属性と継承属性
{String}属性の名称
Object.keys(obj)
Object.keys(obj)
列挙可能なインスタンス属性
{Aray}オブジェクトの列挙可能な例示的な属性名を含む配列を返します.
Object.getOwn PropertyNames(Obj)
Object.getOwn PropertyNames(Obj)
オブジェクトのインスタンス属性名を含めます.列挙可能なものと列挙できないものを含みます.
{Aray}オブジェクトの例示的な属性名を含む配列を返します.

6.属性記述子
データ属性とアクセス属性に分けられます.
両者は互いに変換可能で、変換後にenumerableとconfigurbleの特性が設定されていない場合(両方の属性記述子にはこの2つの特性が含まれています)、デフォルトでは変換前の値を採用します.
6.1データ属性
説明:属性の操作特性を含みます.例えば、設定値、列挙可能かどうかなどです.
特性名
説明
標準値
value
属性の値を設定
undefined
writable
属性の値を変更できますか?true:属性の値を変更できます.false:属性の値を変更できません.
false
enumerable
エニュメレート・プロパティー;true:エニュメレート・エニュメレート・属性;false:エニュメレーションできません.
false
configrable
属性の特性を変更することができますか?true:プロパティの特性を変更することができます.false:プロパティの特性を変更することはできません.
false

標準値:
1)Object.defineProperty、Object.definePropertiesまたはObject.create関数を使用する場合、データ属性を追加します.writable、enumerable、configrableのデフォルト値はfalseです.
2)オブジェクトの直接量を使って作成した属性は、writable、enumerable、configurbleの特性がデフォルトでtrueです.
例:

// 1)     ；       true
var o1 = {
    name: 'tom'
};
console.log(Object.getOwnPropertyDescriptor(o1, 'name')); // => Object {value: "tom", writable: true, enumerable: true, configurable: true}

// 2)  Object.create  ，       false
var o2 = Object.create(null, {
    name: {value:'tom'}
});
console.log(Object.getOwnPropertyDescriptor(o2, 'name')); // => Object {value: "tom", writable: false, enumerable: false, configurable: false}

6.2 アクセサのプロパティ
説明:属性を設定するアクセス方法.set、get特性等
特性名
説明
標準値
get
属性の戻り値関数
undefined
セット
属性の設定値関数;与えられたパラメータを含んでいます.
undefined
enumerable
列挙可能な属性かどうかtrue:列挙できます.for/in文で列挙する属性があります.false:列挙することができません.
false
configrable
属性の特性を変更できますか?true:属性の特性を変更することができます.false:属性を変更できない特性
false

例:

var obj = {};

//       ，         
Object.defineProperty(obj, "name", {
    get: function () {
        return this._name; // get set          ， ：   name，get set   _name
    },
    set: function (x) {
        if (isNaN(x)) {
            this._name = x;
        } else {
            this._name = 'name      ';
        }
    },
    enumerable: true,
    configurable: true
});

console.log(Object.getOwnPropertyDescriptor(obj, 'name')); // => Object {get: function, set: function, enumerable: true, configurable: true} 
obj.name = '12';
console.log(obj.name); // => name

End
Web開発の道シリーズ
メニュー読み込み中..

javascript常用工具関数のまとめ