js で混同されやすいメソッドのいくつか-jsチュートリアル-php.cn

js で混同されやすいメソッドのいくつか

高洛峰

リリース： 2016-10-17 09:50:49

オリジナル

1261 人が閲覧しました

JavaScriptには非常に長い関数名がいくつかあり、使用する際に混乱を招く可能性があるので、印象を深めるために整理したいと思います。

①Object.getOwnPropertyDescriptor - オブジェクトの特定のプロパティのプロパティ記述子を読み取ります (値 / 書き込み可能 / 列挙可能 / 構成可能)

このメソッドは 2 つのパラメータを受け取ります: (プロパティが配置されているオブジェクト、その記述子のプロパティ名)読み取られる）、戻り値はオブジェクトです。

var o = Object.getOwnPropertyDescriptor({x : 1}, &#39;x&#39;);
//{value:1, writable:true, enumerable:true, configurable:true}alert(o);    //  [object Object]

ログイン後にコピー

このメソッドは独自のプロパティ記述子のみを取得でき、継承されたプロパティの特性を取得できません:

var o = Object.getOwnPropertyDescriptor({}, &#39;toString&#39;);<br>
alert(o);     //undefined

ログイン後にコピー

②Object.defineProperty - オブジェクト (単一) プロパティの特性を設定するか、新しいプロパティに特定の特性を持たせます

これこのメソッドは 3 つのパラメータを受け入れます: (変更するオブジェクト、作成または変更する属性、および属性記述子オブジェクト)。

var o = {};
            Object.defineProperty(o, &#39;x&#39;, {
                value : 1,
                writable : true,
                enumerable : false,
                configurable : true
            });
            alert(o.x);   //  1
            
            Object.defineProperty(o, &#39;x&#39;, {writable : false});
            o.x = 2;   //不可行，不会报错，但不会修改， o.x = 1；
            
            Object.defineProperty(o, &#39;x&#39;, {value : 2});
            alert(o.x);   //  2

ログイン後にコピー

③Object.defineProperties - オブジェクト (複数) プロパティの特性を設定するか、新しく作成されたプロパティに特定の特性を持たせます。

このメソッドは 2 つのパラメーターを受け入れます: (変更されたオブジェクト、マッピングテーブル - すべての新規または変更されたプロパティが含まれます) プロパティ。名前とプロパティ記述子)。

Object.defineProperties({}, {
                _year : {
                    value : 2016，
　　　　　　　　　　　 writable : true,　
                    enumerable : true,
                    configurable : true 
                },
                edition : {
                    value : 1
                },
                year : {
                    get : function(){
                        return this._year;
                    },
                    set : function(newValue){
                        if(newValue > 2004){
                            this._year = newValue;
                            this.edition += newValue - 2004;
                        }
                    }
                }
            });

ログイン後にコピー

上記は、空のオブジェクトに 2 つのデータ属性 (_year と edition) とアクセサー属性 (year) を定義しています。ここでの 2 つの属性はすべて同時に作成されます。

④isPrototypeOf - オブジェクトとプロトタイプの関係を決定する

function Person(){}            
            var friend = new Person();
            alert(Person.prototype.isPrototypeOf(friend));  //true

ログイン後にコピー

friend オブジェクト内に Person.prototype へのポインタがあるため、true を返します。

⑤Object.getPrototypeOf - オブジェクトのプロトタイプを簡単に取得します

function Person(){}
            Person.prototype.name = &#39;Tom&#39;;
            
            var friend = new Person();
            alert(Object.getPrototypeOf(friend) == Person.prototype);  // true
            alert(Object.getPrototypeOf(friend).name);  // Tom

ログイン後にコピー

IE9+ でサポートされる ES5 の新しいメソッド。

⑥hasOwnProperty - プロパティがインスタンスまたはプロトタイプに存在するかどうかを検出します

function Person(){}
            Person.prototype.name = &#39;Tom&#39;;
            Person.prototype.sayName = function(){
                alert(this.name);
            };
            
            var frient1 = new Person();
            frient1.name = &#39;Jery&#39;;
            var frient2 = new Person();
            
            alert(frient1.hasOwnProperty(&#39;name&#39;));
            alert(frient2.hasOwnProperty(&#39;name&#39;));

ログイン後にコピー

hasOwnProperty() を使用すると、アクセスしているのがインスタンスプロパティなのかプロトタイププロパティなのかを簡単に知ることができます。