当前位置:小鱼儿玄机二站 > 关于计算机 > js中的内部属性与delete操作符介绍,js中的内部属

js中的内部属性与delete操作符介绍,js中的内部属

文章作者:关于计算机 上传时间:2019-09-05

在讲解Configurable此前,大家率先来看一道面试题:

js中的内部属性与delete操作符

在执教Configurable以前,大家先是来看一道面试题:

 

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

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

 

从地点的那道题能够看来八个的区分:在未曾行使var证明变量时,使用delete关键词是无法展开删除的,依旧能收获到变量a的值;在使用var申明的变量,就能够应用delete删除,再获得时值就是undefined了。

 

  1. delete操作符

行使delete删除变量或性质时,删除成功再次来到true,不然重回false。如下边包车型地铁例证中,delete不可能删除变量a时,则赶回false;而delete能学有所成删除变量b,则赶回true。

 

除去上述的三种情形,还可能有任何的各个常用变量也会有能被delete删除的,也是有不可能被剔除的。大家先不管delete那些变量时,为何会生出那样的结果,这里只看他的重返值:

 

去除delete数组中当中的多少个成分:

 

// 使用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]

 

删除function类型的变量:

 

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

 

去除function.length,该length是赢得形参的个数:

 

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

 

删去常用变量:

 

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

 

剔除prototype,并非去除prototype上的脾性:

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

 

删去数组和字符串的length时:

 

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

 

剔除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 }

 

剔除实例对象中的属性时,从以下的输出结果能够见到,使用delete删除属性时,删除的独自是实例对象自己的质量,而不能够去除prototype上的习性,纵然再删三回也是去除掉不的;若要删除prototype上的质量的质量或艺术,只好是: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

 

  1. js的个中属性

在上头的例证中,有的变量或质量能够删除成功,而部分变量或质量则无从进展删除,那是怎么着决定以此变量或属质量否被剔除呢。

 

ECMA-262第5版定义了JS对象属性中特征(用于JS引擎,外部无法直接待上访问)。ECMAScript中有二种属性:数据属性和做客器属性。

 

2.1 数据属性

多少属性指包罗二个数据值的职责,可在该职位读取或写入值,该属性有4个供述其一举一动的表征:

 

要修改对象属性的暗中同意特征(暗许都为true),可调用Object.defineProperty()方法,它接受四个参数:属性所在对象,属性名和一个陈诉符对象(必得是:configurable、enumberable、writable和value,可设置三个或七个值)。

 

如下:

 

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

 

能够看到,delete及重新恢复设置person.name的值都不曾收效,那就是因为调用defineProperty函数修改了对象属性的特征;值得注意的是一旦将configurable设置为false,则无从再利用defineProperty将其修改为true(实行会报错:Uncaught TypeError: Cannot redefine property: name);

 

2.2 访谈器属性

它根本包罗一对getter和setter函数,在读取访谈器属性时,会调用getter重返有效值;写入访谈器属性时,调用setter,写入新值;该属性有以下4特性格:

 

做客器属性无法一向定义,必得选用defineProperty()来定义,如下:

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

 

然则依旧有某个亟需额外注意一下,Object.defineProperty()方法设置属性时,不可能并且注解访谈器属性(set和get)和多少属性(writable大概value)。意思正是,有些属性设置了writable只怕value属性,那么这天天性就不可能宣称get和set了,反之亦然。

 

如若像上边包车型大巴办法张开定义,访问器属性和数量属性同有的时候间存在:

 

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

 

地点的代码看起来貌似是未有啥难点,但是真正实施时会报错,报错如下:

 

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}

由此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

 

咱俩再回到最开头的老大面试题:

 

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操作删除变量时发生的结果是一样的。

 

  1. 总结

别看贰个简简单单的delete操作,里面其实包含了非常多的原理!

在上课Configurable从前,大家率先来看一道面试题: a = 1;console.log( window.a ); // 1console.log( delete window.a ); // fals...

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

从地方的这道题能够见见八个的区分:在一贯不运用var表明变量时,使用delete关键词是足以开展删减的,再一次得到时值正是undefined了;在选择var评释的变量,使用delete是不能去除的,再赢得时值依旧是2。

1. delete操作符

运用delete删除变量或质量时,删除成功重返true,不然再次回到false。如下面的例证中,delete不或者删除变量a时,则赶回false;而delete能成功删除变量b,则赶回true。

除去上述的两种情形,还应该有别的的各类常用变量也许有能被delete删除的,也是有无法被去除的。大家先不管delete这一个变量时,为啥会发生这么的结果,这里只看她的重临值:

除去delete数组中内部的八个成分:

// 使用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]

剔除function类型的变量:

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

除去function.length,该length是收获形参的个数:

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

除去常用变量:

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

剔除prototype,而不是去除prototype上的脾性:

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

删去数组和字符串的length时:

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

剔除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 }

删除实例对象中的属性时,从以下的出口结果可以见见,使用delete删除属性时,删除的独自是实例对象自己的品质,而不能够去除prototype上的品质,尽管再删一遍也是剔除掉不的;若要删除prototype上的习性的习性或措施,只可以是: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

2. js的当中属性

在上面的事例中,有的变量或性质能够删除成功,而部分变量或品质则无从进展删减,那是何等决定那么些变量或属品质还是不可能被删去呢。

ECMA-262第5版定义了JS对象属性中特征(用于JS引擎,外部无法直接访谈)。ECMAScript中有二种属性:数据属性和做客器属性。

2.1 数据属性

数据属性指包含二个数据值的职位,可在该地方读取或写入值,该属性有4个供述其行事的特点:

  • [[configurable]]:表示是不是利用delete操作符删除进而再一次定义,或是不是修改为访问器属性。默以为true;
  • [[Enumberable]]:表示是或不是可由此for-in循环重返属性。默许true;
  • [[Writable]]:表示是或不是可修改属性的值。暗中认可true;
  • [[Value]]:包含该属性的数据值。读取/写入都是该值。默感到undefined;如上面实例对象Person中定义了name属性,其值为'wenzi',对该值的改换都反正在这几个岗位

要修改对象属性的暗许特征(私下认可都为true),可调用Object.defineProperty()方法,它接受四个参数:属性所在对象,属性名和三个陈说符对象(必需是:configurable、enumberable、writable和value,可安装一个或两个值)。

如下:

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

可以旁观,delete及重新初始化person.name的值都不曾奏效,那正是因为调用defineProperty函数修改了目的属性的特色;值得注意的是如若将configurable设置为false,则无从再利用defineProperty将其修改为true(实施会报错:Uncaught TypeError: Cannot redefine property: name);

2.2 访谈器属性

它重要不外乎一对getter和setter函数,在读取访谈器属性时,会调用getter重回有效值;写入访谈器属性时,调用setter,写入新值;该属性有以下4个特点:

  • [[Configurable]]:是或不是可透过delete操作符删除重新定义属性;
  • [[Numberable]]:是还是不是可经过for-in循环查找该属性;
  • [[Get]]:读取属性时自动调用,暗中同意:undefined;
  • [[Set]]:写入属性时自动调用,默许:undefined;

拜会器属性无法直接定义,必须利用defineProperty()来定义,如下:

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

不过还是有一点索要额外注意一下,Object.defineProperty()方法设置属性时,无法同时表明访谈器属性(set和get)和数据属性(writable大概value)。意思正是,某些属性设置了writable大概value属性,那么那么些性子就无法声称get和set了,反之亦然。

假使像下边包车型大巴点子张开定义,访问器属性和数目属性同期存在:

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

下边包车型客车代码看起来貌似是尚未怎么难题,但是真正施行时会报错,报错如下:

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}

通过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

咱俩再回到最起首的老大面试题:

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操作删除变量时产生的结果是平等的。

3. 总结

别看一个简轻便单的delete操作,里面其实包罗了成百上千的原理!

您或然感兴趣的稿子:

  • 包罗万象深入分析JavaScript中“&&”和“||”操作符(计算篇)
  • 浅谈javascript中new操作符的准则
  • JavaScript中的操作符类型转变示例总括
  • JavaScript中的种种操作符使用总计
  • 计算JavaScript中布尔操作符||与&&的选用本领
  • JavaScript中奇异的delete操作符
  • javascript中typeof操作符和constucor属性检查实验
  • javascript操作符"!~"详解
  • Javascript基础教程之比较操作符
  • JS之齐名操作符详解

本文由小鱼儿玄机二站发布于关于计算机,转载请注明出处:js中的内部属性与delete操作符介绍,js中的内部属

关键词: