首頁 > web前端 > js教程 > 深入理解js對象

深入理解js對象

小云云
發布: 2018-03-28 16:57:39
原創
1424 人瀏覽過


本文主要和大家分享深入理解js對象,主要以程式碼結合文字和大家分享,希望能幫助大家。

物件建立

直接量:let obj={x:1};
//具有prototype属性new方式:let obj=new Array();
//具有protope属性Object方法:Object.create(原型);
登入後複製

物件屬性的查詢與設定

let obj={x:1,y:2};
obj.x//1obj["y"]//2
登入後複製

ps:查詢一個物件不存在的屬性不會報錯,如果在物件本身的屬性或繼承的屬性中均未找到目標屬性,屬性存取表達式傳回undefined.但是如果查詢一個不存在的物件,則會報錯.

刪除物件屬性

let book={name:"黑洞",author:"nd"};delete book.name;
//对象不存在name属性delete book[author];
//对象不存在author属性
登入後複製

delete:只是斷開屬性與物件的聯繫,只能刪除原型物件上的自有屬性.

檢測物件屬性

//继承const inherit=p=>{    if(p==null)throw TypeError();//p是一个对象但不能是null
    if(Object.create)return Object.create(p);//如果Object.create()存在直接使用它
    let t=typeof p;//进一步检验
    if(t!="object"&&t!=="function")throw TypeError();//检验
    function f(){};//定义一个空的构造函数
    f.prototype=p;//将其原型属性设置为p
    return new f();//}//in运算符(对象的自有属性和继承属性)let o={x:1}
console.log("x" in o)
console.log("y" in o)
console.log("toString" in o)//hasOwnProperty()(对象的自有属性(包含不可枚举属性))console.log(o.hasOwnProperty("x"))
console.log(o.hasOwnProperty("y"))
console.log(o.hasOwnProperty("toString"))//propertyIsEnumerable()(对象的自有属性且可枚举)let obj=inherit({y:2})
obj.x=1;
console.log(obj.propertyIsEnumerable("x"));
console.log(obj.propertyIsEnumerable("y")
登入後複製
登入後複製

列舉物件屬性

let obj=Object.create({x:1});//for/in
//(所有可枚举的自有属性与继承属性)for(item in obj){   
 //属性名赋值给循环变量}//Object.keys()
 //(对象的可枚举自有属性)Object.keys(obj)
 //返回一个数组,数组是由对象的属性组成的
 //Object.getOwnPropertyName()
 //(所有对象的自有属性,包括不可枚举属性)Object.getOwnPropertyName(obj)
登入後複製

Js中的資料屬性和訪問器屬性

在javaScript中,物件的屬性分為兩種:資料屬性和存取器屬性。

1.資料屬性

1.資料屬性:它包含的是資料值的位置,在這可以對資料值進行讀寫。

2.資料屬性包含四個特性,分別是:

configurable:表示能否透過delete刪除屬性從而重新定義屬性,能否修改屬性的特性,或能否把屬性修改為存取器屬性,預設為true

enumerable:表示能否透過for-in循環回傳屬性

writable:表示能否修改屬性的值

value:包含該屬性的資料值。預設為undefined

如下面這個例子:建立一個物件person,列印出name屬性的特性的預設值

let person={name:"johe",age:12};
console.log(Object.getOwnPropertyDescriptor(person,"name"))
登入後複製
登入後複製

3.修改資料屬性的預設特性

修改屬性屬性的預設特性要用到一個方法:Object.defineProperty()方法,這個方法有三個參數:屬性所在的對象,屬性名,一個描述符物件。

透過這個方法,我們可以來修改一個屬性的這4個特性。

如我們對剛剛上面的penson物件裡面的name屬性的特性進行修改:

    //修改数据属性
    let person={name:"johe",age:12};
    Object.defineProperty(person,"name",{value:"aa",writable:false,enumerable:false,configurable:false})
登入後複製
登入後複製

2.存取器屬性

1.存取器屬性:這個屬性不包含資料值,包含的是一對get和set方法,在讀寫存取器屬性時,就是透過這兩個方法來進行操作處理的。

2.存取器屬性包含的四個特性:

configurable:表示能否透過delete刪除屬性從而重新定義屬性,能否修改屬性的特性,或能否將屬性修改為存取器屬性,預設為false

enumerable:表示能否透過for-in循環返回屬性,預設為false

Get:在讀取屬性時呼叫的函數,預設值為undefined

Set:寫入屬性時所呼叫的函數,預設值為undefined

這裡要注意下,存取器屬性不能直接定義,要透過Object.defineProperty()這個方法來定義。

下面來個例子,建立一個訪問器物件book,接著列印其year存取器屬性的特性描述並對其方法進行測試列印:
深入理解js對象
執行結果:
深入理解js對象
其他兩個特性configurable,enumerable的測試方式可以參考資料屬性的。不過在這特別說明下,關於configurable這個特性,因為訪問器屬性裡面這個

特性預設值為false,如果程式後面需要對該屬性進行delete操作等,那就在定義存取器屬性時,將這個特性設為true,不然這個會導致後面一些報錯的問題。

物件的三個屬性

1.原型屬性
Object.getPrototypeOf()可以查看物件的原型(不建議使用)
i'sPrototyOf()(推薦使用)
2.類別屬性
適應classof()來判斷物件的類別屬性
3.可拓展性
Object.esExtensible()

序列化物件

let o={x:1,y:{z:[false,null,'']}};let s=JSON.stringfy(o);let p=JSON.parse(s);
登入後複製
登入後複製

           

物件建立

直接量:let obj={x:1};//具有prototype属性new方式:let obj=new Array();//具有protope属性Object方法:Object.create(原型);//
登入後複製

物件屬性的查詢與設定

let obj={x:1,y:2};
obj.x//1obj["y"]//2
登入後複製

ps:查詢一個物件不存在的屬性不會報錯,如果在物件本身的屬性或繼承的屬性中均未找到目標屬性,屬性存取表達式傳回undefined.但是如果查詢一個不存在的物件,則會報錯.

刪除物件屬性

let book={name:"黑洞",author:"nd"};delete book.name;//对象不存在name属性delete book[author];//对象不存在author属性
登入後複製

delete:只是斷開屬性與物件的連結,只能刪除原型物件上的自有屬性.

偵測物件屬性

//继承const inherit=p=>{    if(p==null)throw TypeError();//p是一个对象但不能是null
    if(Object.create)return Object.create(p);//如果Object.create()存在直接使用它
    let t=typeof p;//进一步检验
    if(t!="object"&&t!=="function")throw TypeError();//检验
    function f(){};//定义一个空的构造函数
    f.prototype=p;//将其原型属性设置为p
    return new f();//}//in运算符(对象的自有属性和继承属性)let o={x:1}
console.log("x" in o)
console.log("y" in o)
console.log("toString" in o)//hasOwnProperty()(对象的自有属性(包含不可枚举属性))console.log(o.hasOwnProperty("x"))
console.log(o.hasOwnProperty("y"))
console.log(o.hasOwnProperty("toString"))//propertyIsEnumerable()(对象的自有属性且可枚举)let obj=inherit({y:2})
obj.x=1;
console.log(obj.propertyIsEnumerable("x"));
console.log(obj.propertyIsEnumerable("y")
登入後複製
登入後複製

列舉物件屬性

let obj=Object.create({x:1});//for/in//(所有可枚举的自有属性与继承属性)for(item in obj){    //属性名赋值给循环变量}//Object.keys()//(对象的可枚举自有属性)Object.keys(obj)//返回一个数组,数组是由对象的属性组成的//Object.getOwnPropertyName()//(所有对象的自有属性,包括不可枚举属性)Object.getOwnPropertyName(obj)
登入後複製

Js中的數據屬性和存取器屬性

在javaScript中,物件的屬性分為兩種類型:資料屬性和存取器屬性。

1.資料屬性

1.資料屬性:它包含的是資料值的位置,在這可以對資料值進行讀寫。

2.資料屬性包含四個特性,分別是:

configurable:表示能否透過delete刪除屬性從而重新定義屬性,能否修改屬性的特性,或能否把屬性修改為存取器屬性,預設為true

enumerable:表示能否透過for-in循環回傳屬性

writable:表示能否修改屬性的值

value:包含該屬性的資料值。預設為undefined

如下面这个例子:创建一个对象person,打印出name属性的特性的默认值

let person={name:"johe",age:12};
console.log(Object.getOwnPropertyDescriptor(person,"name"))
登入後複製
登入後複製

3.修改数据属性的默认特性

修改属性属性的默认特性要用到一个方法:Object.defineProperty()方法,这个方法有三个参数:属性所在的对象,属性名,一个描述符对象。

通过这个方法,我们可以来修改一个属性的这4个特性。

如我们对刚刚上面的penson对象里面的name属性的特性进行修改:

    //修改数据属性
    let person={name:"johe",age:12};
    Object.defineProperty(person,"name",{value:"aa",writable:false,enumerable:false,configurable:false})
登入後複製
登入後複製

2.访问器属性

1.访问器属性:这个属性不包含数据值,包含的是一对get和set方法,在读写访问器属性时,就是通过这两个方法来进行操作处理的。

2.访问器属性包含的四个特性:

configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或能否把属性修改为访问器属性,默认为false

enumerable:表示能否通过for-in循环返回属性,默认为false

Get:在读取属性时调用的函数,默认值为undefined

Set:在写入属性时调用的函数,默认值为undefined

这里要注意下,访问器属性不能直接定义,要通过Object.defineProperty()这个方法来定义。

下面来个例子,创建一个访问器对象book,接着打印出其year访问器属性的特性描述并对其方法进行测试打印:
深入理解js對象
执行结果:
深入理解js對象
其他两个特性configurable,enumerable的测试方式可以参照数据属性的。不过在这特别说明下,关于configurable这个特性,因为访问器属性里面这个

特性默认值为false,如果程序后面需要对该属性进行delete操作等,那就在定义访问器属性时,将这个特性设置为true,不然这个会导致后面一些报错的问题。

对象的三个属性

1.原型属性
Object.getPrototypeOf()可以查看对象的原型 (不推荐使用)
i’sPrototyOf()(推荐使用)
2.类属性
适应classof()来判断对象的类属性
3.可拓展性
Object.esExtensible()

序列化对象

let o={x:1,y:{z:[false,null,'']}};let s=JSON.stringfy(o);let p=JSON.parse(s);
登入後複製
登入後複製

以上是深入理解js對象的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板