目次
Math.max は配列内の最大の項目の取得を実装します
Math.min は配列内の最小項目の取得を実装します
ネイティブ オブジェクトに max メソッドと min メソッドを追加します
Object.defineProperty的使用
Object.defineProperty()描述
数据描述
value
writable
enumerable
configurable
記述子: 必須。ターゲット属性が持つ特性
互換性
ホームページ ウェブフロントエンド jsチュートリアル Javascript apply の賢い使用法と Object.defineProperty の拡張使用法

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

Jul 20, 2017 pm 01:31 PM
apply javascript js

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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます 株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます Dec 17, 2023 pm 06:55 PM

株式分析に必須のツール: PHP および JS でローソク足チャートを描画する手順を学びます。特定のコード例が必要です。インターネットとテクノロジーの急速な発展に伴い、株式取引は多くの投資家にとって重要な方法の 1 つになりました。株価分析は投資家の意思決定の重要な部分であり、ローソク足チャートはテクニカル分析で広く使用されています。 PHP と JS を使用してローソク足チャートを描画する方法を学ぶと、投資家がより適切な意思決定を行うのに役立つ、より直感的な情報が得られます。ローソク足チャートとは、株価をローソク足の形で表示するテクニカルチャートです。株価を示しています

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト 推奨: 優れた JS オープンソースの顔検出および認識プロジェクト Apr 03, 2024 am 11:55 AM

顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネット アプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワーク インタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザー エクスペリエンスが向上することが挙げられます。欠点としては、モデル サイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピューター ビジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript:リアルタイム監視システムを実現するためのキーテクノロジー はじめに: インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする Dec 18, 2023 pm 03:39 PM

インターネット金融の急速な発展に伴い、株式投資を選択する人がますます増えています。株式取引では、ローソク足チャートは一般的に使用されるテクニカル分析手法であり、株価の変化傾向を示し、投資家がより正確な意思決定を行うのに役立ちます。この記事では、PHP と JS の開発スキルを紹介し、株価ローソク足チャートの描画方法を読者に理解してもらい、具体的なコード例を示します。 1. 株のローソク足チャートを理解する 株のローソク足チャートの描き方を紹介する前に、まずローソク足チャートとは何かを理解する必要があります。ローソク足チャートは日本人が開発した

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

See all articles