Pemahaman awal tentang kemahiran javascript object-oriented_javascript

Kata Pengantar

Objek berasaskan kelas: Kita semua tahu bahawa tanda yang jelas dalam bahasa berorientasikan objek ialah konsep kelas Melalui kelas, yang serupa dengan templat, kita boleh mencipta banyak objek dengan sifat dan kaedah yang sama. Walau bagaimanapun, tiada konsep kelas dalam ECMAScript, jadi secara semula jadi ia akan berbeza daripada objek dalam bahasa berasaskan kelas.

Objek dalam js: Koleksi atribut yang tidak tertib, yang boleh termasuk nilai asas, objek dan fungsi. Iaitu, objek dalam js ialah satu set nilai tanpa susunan tertentu Setiap sifat atau kaedah objek mempunyai nama sendiri, dan setiap nama sepadan dengan nilai.

Memahami objek

Cara mencipta objek

1 Cara paling mudah untuk mencipta objek ialah mencipta tika Object dan kemudian menambah sifat dan kaedah padanya.

Contohnya

  var person = new Object();
    person.name='谦龙';
    person.sex='男';
    person.sayNameAndSex=function(){
      console.log(this.name,this.sex)
    }
    person.sayNameAndSex(); // 谦龙 男

2 Gunakan bentuk literal objek

Contohnya

  var person={
    name:'谦龙',
    sex:'男',
    sayNameAndSex:function(){
      console.log(this.name,this.sex)
    }
  }
   person.sayNameAndSex(); // 谦龙 男

Jenis atribut

ECMAScript mempunyai dua jenis atribut data: atribut data dan atribut pengakses.

Atribut data

Atribut data mengandungi lokasi nilai data. Nilai boleh dibaca dan ditulis di lokasi ini. Terdapat empat sifat yang menggambarkan tingkah lakunya.

1.[[Boleh Dikonfigurasikan]]: Menunjukkan sama ada atribut boleh ditakrifkan semula dengan memadamkannya melalui pemadaman...Nilai lalai adalah benar

2.[[Enumerable]]: Menunjukkan sama ada atribut boleh dikembalikan melalui untuk dalam gelung...Lalai adalah benar

3.[[Boleh ditulis]]: Menunjukkan sama ada nilai atribut boleh diubah suai...Lalai adalah benar

4.[[Nilai]]: Menunjukkan nilai atribut ini lalai tidak ditentukan

Untuk mengubah suai sifat lalai harta, anda mesti menggunakan kaedah ES5 Object.defineProperty(), yang menerima tiga parameter: objek di mana harta itu terletak, nama harta dan objek yang menerangkan sifat sifat (boleh dikonfigurasikan, boleh dikira , boleh ditulis, nilai), menetapkan satu atau lebih daripadanya boleh mengubah suai ciri yang sepadan

DEMO

var person={};
Object.defineProperty(person,'name',{
 configurable:false,//表示不允许通过delete删除属性
 writable:false,//表示不允许重写
 ennumerable:false,//表示不允许通过for in遍历
 value:'谦龙'//设置该对象中属性的值
})
person.name='谦龙2';//尝试重新设置 结果不生效
delete person.name;//尝试删除 结果不生效
for(var attr in person){
 console.log(person[attr]);// false
}
console.log(person.name);//谦龙

Nota: Selepas menetapkan boleh dikonfigurasikan kepada palsu, ia tidak dibenarkan ditukar kepada benar lagi Selain itu, apabila memanggil kaedah Object.defineProperty(), nilai lalai bagi boleh dikonfigurasikan, boleh dikira dan boleh ditulis adalah palsu.

Sifat aksesori

Sifat aksesori tidak mengandungi nilai data ia mengandungi sepasang fungsi pengambil dan penetap (tetapi kedua-dua fungsi ini tidak diperlukan apabila membaca sifat akses, fungsi pengambil akan dipanggil sah Apabila menulis sifat pengakses, fungsi penetap dipanggil dan nilai baharu dihantar masuk. Fungsi ini bertanggungjawab untuk cara memproses data.

Sifat aksesori mempunyai ciri-ciri berikut

[[boleh dikonfigurasikan]] menunjukkan sama ada atribut boleh dipadamkan melalui pemadaman untuk menentukan atribut baharu

[[enumerable]] menunjukkan sama ada atribut yang dikembalikan boleh dilalui melalui gelung untuk dalam

[[dapat]] Fungsi dipanggil semasa membaca sifat, lalai tidak ditentukan

[[set]] Fungsi yang dipanggil semasa menulis fungsi Nilai lalai tidak ditentukan

Nota: Sifat pengakses tidak boleh ditakrifkan secara langsung dan mesti ditakrifkan melalui Object.defineProterty()

DEMO

 var book={
 _year:2015, //这里的下划线是常见的记号，表示只能通过对象的方法才能访问的属性
 edition:1
}
Object.defineProperty(book,'year',{
 get:function(){
  return this._year; //即默认通过 book.year获取值的时候 返回的是 boot._year的值
 },
 set: function (value) {//在对 boot.year设置值的时候 默认调用的方法 对数据进行处理
  var _year=this._year;
  if(value > _year){
   this._year=value;
   this.edition+=value-_year;
  }
 }
})
book.year = 2016;
console.log(book.year,book.edition); // 2016 2

Tentukan berbilang atribut

Kita boleh menambah berbilang sifat pada objek melalui kaedah Object.defineProperties() dalam ES5 Kaedah ini menerima dua parameter objek Parameter pertama ialah objek yang sifatnya akan ditambah dan diubah suai, dan parameter kedua ialah The atribut sepadan dengan atribut yang akan ditambah dan diubah suai dalam objek pertama.

DEMO

var book={};
Object.defineProperties(book,{
 _year:{
  value:2015,
  writable:true //注意这里设置成true 才可以 "写" 默认是false 
 },
 edition:{
  value:1,
  writable:true //注意这里设置成true 才可以 "写" 默认是false
 },
 year:{
  get:function(){
   return this._year;
  },
  set: function (value) {
   var _year=this._year;
   if(value > _year){
    this._year=value;
    this.edition+=value-_year;
   }
  }
 }
})
book.year=2016;
console.log(book.year,book.edition); // 2016 2

Baca sifat sifat objek

Menggunakan kaedah Object.getOwnPropertyDescriptor() dalam ES5, anda boleh mendapatkan deskriptor bagi harta yang diberikan.

Kaedah ini menerima dua parameter: objek tempat atribut terletak dan nama atribut deskriptor untuk dibaca. Apa yang dikembalikan ialah objek. Jika ia adalah atribut data, atribut yang dikembalikan boleh dikonfigurasikan, boleh dibilang, boleh ditulis, nilai.

DEMO

var book={};
Object.defineProperties(book,{
 _year:{
  value:2015,
  writable:true
 },
 edition:{
  value:1,
  writable:true
 },
 year:{
  get:function(){
   return this._year;
  },
  set: function (value) {
   var _year=this._year;
   if(value > _year){
    this._year=value;
    this.edition+=value-_year;
   }
  }
 }
})
//对象遍历函数
function showAllProperties(obj){
 for(var attr in obj){
  console.log(attr+':'+obj[attr]);
 }
}
var descriptor= Object.getOwnPropertyDescriptor(book,'_year');//数据属性
var descriptor2= Object.getOwnPropertyDescriptor(book,'year');//访问器属性
showAllProperties(descriptor);
console.log('============================');
showAllProperties(descriptor2);

Itu sahaja pengenalan di atas kepada pemahaman awal JavaScript berorientasikan objek Beri perhatian.