Pengenalan kepada atribut dalaman dan padam operator dalam kemahiran js

Sebelum menerangkan Configurable, mari kita lihat dahulu soalan temu bual:

a = 1;
console.log( window.a ); // 1
console.log( delete window.a ); // true
console.log( window.a ); // undefined

var b = 2;
console.log( window.b ); // 2
console.log( delete window.b ); // false
console.log( window.b ); // 2

Salin selepas log masuk

Daripada soalan di atas, kita dapat melihat dua perbezaan: apabila pembolehubah tidak diisytiharkan menggunakan var, ia boleh dipadamkan menggunakan kata kunci padam, dan nilai akan tidak ditentukan apabila diperoleh semula apabila pembolehubah diisytiharkan menggunakan var, Ia tidak boleh dipadam menggunakan padam, dan nilainya masih 2 apabila diambil.

1. padam operator

Apabila anda menggunakan padam untuk memadam pembolehubah atau atribut, ia mengembalikan benar jika pemadaman berjaya, jika tidak ia mengembalikan palsu. Seperti dalam contoh di atas, jika padam tidak boleh memadam pembolehubah a, ia akan mengembalikan palsu jika pemadaman berjaya memadam pembolehubah b, ia akan kembali benar.

Selain dua situasi di atas, terdapat pelbagai pembolehubah lain yang biasa digunakan yang boleh dipadamkan dengan pemadaman, dan beberapa yang tidak boleh dipadamkan. Jangan risau mengapa padam menghasilkan hasil seperti itu di sini kita hanya melihat nilai pulangannya:

Padamkan elemen dalam tatasusunan padam:

// 使用for~in是循环不到的，直接忽略到该元素
// 使用for()可以得到该元素，但是值是undefined
var arr = [1, 2, 3, 4];
console.log( arr );     	// [1, 2, 3, 4]
console.log( delete arr[2] );	// true，删除成功
console.log( arr );      	// [1, 2, undefined, 4]

Salin selepas log masuk

Padam pembolehubah jenis fungsi:

// chrome 不能删除；火狐可以删除
function func(){
}
console.log( func );
console.log( delete func );
console.log( func );

Salin selepas log masuk

Padam fungsi.panjang, iaitu bilangan parameter formal yang diperoleh:

function func1(a, b){
}
console.log( func1.length );   	// 2
console.log( delete func1.length );	// true，删除成功
console.log( func1.length );   	// 0

Salin selepas log masuk

Padamkan pembolehubah yang biasa digunakan:

console.log( delete NaN );  	// false，删除失败
console.log( delete undefined );// false
console.log( delete Infinity );	// false
console.log( delete null );  	// true，删除成功

Salin selepas log masuk

Padamkan prototaip dan bukannya memadamkan atribut pada prototaip:

function Person(){
}
Person.prototype.name = "蚊子";
console.log( delete Person.prototype );	// false，无法删除
console.log( delete Object.prototype );	// false

Salin selepas log masuk

Apabila memadamkan panjang tatasusunan dan rentetan:

var arr = [1, 2, 3, 4];
console.log( arr.length );    	// 4
console.log( delete arr.length ); 	// false，删除失败
console.log( arr.length );    	// 4

var str = 'abcdefg';
console.log( str.length );    	// 7
console.log( delete str.length ); 	// false，删除失败
console.log( str.length );    	// 7

Salin selepas log masuk

Apabila memadamkan atribut dalam obj:

var obj = {name:'wenzi', age:25};
console.log( obj.name );   	// wenzi
console.log( delete obj.name );	// true，删除成功
console.log( obj.name );   	// undefined
console.log( obj );      	// { age:25 }

Salin selepas log masuk

Apabila memadamkan atribut dalam objek contoh, anda boleh melihat daripada output berikut bahawa apabila anda menggunakan padam untuk memadamkan atribut, hanya atribut objek contoh itu sendiri dipadamkan dan atribut pada prototaip tidak boleh dipadamkan anda memadamkannya sekali lagi, ia masih akan dipadamkan. Ia tidak boleh dipadamkan jika anda ingin memadamkan atribut atau kaedah atribut pada prototaip, anda hanya boleh memadamkannya: delete Person.prototype.name:

function Person(){
  this.name = 'wenzi';
}
Person.prototype.name = '蚊子';
var student = new Person();
console.log( student.name );    // wenzi
console.log( delete student.name ); // true，删除成功
console.log( student.name );    // 蚊子
console.log( delete student.name ); // true
console.log( student.name );    // 蚊子
console.log( delete Person.prototype.name );// true，删除成功
console.log( student.name );    // undefined

Salin selepas log masuk

2. Sifat dalaman js

Dalam contoh di atas, beberapa pembolehubah atau atribut boleh dipadamkan dengan jayanya, manakala yang lain tidak boleh dipadamkan Jadi apakah yang menentukan sama ada pembolehubah atau atribut ini boleh dipadamkan.

ECMA-262 5th Edition mentakrifkan ciri ciri objek JS (digunakan dalam enjin JS, tidak boleh diakses secara langsung dari luar). Terdapat dua jenis sifat dalam ECMAScript: sifat data dan sifat aksesor.

2.1 Atribut data

Atribut data merujuk kepada lokasi yang mengandungi nilai data yang nilainya boleh dibaca atau ditulis Atribut ini mempunyai 4 sifat yang menerangkan kelakuannya:

[[boleh dikonfigurasikan]]: Menunjukkan sama ada ia boleh dipadamkan dan ditakrifkan semula menggunakan operator padam, atau sama ada ia boleh diubah suai sebagai atribut pengakses. Lalai adalah benar;
[[Enumberable]]: Menunjukkan sama ada atribut boleh dikembalikan melalui gelung untuk masuk. Lalai benar;
[[Boleh ditulis]]: Menunjukkan sama ada nilai atribut boleh diubah suai. Lalai benar;
[[Nilai]]: Mengandungi nilai data atribut ini. Nilai ini dibaca/ditulis. Lalai tidak ditentukan; contohnya, atribut nama ditakrifkan dalam objek instance di atas, dan nilainya ialah 'wenzi'

Untuk mengubah suai ciri lalai sifat objek (lalai adalah benar), anda boleh memanggil kaedah Object.defineProperty(), yang menerima tiga parameter: objek di mana harta itu terletak, nama harta dan objek deskriptor ( mestilah: boleh dikonfigurasikan, boleh dibilang, boleh ditulis dan nilai, satu atau lebih nilai boleh ditetapkan).

adalah seperti berikut:

var person = {};
Object.defineProperty(person, 'name', {
  configurable: false,	// 不可删除，且不能修改为访问器属性
  writable: false,		// 不可修改
  value: 'wenzi'			// name的值为wenzi
});
console.log( person.name);			// wenzi
console.log( delete person.name );	// false，无法删除
person.name = 'lily';
console.log( person.name );			// wenzi

Salin selepas log masuk

Ia boleh dilihat bahawa tidak memadam atau menetapkan semula nilai person.name berkuat kuasa Ini kerana memanggil fungsi defineProperty mengubah suai ciri-ciri objek perlu diperhatikan bahawa apabila boleh dikonfigurasikan ditetapkan kepada palsu, defineProperty boleh tidak lagi digunakan untuk Ubah suai kepada benar (pelaksanaan akan melaporkan ralat: Ralat Jenis Tidak Ditangkap: Tidak boleh mentakrifkan semula sifat: nama);

2.2 Sifat pengakses

Ia terutamanya termasuk sepasang fungsi getter dan setter Apabila membaca atribut accessor, getter akan dipanggil untuk mengembalikan nilai yang sah apabila atribut accessor ditulis, setter akan dipanggil untuk menulis nilai baru; atribut mempunyai 4 ciri berikut :

Sifat aksesori tidak boleh ditakrifkan secara langsung dan mesti ditakrifkan menggunakan defineProperty(), seperti berikut:

var person = {
  _age: 18
};
Object.defineProperty(person, 'isAdult', {
	Configurable : false,
  get: function () {
    if (this._age >= 18) {
      return true;
    } else {
      return false;
    }
  }
});
console.log( person.isAdult ); // true

Salin selepas log masuk

Walau bagaimanapun, masih terdapat satu perkara yang memerlukan perhatian tambahan Apabila menetapkan sifat dengan kaedah Object.defineProperty(), sifat pengakses (set dan dapatkan) dan sifat data (boleh ditulis atau nilai) tidak boleh diisytiharkan pada masa yang sama. Ini bermakna jika sesuatu harta mempunyai set atribut boleh tulis atau nilai, maka sifat ini tidak boleh mengisytiharkan get atau set, dan begitu juga sebaliknya.

Jika ditakrifkan seperti berikut, sifat pengakses dan sifat data wujud pada masa yang sama:

var o = {};
Object.defineProperty(o, 'name', {
  value: 'wenzi',
  set: function(name) {
    myName = name;
  },
  get: function() {
    return myName;
  }
});

Salin selepas log masuk

上面的代码看起来貌似是没有什么问题，但是真正执行时会报错，报错如下：

Uncaught TypeError: Invalid property. A property cannot both have accessors and be writable or have a value

对于数据属性，可以取得：configurable,enumberable,writable和value；

对于访问器属性，可以取得：configurable,enumberable,get和set。

由此我们可知：一个变量或属性是否可以被删除，是由其内部属性Configurable进行控制的，若Configurable为true，则该变量或属性可以被删除，否则不能被删除。

可是我们应该怎么获取这个Configurable值呢，总不能用delete试试能不能删除吧。有办法滴！！

2.3 获取内部属性

ES5为我们提供了Object.getOwnPropertyDescriptor(object, property)来获取内部属性。

如：

var person = {name:'wenzi'};
var desp = Object.getOwnPropertyDescriptor(person, 'name'); // person中的name属性
console.log( desp );	// {value: "wenzi", writable: true, enumerable: true, configurable: true}

Salin selepas log masuk

通过Object.getOwnPropertyDescriptor(object, property)我们能够获取到4个内部属性，configurable控制着变量或属性是否可被删除。这个例子中，person.name的configurable是true，则说明是可以被删除的：

console.log( person.name );			// wenzi
console.log( delete person.name );	// true，删除成功
console.log( person.name );			// undefined

Salin selepas log masuk

我们再回到最开始的那个面试题：

a = 1;
var desp = Object.getOwnPropertyDescriptor(window, 'a');
console.log( desp.configurable ); 	// true，可以删除

var b = 2;
var desp = Object.getOwnPropertyDescriptor(window, 'b');
console.log( desp.configurable ); 	// false，不能删除

Salin selepas log masuk

跟我们使用delete操作删除变量时产生的结果是一样的。