Rumah > hujung hadapan web > tutorial js > Analisis terperinci berorientasikan objek JavaScript bagi deskriptor harta

Analisis terperinci berorientasikan objek JavaScript bagi deskriptor harta

WBOY
Lepaskan: 2022-05-27 17:29:37
ke hadapan
1754 orang telah melayarinya

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.

Analisis terperinci berorientasikan objek JavaScript bagi deskriptor harta

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

JavaScript berorientasikan objek - properties Descriptor

JavaScript sebenarnya menyokong pelbagai paradigma pengaturcaraan, termasuk pengaturcaraan berfungsi dan pengaturcaraan berorientasikan objek:

  • Objek dalam JavaScript direka bentuk sebagai set sifat tidak tertib Koleksi , seperti jadual hip-hop, terdiri daripada kunci dan nilai;
  • kunci ialah nama pengecam, nilai boleh menjadi sebarang jenis atau jenis objek atau fungsi lain; nilai adalah fungsi, maka kita boleh memanggilnya kaedah
  • objek
  • ;
  • 1.

Cara paling biasa untuk mencipta objek pada zaman awal ialah menggunakan kelas Objek, dan menggunakan kata kunci baharu untuk mencipta objek, dan kemudian menyimpan sifat atau kaedah ke dalam objek:
var obj = new Object()
obj.name = 'why'
console.log(obj.name, obj) // why { name: 'why' }
Salin selepas log masuk
Kemudian, demi kemudahan, ramai pembangun mencipta objek secara langsung dalam bentuk literal:
2. Atribut operasi objek - deskriptor atribut
// 字面量方式
var obj2 = { name: 'jam', age: '8' }
console.log(obj) // { name: 'jam', age: '8' }
Salin selepas log masuk

Sebelum ini atribut kami ditakrifkan secara langsung di dalam objek, atau ditambah terus pada objek

Tetapi dengan cara ini kami tidak boleh mengenakan beberapa sekatan pada atribut ini: contohnya, sama ada atribut ini boleh; dilalui

Bolehkah pemadaman dilalui apabila
dilalui? delect Jika kita ingin mempunyai kawalan operasi yang lebih tepat ke atas sesuatu atribut, maka saya boleh menggunakan for-indeskriptor 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

Deskriptor data ialah sifat dengan nilai, yang mungkin boleh ditulis atau Mungkin tidak boleh ditulis . Deskriptor data mempunyai nilai kunci pilihan berikut:

nilai: Nilai yang sepadan dengan atribut ini. Boleh berupa sebarang nilai JavaScript yang sah (nilai angka, objek, fungsi, dll.). Lalai tidak ditentukan.
  • boleh ditulis: Jika dan hanya jika boleh ditulis atribut ini adalah benar, nilai boleh ditukar oleh pengendali salinan. Lalai adalah palsu.
  • boleh dikonfigurasikan: Jika dan hanya jika boleh dikonfigurasikan atribut adalah benar, deskriptor atribut boleh ditukar dan atribut juga boleh dipadamkan daripada objek yang sepadan. Lalai adalah palsu.
  • enumerable: Jika dan hanya jika enumerable atribut adalah benar, atribut boleh muncul dalam atribut penghitungan objek. Lalai adalah palsu.
2.2.1 Dapatkan deskriptor hartanah Object.getOwnPropertyDescriptor()

Kaedah Object.getOwnPropertyDescriptor() mengembalikan harta yang sepadan dengan milik sendiri harta pada objek yang ditentukan.

Object.getOwnPropertyDescriptor(obj,prop)
Salin selepas log masuk
obj: objek sasaran untuk ditemui
  • prop: nama sifat dalam objek sasaran (Jenis rentetan).
  • Nilai pulangan: Jika sifat yang ditentukan wujud pada objek, kembalikan objek deskriptor sifatnya, jika tidak, kembalikan yang tidak ditentukan.
Nota: Jika parameter pertama kaedah ini bukan objek, ralat (TypeError) akan dilaporkan.

2.1.2 Tetapkan deskriptor sifat Object.defineProperty

Kaedah Object.defineProperty() akan mentakrifkan secara langsung sifat baharu pada objek, atau Mengubah suai sifat sedia ada objek dan mengembalikan objek.

Object.defineProperty(obj,prop,descriptor)
Salin selepas log masuk
obj: Objek di mana sifat akan ditakrifkan.
  • prop: Nama harta yang akan ditakrifkan atau diubah suai.
  • deskriptor: deskriptor atribut yang akan ditakrifkan atau diubah suai
  • Nilai pulangan: objek dihantar ke fungsi
如下示例代码展示了属性描述符的设置和获取
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}
Salin selepas log masuk
注意:通过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)  // 输出结果:河北
Salin selepas log masuk
Apabila boleh dikira: palsu, keluaran Hasilnya ialah nama umur
Apabila boleh dikira: benar, hasil keluaran ialah nama umur jantina

(3) boleh ditulis Ciri ini mengawal sama ada atribut boleh diberikan nilai (tulis nilai)

var obj = {
    name: 'jam',
    age: 8}Object.defineProperty(obj, 'sex ', {
    value: '男',
    // enumerable 配置该属性是否可以枚举
    enumerable: true})for (i in obj) {
    console.log(i)}
Salin selepas log masuk
Oleh kerana nilai boleh tulis adalah palsu, apabila skor diubah kepada 100, pengubahsuaian tidak berjaya dan output akhir ialah 80

2.1.3、同时设置多个属性描述符 Object.defineProperties

是不是感觉每次只能设置一个属性的属性描述符很繁琐,Object.defineProperties可以帮你解决问题。
Object.defineProperties()方法为对象定义一个或多个新属性或修改现有属性,并返回该对象。

Object.defineProperties(obj,props)
Salin selepas log masuk
  • 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' }
Salin selepas log masuk

2.2存取描述符

存取描述符是由getter-setter函数对描述的属性。存取描述符具有以下可选键值:

  • get:给属性提供getter的方法,如果没有getter则为undefined。当访问该属性时,该方法会被执行,方法执行时没有参数传入,但是会传入this对象。
  • set:给属性提供setter的方法,如果没有setter则为undefined。当属性值修改时,触发执行该方法。该方法将接受唯一参数,即该属性新的参数值。
  • configurable:当且仅当该属性的configurable为true时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为false。
  • enurnerable:当且仅当该属性的enurnerable为true时,该属性才能够出现在对象的枚举属性中。默认为false。

configurable 和 enurnerable 的使用与数据描述符中的一致,这里就不过多讲解了。
主要讲一下get 和 set 方法的使用

2.2.1 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的值")
}
Salin selepas log masuk

上述示例代码控制台打印结果如下:
Analisis terperinci berorientasikan objek JavaScript bagi deskriptor harta

【相关推荐: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!

Label berkaitan:
sumber:csdn.net
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan