ホームページ  >  記事  >  ウェブフロントエンド  >  js で混同されやすいメソッドのいくつか

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

高洛峰
高洛峰オリジナル
2016-10-17 09:50:491202ブラウズ

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

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

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

var o = Object.getOwnPropertyDescriptor({x : 1}, 'x');
//{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() を使用すると、アクセスしているのがインスタンス プロパティなのかプロトタイプ プロパティなのかを簡単に知ることができます。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。