This article mainly shares with you the detailed explanation of delete operator and internal attribute examples in js. Before explaining Configurable, let’s first look at an interview question:

a = 1;console.log( window.a ); 
// 1console.log( delete window.a ); 
// trueconsole.log( window.a ); 
// undefinedvar b = 2;console.log( window.b ); 
// 2console.log( delete window.b ); 
// falseconsole.log( window.b ); // 2

From the above question, we can see two The difference: when a variable is not declared using var, it can be deleted using the delete keyword, and the value when obtained again will be undefined; when a variable declared using var is deleted, it cannot be deleted using delete, and the value when obtained again is still 2. .

1. delete operator

When you use delete to delete a variable or attribute, it returns true if the deletion is successful, otherwise it returns false. As in the above example, if delete cannot delete variable a, it returns false; if delete can successfully delete variable b, it returns true.

In addition to the above two situations, there are various other commonly used variables that can be deleted by delete, and some that cannot be deleted. Let’s not worry about why such a result occurs when deleting these variables. Here we only look at its return value:

Delete one element in the delete array:

// 使用for~in是循環(huán)不到的，直接忽略到該元素
// 使用for()可以得到該元素，但是值是undefinedvar 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]

Delete a variable of function type :

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

Delete function.length, which is the number of formal parameters obtained:

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

Delete common variables:

console.log( delete NaN );     
 // false，刪除失敗console.log( delete undefined );
 // falseconsole.log( delete Infinity ); 
 // falseconsole.log( delete null );     
 // true，刪除成功

Delete the prototype, rather than deleting the prototype. Attributes:

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

When deleting the length of arrays and strings:

var arr = [1, 2, 3, 4];console.log( arr.length );          
// 4console.log( delete arr.length );   
// false，刪除失敗console.log( arr.length );          
// 4var str = 'abcdefg';console.log( str.length );         
 // 7console.log( delete str.length );   
 // false，刪除失敗console.log( str.length );         
  // 7

When deleting attributes in obj:

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

When deleting attributes in instance objects, from the following It can be seen from the output that when you use delete to delete attributes, only the attributes of the instance object itself are deleted, and the attributes on the prototype cannot be deleted. Even if you delete them again, they cannot be deleted; if you want to delete the attributes of the attributes on the prototype or The method can only be: delete Person.prototype.name:

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

2. js internal attributes

In the above example, some variables or attributes can be deleted successfully, while others Variables or attributes cannot be deleted, so what determines whether this variable or attribute can be deleted.

ECMA-262 5th Edition defines the characteristics of JS object properties (for JS engines, not directly accessible from the outside). There are two kinds of properties in ECMAScript: data properties and accessor properties.

2.1 Data attribute

A data attribute refers to a location containing a data value where the value can be read or written. This attribute has 4 properties that describe its behavior:

. [[configurable]]: Indicates whether it can be deleted and redefined using the delete operator, or whether it can be modified as an accessor attribute. The default is true;
. [[Enumberable]]: Indicates whether the attribute can be returned through a for-in loop. Default true;
. [[Writable]]: Indicates whether the value of the attribute can be modified. Default true;
. [[Value]]: Contains the data value of this attribute. This value is read/written. The default is undefined; for example, the name attribute is defined in the instance object Person above, and its value is 'wenzi'. Modifications to this value are done at this location.

To modify the default characteristics of the object attributes (the default is true) ), you can call the Object.defineProperty() method, which receives three parameters: the object where the property is located, the property name and a descriptor object (must be: configurable, enumberable, writable and value, one or more values ??can be set).

is as follows:

var person = {};Object.defineProperty(person, 'name', {
    configurable: false,    // 不可刪除，且不能修改為訪問器屬性
    writable: false,        // 不可修改
    value: 'wenzi'          // name的值為wenzi});console.log( person.name);          // wenziconsole.log( delete person.name );  // false，無法刪除person.name = 'lily';console.log( person.name );         // wenzi

It can be seen that neither delete nor reset the value of person.name takes effect. This is because calling the defineProperty function modifies the characteristics of the object properties; it is worth noting that once If configurable is set to false, you can no longer use defineProperty to modify it to true (execution will report an error: Uncaught TypeError: Cannot redefine property: name);

2.2 Accessor properties

It mainly includes A pair of getter and setter functions. When reading the accessor property, the getter will be called to return a valid value; when the accessor property is written, the setter will be called to write the new value; this property has the following 4 characteristics:

. [[Configurable]]: Whether the attribute can be deleted and redefined through the delete operator;
. [[Numberable]]: Whether the attribute can be found through a for-in loop;
. [[Get]]: Automatically called when reading properties, default: undefined;
. [[Set]]: Automatically called when writing properties, default: undefined;

Accessor properties cannot be defined directly and must use defineProperty() To define, as follows:

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

However, there is still one thing that needs extra attention. When setting properties with the Object.defineProperty() method, you cannot declare accessor properties (set and get) and data properties (writable or value) at the same time. . This means that if a property has a writable or value attribute set, then this property cannot declare get or set, and vice versa.

如若像下面的方式進(jìn)行定義，訪問器屬性和數(shù)據(jù)屬性同時存在：

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

上面的代碼看起來貌似是沒有什么問題，但是真正執(zhí)行時會報錯，報錯如下：

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

對于數(shù)據(jù)屬性，可以取得：configurable,enumberable,writable和value；

對于訪問器屬性，可以取得：configurable,enumberable,get和set。

由此我們可知：一個變量或?qū)傩允欠窨梢员粍h除，是由其內(nèi)部屬性Configurable進(jìn)行控制的，若Configurable為true，則該變量或?qū)傩钥梢员粍h除，否則不能被刪除。

可是我們應(yīng)該怎么獲取這個Configurable值呢，總不能用delete試試能不能刪除吧。有辦法滴??！

2.3 獲取內(nèi)部屬性

ES5為我們提供了Object.getOwnPropertyDescriptor(object, property)來獲取內(nèi)部屬性。

如：

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

通過Object.getOwnPropertyDescriptor(object, property)我們能夠獲取到4個內(nèi)部屬性，configurable控制著變量或?qū)傩允欠窨杀粍h除。這個例子中，person.name的configurable是true，則說明是可以被刪除的：

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

我們再回到最開始的那個面試題：

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，不能刪除

跟我們使用delete操作刪除變量時產(chǎn)生的結(jié)果是一樣的。

相關(guān)推薦：

JavaScript?delete操作符應(yīng)用實(shí)例_javascript技巧

The above is the detailed content of Detailed explanation of delete operator and internal attribute instances in js. For more information, please follow other related articles on the PHP Chinese website!