jsオブジェクトを深く理解する

小云云
リリース: 2018-03-28 16:57:39
オリジナル
1386 人が閲覧しました


この記事では主に、コードとテキストを組み合わせて、js オブジェクトについて詳しく説明します。皆さんのお役に立てれば幸いです。

オブジェクトの作成

直接量:let obj={x:1};
//具有prototype属性new方式:let obj=new Array();
//具有protope属性Object方法:Object.create(原型);
ログイン後にコピー

オブジェクト属性のクエリと設定

let obj={x:1,y:2};
obj.x//1obj["y"]//2
ログイン後にコピー

ps: オブジェクトの存在しない属性をクエリしても、オブジェクト自身の属性または継承された属性にターゲット属性が見つからない場合、エラーは報告されません。アクセス式は未定義を返します。ただし、存在しないオブジェクトをクエリすると、エラーが報告されます。

オブジェクト属性の削除

let book={name:"黑洞",author:"nd"};delete book.name;
//对象不存在name属性delete book[author];
//对象不存在author属性
ログイン後にコピー

delete: オブジェクトから属性を切断するだけで、プロトタイプ上の独自の属性のみを削除できます。

オブジェクトのプロパティを検出する

//继承const inherit=p=>{    if(p==null)throw TypeError();//p是一个对象但不能是null
    if(Object.create)return Object.create(p);//如果Object.create()存在直接使用它
    let t=typeof p;//进一步检验
    if(t!="object"&&t!=="function")throw TypeError();//检验
    function f(){};//定义一个空的构造函数
    f.prototype=p;//将其原型属性设置为p
    return new f();//}//in运算符(对象的自有属性和继承属性)let o={x:1}
console.log("x" in o)
console.log("y" in o)
console.log("toString" in o)//hasOwnProperty()(对象的自有属性(包含不可枚举属性))console.log(o.hasOwnProperty("x"))
console.log(o.hasOwnProperty("y"))
console.log(o.hasOwnProperty("toString"))//propertyIsEnumerable()(对象的自有属性且可枚举)let obj=inherit({y:2})
obj.x=1;
console.log(obj.propertyIsEnumerable("x"));
console.log(obj.propertyIsEnumerable("y")
ログイン後にコピー

列挙オブジェクトのプロパティ

let obj=Object.create({x:1});//for/in
//(所有可枚举的自有属性与继承属性)for(item in obj){   
 //属性名赋值给循环变量}//Object.keys()
 //(对象的可枚举自有属性)Object.keys(obj)
 //返回一个数组,数组是由对象的属性组成的
 //Object.getOwnPropertyName()
 //(所有对象的自有属性,包括不可枚举属性)Object.getOwnPropertyName(obj)
ログイン後にコピー

Js のデータ プロパティとアクセサー プロパティ

JavaScript では、オブジェクトのプロパティはデータ プロパティとアクセサー プロパティの 2 種類に分けられます。

1. データ属性

1. データ属性: データ値の読み取りおよび書き込みが可能な場所が含まれます。

2. データ属性には、次の 4 つの特性が含まれます:

構成可能: 削除によって属性を削除することによって属性を再定義できるかどうか、属性の特性を変更できるかどうか、または属性を変更できるかどうかを示します。 accessor 属性。デフォルトは true です。

enumerable: 属性が for-in ループを通じて返されるかどうかを示します。

writable: 属性の値が変更できるかどうかを示します。

value: 属性のデータ値が含まれます。デフォルトは未定義です

次の例のように: オブジェクト person を作成し、name 属性のデフォルト値を出力します

let person={name:"johe",age:12};
console.log(Object.getOwnPropertyDescriptor(person,"name"))
ログイン後にコピー
ログイン後にコピー

3 データ属性のデフォルト特性を変更します

属性属性のデフォルト特性を変更します。 、メソッドを使用する必要があります: Object .defineProperty() メソッド。このメソッドには、プロパティが配置されているオブジェクト、プロパティ名、および記述子オブジェクトの 3 つのパラメーターがあります。

このメソッドを通じて、属性のこれら 4 つの特性を変更できます。

たとえば、上記のペンソンオブジェクトの name 属性の特性を変更するとします:

    //修改数据属性
    let person={name:"johe",age:12};
    Object.defineProperty(person,"name",{value:"aa",writable:false,enumerable:false,configurable:false})
ログイン後にコピー
ログイン後にコピー

2. アクセサー属性

1. アクセサー属性: この属性にはデータ値が含まれませんが、get と のペアが含まれます。 set.メソッド、アクセサー プロパティの読み取りおよび書き込みの際、操作はこれら 2 つのメソッドを通じて処理されます。

2. アクセサー プロパティには 4 つの特性があります:

構成可能: プロパティを再定義するために削除によってプロパティを削除できるかどうか、プロパティのプロパティを変更できるかどうか、またはプロパティをアクセサー プロパティに変更できるかどうかを示します。デフォルトは false です。

enumerable: 属性が for-in ループを通じて返されるかどうかを示します。デフォルトは false です。

Get: 属性を読み取るときに呼び出される関数、デフォルト値は未定義です。

Set: 関数属性を書き込むときに呼び出されます。デフォルト値は未定義です

ここで、アクセサー プロパティは直接定義できず、Object.defineProperty() メソッドを通じて定義する必要があることに注意してください。

以下は例です。アクセサー オブジェクト ブックを作成し、その year アクセサー属性の機能説明を出力して、そのメソッドをテストします。
jsオブジェクトを深く理解する
実行結果:
jsオブジェクトを深く理解する
他の 2 つの機能は構成可能で列挙可能です。 テスト メソッドデータ属性を参照できます。ただし、この特別な説明では、設定可能な機能に関して、アクセサー属性のこの

機能のデフォルト値は false であるため、後でプログラムで属性を削除する必要がある場合は、アクセサー属性を定義するときにこの機能を追加します。 true、そうでない場合は、後でエラーの問題が発生します。

オブジェクトの 3 つの属性

1. プロトタイプ属性
Object.getPrototypeOf() はオブジェクトのプロトタイプを表示できます (非推奨)
i'sPrototyOf() (推奨)
2. クラス属性
classof() に適応しますオブジェクトのクラス属性を決定する
3. 拡張性
Object.esExtensible()

シリアル化されたオブジェクト

let o={x:1,y:{z:[false,null,'']}};let s=JSON.stringfy(o);let p=JSON.parse(s);
ログイン後にコピー
ログイン後にコピー

オブジェクトの作成

ターゲット プロパティがオブジェクト自体のプロパティまたは継承されたプロパティに見つからない場合、エラーは報告されません。ただし、存在しないオブジェクトがクエリされた場合は、エラーが報告されます。

オブジェクトのプロパティを削除する

直接量:let obj={x:1};//具有prototype属性new方式:let obj=new Array();//具有protope属性Object方法:Object.create(原型);//
ログイン後にコピー

delete : オブジェクトからプロパティを切断するだけで、独自のプロパティのみを削除できます。プロトタイプオブジェクト上で

オブジェクトのプロパティを検出する

let obj={x:1,y:2};
obj.x//1obj["y"]//2
ログイン後にコピー

オブジェクトのプロパティを列挙する

let book={name:"黑洞",author:"nd"};delete book.name;//对象不存在name属性delete book[author];//对象不存在author属性
ログイン後にコピー

Jsのデータプロパティとアクセサープロパティ

JavaScriptでは、オブジェクトのプロパティはデータプロパティとアクセサープロパティの2種類に分けられます。

1. データ属性

1. データ属性: データ値の読み取りおよび書き込みが可能な場所が含まれます。

2. データ属性には、次の 4 つの特性が含まれます:

構成可能: 削除によって属性を削除することによって属性を再定義できるかどうか、属性の特性を変更できるかどうか、または属性を変更できるかどうかを示します。 accessor 属性。デフォルトは true です。

enumerable: 属性が for-in ループを通じて返されるかどうかを示します。

writable: 属性の値が変更できるかどうかを示します。

value: 属性のデータ値が含まれます。デフォルトは未定義です

如下面这个例子:创建一个对象person,打印出name属性的特性的默认值

let person={name:"johe",age:12};
console.log(Object.getOwnPropertyDescriptor(person,"name"))
ログイン後にコピー
ログイン後にコピー

3.修改数据属性的默认特性

修改属性属性的默认特性要用到一个方法:Object.defineProperty()方法,这个方法有三个参数:属性所在的对象,属性名,一个描述符对象。

通过这个方法,我们可以来修改一个属性的这4个特性。

如我们对刚刚上面的penson对象里面的name属性的特性进行修改:

    //修改数据属性
    let person={name:"johe",age:12};
    Object.defineProperty(person,"name",{value:"aa",writable:false,enumerable:false,configurable:false})
ログイン後にコピー
ログイン後にコピー

2.访问器属性

1.访问器属性:这个属性不包含数据值,包含的是一对get和set方法,在读写访问器属性时,就是通过这两个方法来进行操作处理的。

2.访问器属性包含的四个特性:

configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为false

enumerable:表示能否通过for-in循环返回属性,默认为false

Get:在读取属性时调用的函数,默认值为undefined

Set:在写入属性时调用的函数,默认值为undefined

这里要注意下,访问器属性不能直接定义,要通过Object.defineProperty()这个方法来定义。

下面来个例子,创建一个访问器对象book,接着打印出其year访问器属性的特性描述并对其方法进行测试打印:
jsオブジェクトを深く理解する
执行结果:
jsオブジェクトを深く理解する
其他两个特性configurable,enumerable的测试方式可以参照数据属性的。不过在这特别说明下,关于configurable这个特性,因为访问器属性里面这个

特性默认值为false,如果程序后面需要对该属性进行delete操作等,那就在定义访问器属性时,将这个特性设置为true,不然这个会导致后面一些报错的问题。

对象的三个属性

1.原型属性
Object.getPrototypeOf()可以查看对象的原型 (不推荐使用)
i’sPrototyOf()(推荐使用)
2.类属性
适应classof()来判断对象的类属性
3.可拓展性
Object.esExtensible()

序列化对象

let o={x:1,y:{z:[false,null,'']}};let s=JSON.stringfy(o);let p=JSON.parse(s);
ログイン後にコピー
ログイン後にコピー

以上がjsオブジェクトを深く理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート