<span id="ld197"><th id="ld197"><progress id="ld197"></progress></th></span>
<menuitem id="ld197"></menuitem>

    <dl id="ld197"></dl>

    <track id="ld197"><big id="ld197"><big id="ld197"></big></big></track><noframes id="ld197"><dfn id="ld197"><address id="ld197"></address></dfn>

    <output id="ld197"></output>
    <var id="ld197"><noframes id="ld197">
      <dfn id="ld197"><nobr id="ld197"><sub id="ld197"></sub></nobr></dfn>
          <b id="ld197"><form id="ld197"><delect id="ld197"></delect></form></b>

                當前位置:首頁 > 安卓源碼 > 技術博客 >

                JavaScript Reflect API提供給開發人員的不同方法的演練

                時間:2020-08-09 22:02 來源:互聯網 作者:源碼搜藏 瀏覽: 收藏 挑錯 推薦 打印

                在本文中,我們將探索JavaScript的Reflect API,并了解其不同方法的用法。此外,大多數示例都是為程序員提供的,他們在JavaScript語言方面有點中級,可以輕松地掌握概念。 介紹 當涉及計算機編程環境中的反射時,其定義為在運行時檢查,自省和修改其自身的結
                在本文中,我們將探索JavaScript的Reflect API,并了解其不同方法的用法。此外,大多數示例都是為程序員提供的,他們在JavaScript語言方面有點中級,可以輕松地掌握概念。

                介紹

                當涉及計算機編程環境中的反射時,其定義為在運行時檢查,自省和修改其自身的結構和行為的能力(定義來自Wikipedia頁面)。此外,它對于元編程是眾所周知的。因此,您可以在運行時操作對象的變量,屬性和方法。使用JavaScript語言,可以進行反思。但是,在過去,它的限制和反射方法并不直接適用于許多開發人員。但是,如今,情況已不再如此,該Reflect對象提供了更好的有意義的方法來幫助開發人員輕松進行反射編程。因此,我們將要解決并觀察Reflect物體可以為我們提供什么,特別是它的static方法。好,那就開始吧。

                什么是Reflect API?

                以下是有關ReflectAPI的注意事項。

                • 它使用的Reflect是全局和靜態對象,因此,您無法創建該對象的實例。同樣,其所有方法均為static。

                • 它提供了運行時級別的檢查和操作對象屬性的功能,也稱為元編程。此外,在ES6之前,JavaScript語言確實提供了對象反射API,但是它們并不是真正組織起來的,并且在失敗時會引發異常。因此,今天,ReflectAPI在Reflect對象的幫助下改善了我們進行元/反射編程的方式。

                反映對象提供的各種方法是什么?

                Reflect.apply(目標,接收器,參數)

                此方法使用指定的參數調用要調用的目標函數。換句話說,如果您要調用某個函數而不真正直接調用它,而是要使用此方法來調用目標函數。

                此方法采用三個參數:

                • target -代表目標函數的第一個參數
                • receiver-第二個參數,表示this目標函數內部的值
                • args -第三個參數,表示數組對象中目標函數的參數

                請參閱以下示例:

                隱藏   復制代碼
                /** start of Reflect.apply() */
                
                //let's define a function
                function getSum(num1, num2) {
                
                    return `${this.value}${num1 + num2}`;
                }
                
                //let's try to invoke the function using Reflect.apply()
                const returnedValueOfFunc = Reflect.apply(getSum, { value:'Sum of 1 and 2 is '}, [ 1, 2]);
                
                console.log(returnedValueOfFunc); //output: Sum of 1 and 2 is 3
                
                /** end of Reflect.apply() */

                Reflect.construct(target,args,prototype)

                此方法用于調用構造函數。換句話說,此方法返回由目標構造函數創建的新實例。

                此方法采用三個參數:

                • target -代表目標構造函數的第一個參數
                • args-第二個參數,表示目標構造函數的參數。此參數是可選的。
                • prototype-第三個參數,表示另一個構造函數,其原型將用作目標構造函數的原型。此參數是可選的。

                請參閱以下示例:

                隱藏   復制代碼
                /** start of Reflect.constructor */
                
                //let's define a constructor function
                function Customer(title,firstName, lastName) {
                    
                    this.title = title;
                    this.firstName = firstName;
                    this.lastName = lastName;
                
                    this.showFullName = function () {
                        
                        return `${this.title}. ${lastName}, ${firstName} is from the ${this.country}`;
                    }
                }
                //let's define another constructor set the prototype to add a new property.
                function Employee() { }
                Employee.prototype.country = 'Philippines';
                
                const myCustomer = Reflect.construct(Customer, ['Dr','Jin Vincent', 'Necesario'],Employee);
                
                console.log(myCustomer.showFullName()); //output: Dr. Necesario, 
                                                        //Jin Vincent is from the Philippines
                
                /** end of Reflect.constructor */

                Reflect.defineProperty(目標,名稱,描述)

                可能您會猜測此方法用于定義對象的新屬性或更新現有屬性。如果這就是您的想法,那么您猜對了。

                此方法采用三個參數:

                • target -第一個參數是用于定義或修改屬性的對象
                • name -第二個參數是要定義或修改的屬性的名稱
                • desc -第三個參數是定義或修改的屬性的描述符

                而且,它具有的等效方法是Object.defineProperty(),F在我們已經意識到了這一點,您可能會想:“有什么區別?” ,我將在下一部分中回答。之后,我們將進入代碼示例。

                Reflect.defineProperty()和Object.defineProperty()有什么區別?

                基本上,這些方法執行相同的操作,但主要區別在于這些方法返回的值,F在的區別是該Reflect.defineProperty()方法返回一個Boolean,而該Object.defineProperty()返回了修改后的對象。此外,如果方法Object.defineProperty()失敗,則當Reflect.defineProperty()方法返回false結果時它將引發異常。

                數據屬性和訪問器屬性是什么?

                在進入代碼示例之前,讓我們嘗試了解該方法的第三個參數Reflect.defineProperty()。在任何面向對象的語言中,每個對象屬性都是數據屬性或訪問器屬性。

                基本上,數據屬性的值可以是可讀或不可讀或可寫的,而訪問器屬性具有一對用于設置和檢索該屬性值的getter-setter函數。

                使用Reflect.define()并定義數據屬性描述符

                在深入研究代碼之前,我們首先來看一下描述符對象的屬性:

                • value-這是與屬性關聯的值。這是undefined默認。
                • writable-如果將其設置為true,則可以使用賦值運算符來更改屬性值。這是false默認。
                • configurable-如果將其設置為true,則可以更改屬性屬性。這是false默認。
                • enumerable-如果將其設置為true,則該屬性將顯示在for ...in循環和Object.keys()方法中。這是false默認。

                讓我們來看一個代碼示例,用于將屬性定義為可寫,可配置和可枚舉。

                隱藏   收縮 JavaScript Reflect API提供給開發人員的不同方法的演練   復制代碼
                /** start of Reflect.defineProperty */
                
                const book = {};
                
                //let's define a property that is writable, configurable and enumerable 
                
                Reflect.defineProperty(book, "title", {
                    value: "JavaScript For Kids",
                    writable: true, 
                    configurable: true, 
                    enumerable:true
                });
                
                //let's check the book object
                console.log(book); //output: {title: "JavaScript For Kids"}
                
                //let's check the title of the book 
                console.log(book.title); //output: JavaScript For Kids
                
                //let's change the value of the Book property, 
                //this is possible because writable is set to true
                book.title = "Beginning Node.js";
                
                //let's check the title of the book 
                console.log(book.title); //output: Beginning Node.js
                
                //let's check if we can enumerate the title property
                
                for (const key in book) {
                    console.log(key); //output: title
                }
                
                /** end of Reflect.defineProperty */

                將屬性定義為不可寫,不可配置和不可枚舉的另一個示例。

                隱藏   收縮 JavaScript Reflect API提供給開發人員的不同方法的演練   復制代碼
                /** start of Reflect.defineProperty */
                
                const laptop = {};
                
                //let's define a property that isn't writable, configurable and enumerable 
                
                Reflect.defineProperty(laptop, "brand", {
                    value: "IBM",
                    writable: false,
                    configurable: false,
                    enumerable: false
                });
                
                //let's check the laptop object
                console.log(laptop); //output: {brand: "IBM"}
                
                //let's check the brand of the laptop
                console.log(laptop.brand); //output: IBM
                
                //let's change the value of the brand property, 
                //this is not possible because writable is set to false
                laptop.brand = "DELL";
                
                //let's check the brand of the laptop
                console.log(laptop.brand); //output: IBM
                
                //let's check if we can enumerate the brand property
                for (const key in laptop) {
                    console.log(key); //output: n/a
                }
                
                /** end of Reflect.defineProperty */

                使用Reflect.define()并定義訪問器屬性描述符

                同樣,在深入研究代碼示例之前,讓我們看一下訪問器屬性描述符屬性:

                • get -返回屬性值的函數
                • set -設置屬性值的函數
                • configurable-如果將其設置為true,則可以更改屬性描述符。這是false默認
                • enumerable-如果將其設置為true,則該屬性將在for..in循環和Object.keys()方法中顯示。這是false默認。

                讓我們看下面的代碼示例:

                隱藏   復制代碼
                /** start of accessor property */
                /** start of Reflect.defineProperty */
                
                const laundryShop = {
                    __defaultName__: "Queens Care Laundry Shop"
                }
                
                Reflect.defineProperty(laundryShop, "businessName", {
                    get: function () {
                        return this.__defaultName__;
                    },
                    set: function (value){
                        this.__defaultName__ = value;
                    },
                    configurable: true,
                    enumerable: true
                });
                
                console.log(laundryShop); //output: {__defaultName__: "Queens Care Laundry Shop"}
                console.log(laundryShop.businessName); //output: Queens Care Laundry Shop
                laundryShop.businessName = "Laundry Shop";
                console.log(laundryShop.businessName); //output: Laundry Shop
                
                /** end of accessor property */
                /** end of Reflect.defineProperty */    

                Reflect.deleteProperty(target,name)

                方法本身的名稱描述了它的作用。它基本上刪除了對象的屬性。

                此方法有兩個參數:

                • target -第一個參數是目標/參考對象
                • name -第二個參數是要刪除的屬性的名稱

                讓我們看下面的代碼示例:

                隱藏   復制代碼
                // /** start of Reflect.deleteProperty */
                
                let car = {
                    model: "Toyota Hilux",
                    yearModel: 2020
                };
                
                //let us see the object before removing the model property.
                console.log(car);  //output: {model: "Toyota Hilux", yearModel: 2020}
                
                Reflect.deleteProperty(car, "model");
                
                //let use the object after the removal of the model property.
                console.log(car); //output: { yearModel: 2020 }
                
                /** end of Reflect.deleteProperty */

                Reflect.set(目標,名稱,值)

                此方法用于設置對象屬性的值。

                此方法采用三個參數:

                • target -第一個參數是目標/參考對象
                • name -第二個參數是對象屬性的名稱
                • value -第三個參數是屬性的值

                讓我們看下面的代碼示例:

                隱藏   復制代碼
                /** Start of Reflect.set */
                
                const computer2 = {
                     processor: "Intel",
                     brand: "Dell",
                     operatingSystem: "windows 7"
                };
                
                console.log(computer2);
                //output: {processor: "Intel", brand: "Dell", operatingSystem: "windows 7"}
                
                Reflect.set(computer2, "processor", "AMD");
                
                console.log(computer2);
                //output: {processor: "AMD", brand: "Dell", operatingSystem: "windows 7"}
                
                // /** end of Reflect.set */  

                Reflect.get(目標,名稱,接收者)

                顯然,此方法與完全相反Reflect.set()。此方法用于檢索對象屬性的值。

                此方法采用三個參數:

                • target -第一個參數是目標/參考對象
                • name -第二個自變量對象的屬性名稱
                • receiver -第三個參數是接收者

                讓我們看下面的代碼示例:

                隱藏   復制代碼
                /** Start of Reflect.get */
                
                var computer1 = {
                    processor: "Intel",
                    brand: "Dell",
                    operatingSystem: "windows 7"
                };
                
                console.log(computer1);
                Reflect.get(computer1, "processor");
                console.log(computer1.processor);
                
                /** end of Reflect.get */

                注意:如果該屬性是訪問器屬性,那么我們可以提供可選的第三個參數,它將是函數this內部的get值。

                讓我們看下面的代碼示例:

                隱藏   收縮 JavaScript Reflect API提供給開發人員的不同方法的演練   復制代碼
                /** start of Reflect.get with 3rd argument */
                
                const dinoComputer = {
                    processor: "Intel",
                    brand: "Dell",
                    operatingSystem: "windows 7"
                };
                
                Reflect.defineProperty(dinoComputer, "computerDetails", {
                    get: function() { 
                        return new String().concat(`*********Computer Details********\r\n`,
                                                   `****Processor: ${this.processor}***********\r\n`,
                                                   `****Brand: ${this.brand}*****************\r\n`,
                                                   `****Operating System: ${this.operatingSystem}*\r\n`);
                    }
                });
                
                console.log(dinoComputer);
                
                let oldComputer = Reflect.get(dinoComputer, "computerDetails", 
                { processor: "AMD K62", 
                  brand: "Clone", 
                  operatingSystem: "Windows XP" });
                
                console.log(oldComputer);
                
                /** end of Reflect.get with 3rd argument */

                輸出:

                JavaScript Reflect API提供給開發人員的不同方法的演練

                Reflect.getOwnPropertyDescriptor(目標名稱)

                此方法用于檢索對象屬性的描述符。Kinda易于實現。

                此方法有兩個參數:

                • target -第一個參數是目標/參考對象
                • name -第二個參數是對象的屬性名稱

                讓我們看下面的代碼示例:

                隱藏   復制代碼
                /** start of Reflect.getOwnPropertyDescriptor */
                
                const myDog = {
                    yourPet: true,
                    name: "Bruno"
                }
                
                const descriptor = Reflect.getOwnPropertyDescriptor(myDog, "name");
                
                console.log(descriptor.value); //output: Bruno
                console.log(descriptor.writable); //output: true
                console.log(descriptor.enumerable);//output: true
                console.log(descriptor.configurable); //output: true
                
                /** end of Reflect.getOwnPropertyDescriptor */

                Reflect.getPrototypeOf(目標)

                此方法用于檢索對象的內部原型,即對象的內部屬性的值。此方法只有一個參數,即目標/引用對象。

                需要注意的一點是,它與Object.getPrototypeOf()方法相同。

                讓我們看下面的代碼示例:

                隱藏   復制代碼
                /** start of  Reflect.getPrototypeOf*/
                
                const product = {
                    __proto__: {
                        category: {
                            id: "1",
                            name: "Electronics",
                            description: "Electronic devices"
                        }
                    }
                }
                
                const myCategoryResult = Reflect.getPrototypeOf(product);
                
                console.log(myCategoryResult.category);
                //output: { id: "1", name: "Electronics", description: "Electronic devices" }
                
                /** end of Reflect.getPrototypeOf */

                Reflect.setPrototypeOf(target,newProto)

                此方法用于設置對象的內部prototype(__proto__)屬性值。

                此方法有兩個參數:

                • target -第一個參數是目標/參考對象
                • newProto -第二個參數是對象的__proto__屬性值

                讓我們看下面的代碼示例:

                隱藏   復制代碼
                /**start of Reflect.setPrototypeOf */
                
                const anime = {
                    popularAnimeShow: "Voltes V"
                }
                
                Reflect.setPrototypeOf(anime, {
                    fullName: "Super Electromagnetic Machine Voltes V"
                });
                
                console.log(anime.__proto__.fullName); 
                //output: Super Electromagnetic Machine Voltes V
                
                /** end of Reflect.setPrototypeOf */    

                Reflect.has(目標,名稱)

                此方法用于檢查對象中是否存在屬性。true如果屬性存在,則返回,否則返回false。

                此方法有兩個參數:

                • target -第一個參數是目標/參考對象
                • name -第二個參數是對象的屬性名稱

                讓我們看下面的代碼示例:

                隱藏   復制代碼
                /** start of Reflect.has */
                
                const band = {
                    name: "EHeads",
                    songs: ['Ang Huling El Bimbo', 'With A Smile']
                }
                
                console.log(Reflect.has(band, "name")); //output: true
                console.log(Reflect.has(band, "songs")); //output: true
                console.log(Reflect.has(band, "producer")); //output: false
                
                /** end of Reflect.has */

                Reflect.isExtensible(目標)

                此方法用于檢查對象是否可擴展。換句話說,如果我們可以向對象添加新屬性。此方法只有一個參數,即目標/引用對象。

                讓我們看下面的代碼示例:

                隱藏   復制代碼
                /** start of Reflect.isExtensible */
                
                const problem = {
                    problemIs: "I'm in love with a college girl"
                }
                
                console.log(Reflect.isExtensible(problem)); //output: true
                
                Reflect.preventExtensions(problem);         //let's prevent this object to be extended.
                //This is the same as Object.preventExtensions(problem);
                
                console.log(Reflect.isExtensible(problem)); //output: false
                
                /** end of Reflect.isExtensible */
                
                /** start of Reflect.preventExtensions */

                要知道,我們還可以通過以下方法將對象標記為不可擴展:

                • Object.preventExtension()
                • Object.freeze()
                • Object.seal()

                Reflect.preventExtensions(目標)

                此方法用于將對象標記為不可擴展。它返回一個Boolean,指示是否成功。此方法只有一個參數,即目標/引用對象。

                讓我們看下面的代碼示例:

                隱藏   復制代碼
                /** start of Reflect.preventExtensions */
                
                const song = {
                    title: "Magasin",
                    band: "EHeads"
                }
                
                console.log(Reflect.isExtensible(song)); //output: true
                
                Reflect.preventExtensions(song);
                //This is the same as Object.preventExtensions(song);
                
                console.log(Reflect.isExtensible(song)); //output: false
                
                /** end of Reflect.preventExtensions */

                Reflect.ownKeys(目標)

                此方法返回對象的鍵屬性的數組。但是,它忽略了繼承的屬性(__proto__)。此方法只有一個參數,即目標/引用對象。

                讓我們看下面的代碼示例:

                隱藏   收縮 JavaScript Reflect API提供給開發人員的不同方法的演練   復制代碼
                /** start of Reflect.ownKeys */
                
                const currency = {
                    name: "USD",
                    symbol: "$",
                    globalCurrency: true,
                    __proto__: {
                        country: "USA"
                    }
                }
                
                const keys = Reflect.ownKeys(currency);
                
                console.log(keys); //output: ["name", "symbol", "globalCurrency"]
                console.log(keys.length);//output: 3
                
                /** Output:
                 *  name
                    symbol
                    globalCurrency
                 */
                
                keys.forEach(element => {
                    console.log(element);
                });
                
                /** end of Reflect.ownKeys */

                摘要

                在本文中,我們學習了使用該Reflect對象的JavaScript反射API 。不僅如此,我們還解決了Reflect對象必須提供的大多數方法,并且已經了解了如何在特定的場景中以不同的方式實現它?傮w而言,這篇文章介紹了JavaScript ReflectAPI。


                JavaScript Reflect API提供給開發人員的不同方法的演練 轉載http://www.hxslwl.com/appboke/48989.html

                技術博客閱讀排行

                最新文章

                久久人人97超碰人人澡,久久人人97超碰人人澡苹果,久久人人97超碰,国产福利第一视频在线播放,大陆国产国语对白视频,亚洲香蕉网久久综合影院