ホームページ >ウェブフロントエンド >jsチュートリアル >Javascript apply の賢い使用法と Object.defineProperty の拡張使用法

Javascript apply の賢い使用法と Object.defineProperty の拡張使用法

巴扎黑
巴扎黑オリジナル
2017-07-20 13:31:041771ブラウズ

Math.max は配列内の最大の項目の取得を実装します

var array = [1,2,3,4,5];var max = Math.max.apply(null, array);
console.log(max); // 5

呼び出し時には、最初のパラメーターに null が与えられます。これは、このメソッドを呼び出すオブジェクトがないためです。操作して返された値を取得します。結果は問題ないため、null が直接渡されます。

Math.min は配列内の最小項目の取得を実装します

var array = [1,2,3,4,5];var min= Math.min.apply(null, array);console.log(min); // 1

ネイティブ オブジェクトに max メソッドと min メソッドを追加します

その後、ネイティブ オブジェクト メソッドを使用する必要がありますObject.defineProperty()コード > は、オブジェクトの新しい属性を直接定義するか、オブジェクトの既存の属性を変更してオブジェクトを返します Object.defineProperty(),会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象

    Object.defineProperty(Array.prototype, 'max', {  
        writable: false,  
        enumerable: false,  
        configurable: true,  
        value: function () {  return Math.max.apply(null, this);  
        }  
    });  
      
    Object.defineProperty(Array.prototype, 'min', {  
        writable: false,  
        enumerable: false,  
        configurable: true,  
        value: function () {  return Math.min.apply(null, this);  
        }  
    });

直接在数组上调用即可:

var arr = [54,545,2165,545,56];  
console.log(arr.max());  
console.log(arr.min());

 上面讲到了Object.defineProperty的方法,下面我们来理解下。

Object.defineProperty的使用

对象是由多个名/值对组成的无序的集合。对象中每个属性对应任意类型的值。定义对象可以使用构造函数或字面量的形式:

var obj = new Object;  //obj = {}obj.name = "张三";  //添加描述obj.say = function(){};  //添加行为

除了以上添加属性的方式,还可以使用Object.defineProperty定义新属性或修改原有的属性。

Object.defineProperty()描述

语法:Object.defineProperty(obj, prop, descriptor)

参数说明:

  • obj:必需。目标对象

  • prop:必需。需定义或修改的属性的名字

  • descriptor:必需。目标属性所拥有的特性

返回值:

  • 传入函数的对象。即第一个参数obj

针对属性,我们可以给这个属性设置一些特性,比如是否只读不可以写;是否可以被for..inObject.keys()遍历。

给对象的属性添加特性描述,目前提供两种形式:数据描述和存取器描述。

数据描述

当修改或定义对象的某个属性的时候,给这个属性添加一些特性:

var obj = {
    test:"hello"}//对象已有的属性添加特性描述Object.defineProperty(obj,"test",{
    configurable:true | false,
    enumerable:true | false,
    value:任意类型的值,
    writable:true | false});//对象新添加的属性的特性描述Object.defineProperty(obj,"newKey",{
    configurable:true | false,
    enumerable:true | false,
    value:任意类型的值,
    writable:true | false});

数据描述中的属性都是可选的,来看一下设置每一个属性的作用。

value

属性对应的值,可以使任意类型的值,默认为undefined

var obj = {}//第一种情况:不设置value属性Object.defineProperty(obj,"newKey",{

});
console.log( obj.newKey );  //undefined------------------------------//第二种情况:设置value属性Object.defineProperty(obj,"newKey",{
    value:"hello"});
console.log( obj.newKey );  //hello

writable

属性的值是否可以被重写。设置为true可以被重写;设置为false,不能被重写。默认为false。

var obj = {}//第一种情况:writable设置为false,不能重写。Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false});//更改newKey的值obj.newKey = "change value";
console.log( obj.newKey );  //hello//第二种情况:writable设置为true,可以重写Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:true});//更改newKey的值obj.newKey = "change value";
console.log( obj.newKey );  //change value

enumerable

此属性是否可以被枚举(使用for...in或Object.keys())。设置为true可以被枚举;设置为false,不能被枚举。默认为false。

var obj = {}//第一种情况:enumerable设置为false,不能被枚举。Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false});//枚举对象的属性for( var attr in obj ){
    console.log( attr );  
}//第二种情况:enumerable设置为true,可以被枚举。Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:true});//枚举对象的属性for( var attr in obj ){
    console.log( attr );  //newKey}

configurable

是否可以删除目标属性或是否可以再次修改属性的特性(writable, configurable, enumerable)。设置为true可以被删除或可以重新设置特性;设置为false,不能被可以被删除或不可以重新设置特性。默认为false。

这个属性起到两个作用:

  • 目标属性是否可以使用delete删除

  • 目标属性是否可以再次设置特性

//-----------------测试目标属性是否能被删除------------------------var obj = {}//第一种情况:configurable设置为false,不能被删除。Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:false});//删除属性delete obj.newKey;
console.log( obj.newKey ); //hello//第二种情况:configurable设置为true,可以被删除。Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:true});//删除属性delete obj.newKey;
console.log( obj.newKey ); //undefined//-----------------测试是否可以再次修改特性------------------------var obj = {}//第一种情况:configurable设置为false,不能再次修改特性。Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:false});//重新修改特性Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:true,
    enumerable:true,
    configurable:true});
console.log( obj.newKey ); //报错:Uncaught TypeError: Cannot redefine property: newKey//第二种情况:configurable设置为true,可以再次修改特性。Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:false,
    enumerable:false,
    configurable:true});//重新修改特性Object.defineProperty(obj,"newKey",{
    value:"hello",
    writable:true,
    enumerable:true,
    configurable:true});
console.log( obj.newKey ); //hello

除了可以给新定义的属性设置特性,也可以给已有的属性设置特性

//定义对象的时候添加的属性,是可删除、可重写、可枚举的。var obj = {
    test:"hello"}//改写值obj.test = 'change value';

console.log( obj.test ); //'change value'Object.defineProperty(obj,"test",{
    writable:false})//再次改写值obj.test = 'change value again';

console.log( obj.test ); //依然是:'change value'

提示:一旦使用Object.defineProperty给对象添加属性,那么如果不设置属性的特性,那么configurableenumerablewritable这些值都为默认的false

var obj = {};//定义的新属性后,这个属性的特性中configurable,enumerable,writable都为默认的值false//这就导致了newkey这个是不能重写、不能枚举、不能再次设置特性//Object.defineProperty(obj,'newKey',{

});//设置值obj.newKey = 'hello';
console.log(obj.newKey);  //undefined//枚举for( var attr in obj ){
    console.log(attr);
}
配列上で直接呼び出すだけです:

var obj = {};
Object.defineProperty(obj,"newKey",{
    get:function (){} | undefined,
    set:function (value){} | undefined
    configurable: true | falseenumerable: true | false});
    前述したように上 Object.defineProperty メソッドについては、以下で理解しましょう。
  • Object.defineProperty の使用法

  • オブジェクトは、複数の名前と値のペアで構成される順序付けされていないコレクションです。オブジェクト内の各プロパティは、任意の型の値に対応します。オブジェクトはコンストラクターまたはリテラルの形式で定義できます:
  • var obj = {};var initValue = 'hello';
    Object.defineProperty(obj,"newKey",{
        get:function (){//当获取值的时候触发的函数return initValue;    
        },
        set:function (value){//当设置值的时候触发的函数,设置的新值通过参数value拿到initValue = value;
        }
    });//获取值console.log( obj.newKey );  //hello//设置值obj.newKey = 'change value';
    
    console.log( obj.newKey ); //change value
  • 上記のプロパティを追加する方法に加えて、
  • Object.defineProperty を使用して新しいプロパティを定義することもできます。または元の属性を変更します。

    Object.defineProperty() の説明
  • 構文:

    Object.defineProperty(obj, prop, descriptor)

  • パラメータの説明:

obj: 必須。ターゲットオブジェクト

prop: 必須。定義または変更する属性の名前

記述子: 必須。ターゲット属性が持つ特性

    戻り値:
  • 関数に渡されるオブジェクト。つまり、最初のパラメータ obj
  • は、この属性に対して、読み取り専用であるか書き込み可能であるかなど、for..in で使用できるかどうかなどの特性を設定できます。 または keys() トラバース。

オブジェクトのプロパティに特性の説明を追加します。現在、データの説明とアクセサーの説明の 2 つの形式が提供されています。

データの説明
🎜 オブジェクトの属性を変更または定義するときは、この属性にいくつかの特性を追加します。 🎜🎜rrreee🎜🎜 データの説明内の属性はすべてオプションです。各属性を設定する役割を見てみましょう。 。 🎜🎜値🎜🎜属性に対応する値は任意のタイプの値にすることができ、デフォルトは未定義です🎜🎜rrreee🎜🎜writable🎜🎜属性の値をオーバーライドできるかどうか。 true に設定するとオーバーライドできます。false に設定するとオーバーライドできません。デフォルトは false です。 🎜🎜rrreee🎜🎜enumerable🎜🎜 このプロパティを列挙できるかどうか (for...in または Object.keys() を使用)。 true に設定すると列挙できますが、false に設定すると列挙できません。デフォルトは false です。 🎜🎜rrreee🎜🎜configurable🎜🎜ターゲット属性を削除できるかどうか、または属性の属性を再度変更できるかどうか (書き込み可能、​​構成可能、列挙可能)。 true に設定すると、属性を削除またはリセットできます。false に設定すると、属性を削除またはリセットできません。デフォルトは false です。 🎜🎜この属性は 2 つの役割を果たします: 🎜🎜🎜🎜 delete を使用してターゲット属性を削除できるかどうか🎜🎜🎜🎜 ターゲット属性にプロパティを再度設定できるかどうか🎜🎜🎜🎜rrreee🎜🎜 新しく定義されたプロパティのプロパティを設定することに加えて、既存のプロパティのプロパティを設定することもできます🎜🎜rrreee🎜🎜🎜 ヒント: Object.defineProperty を使用してオブジェクトにプロパティを追加した後、プロパティのプロパティを設定しない場合は、 configurableenumerablewritable これらの値はデフォルトの false です🎜🎜🎜rrreee🎜🎜 機能の概要設定の値: 🎜🎜🎜🎜value: 設定 🎜🎜🎜🎜writable 属性の値: 値をオーバーライドできるかどうか。 true | false🎜🎜🎜🎜enumerable: 対象のプロパティを列挙できるかどうか。 true | false🎜🎜🎜🎜設定可能: 対象の属性を削除できるか、または特性を再度変更できるかどうか true | false🎜🎜🎜🎜アクセサーを使用して属性の特性を記述する場合、次の特性属性: 🎜🎜rrreee🎜🎜🎜 注: getter メソッドまたは setter メソッドを使用する場合、writable と value の 2 つの属性は使用できません🎜🎜🎜getter/setter🎜🎜 の値を設定または取得するときオブジェクトの属性として、Getter/setter メソッドを提供できます。 🎜🎜🎜🎜getterは属性値を取得するメソッドです。 🎜🎜🎜🎜setterは属性値を設定するメソッドです。 🎜🎜🎜🎜属性の get/set 属性を使用して、対応するメソッドを定義します。 🎜🎜りー🎜

注: get または set はペアで指定する必要はなく、どちらか一方を記述するだけです。メソッドが設定されていない場合、get と set のデフォルト値は未定義です

互換性

は ie8 の DOM オブジェクトでのみ使用できますObject.defineProperty() ネイティブ オブジェクトで使用しようとすると、エラーが報告されます。 。

以上がJavascript apply の賢い使用法と Object.defineProperty の拡張使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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