搜尋
首頁web前端js教程Javascript apply的巧妙用法和Object.defineProperty的擴充使用

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(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);
}
#設定的特性總結:

##value: 設定屬性的值

writable: 值是否可以重寫。 true | false

enumerable: 目標屬性是否可以列舉。 true | false

configurable: 目標屬性是否可以刪除或是否可以再次修改特性true | false

  • 存取器描述

  • 當使用訪問器描述屬性的特性的時候,允許設定以下特性屬性:
  • var obj = {};
    Object.defineProperty(obj,"newKey",{
        get:function (){} | undefined,
        set:function (value){} | undefined
        configurable: true | falseenumerable: true | false});
注意:當使用了getter或setter方法,不允許使用writable和value這兩個屬性

getter/setter
###當設定或取得物件的某個屬性的值的時候,可以提供getter/setter方法。 ############getter 是一種獲得屬性值的方法############setter是一種設定屬性值的方法。 ############在特性中使用get/set屬性來定義對應的方法。 ######
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
###

注意:get或set不是必須成對出現,任寫其一就可以。如果不設定方法,則get和set的預設值為undefined

相容性

#在ie8下只能在DOM物件上使用,嘗試在原生的物件上使用 Object.defineProperty()會報錯誤。

以上是Javascript apply的巧妙用法和Object.defineProperty的擴充使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
JavaScript是用C編寫的嗎?檢查證據JavaScript是用C編寫的嗎?檢查證據Apr 25, 2025 am 12:15 AM

是的,JavaScript的引擎核心是用C語言編寫的。 1)C語言提供了高效性能和底層控制,適合JavaScript引擎的開發。 2)以V8引擎為例,其核心用C 編寫,結合了C的效率和麵向對象特性。 3)JavaScript引擎的工作原理包括解析、編譯和執行,C語言在這些過程中發揮關鍵作用。

JavaScript的角色:使網絡交互和動態JavaScript的角色:使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心,因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容,2)通過DOMAPI操作網頁,3)支持複雜的交互效果如動畫和拖放,4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript:連接解釋C和JavaScript:連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1)C 代碼編譯成WebAssembly模塊,引入到JavaScript環境中,增強計算能力。 2)在遊戲開發中,C 處理物理引擎和圖形渲染,JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序:JavaScript的不同應用從網站到應用程序:JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中,JavaScript與HTML、CSS一起操作DOM,實現動態效果,並支持如jQuery、React等框架。 2)通過ReactNative和Ionic,JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行,支持高並發請求。

Python vs. JavaScript:比較用例和應用程序Python vs. JavaScript:比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化,JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色,使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺,用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用,支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。1)C 用于解析JavaScript源码并生成抽象语法树。2)C 负责生成和执行字节码。3)C 实现JIT编译器,在运行时优化和编译热点代码,显著提高JavaScript的执行效率。

JavaScript在行動中:現實世界中的示例和項目JavaScript在行動中:現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web:核心功能和用例JavaScript和Web:核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互;2)在用戶提交數據前進行客戶端驗證,提高用戶體驗;3)通過AJAX技術實現與服務器的無刷新通信。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器