Rumah >hujung hadapan web >tutorial js >Analisis terperinci berorientasikan objek JavaScript bagi deskriptor harta
Artikel ini membawa anda pengetahuan yang berkaitan tentang javascript, yang terutamanya memperkenalkan isu berkaitan tentang berorientasikan objek, termasuk deskriptor atribut, deskriptor data, deskriptor akses, dll. Mari lihat kandungan di bawah semoga ianya bermanfaat kepada semua.
[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]
JavaScript sebenarnya menyokong pelbagai paradigma pengaturcaraan, termasuk pengaturcaraan berfungsi dan pengaturcaraan berorientasikan objek:
var obj = new Object() obj.name = 'why' console.log(obj.name, obj) // why { name: 'why' }Kemudian, demi kemudahan, ramai pembangun mencipta objek secara langsung dalam bentuk literal:
// 字面量方式 var obj2 = { name: 'jam', age: '8' } console.log(obj) // { name: 'jam', age: '8' }
Bolehkah pemadaman dilalui apabila
dilalui? delect
Jika kita ingin mempunyai kawalan operasi yang lebih tepat ke atas sesuatu atribut, maka saya boleh menggunakan for-in
deskriptor atribut
. Atribut sesuatu objek boleh ditambah atau diubah suai dengan tepat melalui deskriptor atribut deskriptor atribut memerlukan penggunaan untuk menambah atau mengubah suai atribut. Object.defineProperty
2.1 Deskriptor Data
属性描述符分为两种:数据描述符和存取描述符
Object.getOwnPropertyDescriptor(obj,prop)obj: objek sasaran untuk ditemui
2.1.2 Tetapkan deskriptor sifat Object.defineProperty
Object.defineProperty(obj,prop,descriptor)obj: Objek di mana sifat akan ditakrifkan.
如下示例代码展示了属性描述符的设置和获取 var obj = { name: 'jam', age: 8 } Object.defineProperty(obj, 'job', { value: '律师' }) console.log(Object.getOwnPropertyDescriptor(obj, 'age')) // { value: 8, writable: true, enumerable: true, configurable: true } console.log(obj.job) // 律师 // 通过defineProperty新增的属性,该新属性是不可修改、不可删除以及不可枚举的 console.log(Object.getOwnPropertyDescriptor(obj, 'job')) // {value: '律师',writable: false,enumerable: false,configurable: false}
注意:通过defineProperty新增的属性,该新属性是不可修改、不可删除以及不可枚举的
(2) Sama ada boleh dikira boleh dikira dan dilalui var obj = { name: 'jam', age: 8 } Object.defineProperty(obj, 'address', { value: '河北', // configurable 该属性不可删除,更不可再次使用defineProperty修改属性描述符 configurable: false, }) delete obj.address // 想使用delete删除该属性 obj.address = '广州' // 想修改obj中的属性address值为广州 console.log(obj.address) // 输出结果:河北Apabila boleh dikira: palsu, keluaran Hasilnya ialah nama umur
Apabila boleh dikira: benar, hasil keluaran ialah nama umur jantina
var obj = { name: 'jam', age: 8}Object.defineProperty(obj, 'sex ', { value: '男', // enumerable 配置该属性是否可以枚举 enumerable: true})for (i in obj) { console.log(i)}
Oleh kerana nilai boleh tulis adalah palsu, apabila skor diubah kepada 100, pengubahsuaian tidak berjaya dan output akhir ialah 80
是不是感觉每次只能设置一个属性的属性描述符很繁琐,Object.defineProperties可以帮你解决问题。
Object.defineProperties()方法为对象定义一个或多个新属性或修改现有属性,并返回该对象。
Object.defineProperties(obj,props)
示例代码如下:
var obj = { name: 'jam',}Object.defineProperties(obj, { 'age': { value: 28, writable: true, configurable: false, enumerable: true }, 'job': { value: '律师', writable: true, configurable: false, enumerable: true }, 'sex': { value: '男', writable: false, configurable: false, enumerable: true }, 'height': { value: '1.8 m', writable: false, configurable: false, enumerable: true }})console.log(obj) // name: 'jam', age: 28, job: '律师', sex: '男', height: '1.8m' }
存取描述符是由getter-setter函数对描述的属性。存取描述符具有以下可选键值:
configurable 和 enurnerable 的使用与数据描述符中的一致,这里就不过多讲解了。
主要讲一下get 和 set 方法的使用
var obj = { name: 'jam', age: 8, _address: '河北' } // 存取描述符的使用场景 // 1.隐藏某一个私有属性被希望直接被外界使用和赋值 // 2.如果我们希望解惑某一个属性它访问和设置值的过程时,也会使用存储属性描述符 Object.defineProperty(obj, 'address', { enumerable: true, configurable: true, get: function () { foo() return this._address }, set: function (value) { bar() this._address = value } }) function foo () { console.log("截获了一次address的值") } function bar () { console.log("设置了一次address的值") }
上述示例代码控制台打印结果如下:
【相关推荐:javascript视频教程、web前端】
Atas ialah kandungan terperinci Analisis terperinci berorientasikan objek JavaScript bagi deskriptor harta. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!