脚本宝典收集整理的这篇文章主要介绍了

JavaScript对象详解

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

对象的声明有俩种:

  • 字面量
  • 通过new一个构造函数Object

两者唯一的区别就是,字面量形式,可以一次赋值多个,通过new Object就得一个一个赋值

数据类型

补充:null为什么是基本类型但是依然会出现,typeof null 会返回 object?这是一个语言的bug,原理如下:原理是这样的,不同的对象在底层都表示为二进制,在 JavaScript 中二进制前三位都为 0 的话会被判
断为 object 类型,null 的二进制表示是全 0,自然前三位也是 0,所以执行 typeof 时会返回“object”。

深入对比基本类型和复杂类型的区别,用string和String对比

var str = 'hello world';
var strObj = new String('hello String');

str.length                          // 11
strObj.length                    // 12

// typeof判断属于那种简单数据类型
typeof str;                         // "string"
typeof strObj;                     //"object"

// instanceof判断对象实例的鼻祖是哪个复杂类型
str instanceof String         //  false
strObj instanceof String   // true

这段代码可以分析出,str通过字面量形式声明,其数据类型为基本数据类型,并不是对象,strObj 为复杂数据类型String的实例。我们知道str, strObj的数据类型之后,就要抛出一个问题,为什么str并不是对象,它怎么就能调用length呢?这不是一个简单数据类型该有的呀。js向你丢出一个结论,那就是简单数据类型存在一个隐式转换,它会从简单数据类型转换为复杂数据类型。

对象

1. 对象的属性

首先以对象字面量整一个对象

let obj = {
    name: 'hello',
    age: 12
}

访问对象的属性可以通过 圆点运算符 类似于 obj.name, 还可以通过属性运算符 obj["name"]访问。

2. 浅拷贝,深拷贝

ES6 定义了Object.assign()方法实现浅复制,该方法第一个参数是目标对象,之后还可以跟一个或多个原对象,他会遍历一个或多个原对象所有可枚举的自有键并把他们复制(使用 = 操作符赋值,所以这种僵硬的赋值操作,不会将原对象的属性的特性复制过来)到目标对象,最后返回目标对象。

3. 属性描述符【升级打怪必备技能】

对象有自己的属性和方法,对于我们js对象的属性来讲,属性还有自己的“属性”,又称为属性描述符。不要小看这个属性描述符,可不得了,通过属性描述符,我们不仅仅可以配置属性是读写权限,甚至通过setter,getter实现我们的数据双向绑定。该介绍一下这位调用属性描述符的内置方法了:Object.defineProperty()。这个方法接受三个参数,第一个是指定的对象,第二个是指定的对象参数,第三个当然是要修改的属性描述符了。当对象中不存在指定的属性,Object.defineProperty()就创建这个属性,当描述符中省略某些字段时,这些字段将使用它们的默认值,拥有布尔值的字段的默认值都是false

所以这也就是说,通过Object.defineProperty()创建的属性,描述符是不可配置的,因为configurable:false

// 直接对一个对象使用原点运算符赋值,属性描述符都是true
var o = {};

o.a = 1;
// 等同于 :
Object.defineProperty(o, "a", {
  value : 1,
  writable : true,
  configurable : true,
  enumerable : true
});


// 另一方面,使用Object.defineProperty()却将属性修饰符关闭了
Object.defineProperty(o, "a", { value : 1 });
// 等同于 :
Object.defineProperty(o, "a", {
  value : 1,
  writable : false,
  configurable : false,
  enumerable : false
});
var obj = {
    name: 'hello',
    age: 12
}

Object.defineProperty(obj, 'name', {
    value: 2,
    writable: true,
    configurable: true,
    enumerable: true
})

obj.name;       //2 not hello

接下来,我们解释一下属性描述符的四大天王:value, writable, configurable, enumerable

  • configurable

为啥先要介绍configurable呢,不得不说说他的重要性,这个描述符的值是true/false,它表示属性描述符是否可配置,当值为false时,剩下的描述符都是不可配置的,修改也不会生效,不包括value。简单的说,configurable控制的其他描述符的命运!后面我们讨论的时候,默认configurable为true,不然,讨论也没有意义,根本不会改变嘛

var a = {
    name: 'tom',
    age: 22
}

Object.defineProperty(a, 'age', {
    enumerable: false,
    writable:false,
    configurable: false,
})
a.age = 12;   // a.age 为12.即使writable 是false,因为configurable是false,所以writable其实还是默认的true

我知道你肯定是不信的,直接上图。Object.getOwnPropertyDescriptor() 与Object.defineProperty()互为一对儿,一个定义,一个查看定义

而且,将configurable修改为false,这是一个单向操作,你想再次修改它的值为true以实现重新配置属性描述符是不可能的,一旦设置false,永远都是false了。听说你还不信,那我再上图

var myObject = {
    a:2
};
myObject.a = 3;
myObject.a; // 3
Object.defineProperty( myObject, "a", {
    value: 4,
    writable: true,
    configurable: false, // 不可配置!
enumerable: true
} );

myObject.a; // 4
myObject.a = 5;
myObject.a; // 5

Object.defineProperty( myObject, "a", {
    value: 6,
    writable: true,
    configurable: true,
    enumerable: true
} ); // TypeError

  • writable

我们介绍一下控制读写的小伙伴-writable,这个属性描述符控制我们是否可以对属性进行赋值,值为false时,赋值是不管用的。严格模式下,还会抛出错误。至于writable怎么处理属性是否能被赋值,留一个疑问,稍后马上揭晓。

// configurable为true
var myObject = {};

Object.defineProperty( myObject, "a", {
    value: 2,
    writable: false, // 不可写!
    configurable: true,
    enumerable: true
} );

myObject.a = 3;
myObject.a; // 2
  • Enumerable

这个属性修饰符可能没有那么直观,但是从字面来看,我们应该是能了解到的,这是控制属性是否能出现在对象可枚举属性中。如果将enumerable设置为false,属性就不会出现在可枚举属性中。enumerable定义了对象的属性是否可以在 for...in 循环和 Object.keys() 中被枚举。

var obj = {
    name: 'tom',
    age: 12
}

for(prop in obj) {
    console.log(prop);     // name, age
}

Object.defineProperty(obj, 'name', {
    enumerable: false,
})

for(prop in obj) {
    console.log(prop);                //age
}

补充一些可枚举相关的知识,什么叫可枚举属性,就是指那些属性描述符设置为enumerable为true的属性。有很多方法是基于可枚举性的。比如,Object.keys(), in, for in 。对于上面那个例子,就是使用了for in遍历obj对象可枚举属性。

tips: 利用属性修饰符拓展的功能
  • ES6 实现的常量const
    本身JS是没有常量这个概念的,但是我们可以使用writable:false 和 configurable:false,就可以创建一个一次赋值,不能修改的常量
  • 禁止拓展
    如果想禁止一个对象添加新属性并且保留已有属性,可以使用Object.preventExtensions(),这样显式赋值就会静默失败,严格模式下,将会抛出TypeError异常
  • 密封,禁止拓展加强版,已有的属性以及属性修饰符都不能改
    Object.seal(..) 会创建一个“密封”的对象,这个方法实际上会在一个现有对象上调用
    Object.preventExtensions(..) 并把所有现有属性标记为 configurable:false。
    所以,密封之后不仅不能添加新属性,也不能重新配置或者删除任何现有属性(虽然可以
    修改属性的值)。
  • 冻结,更狠,Object.seal() 加强版,直接修改属性修饰符writable:false,值都不能动了。
    Object.freeze(..) 会创建一个冻结对象,这个方法实际上会在一个现有对象上调用
    Object.seal(..) 并把所有“数据访问”属性标记为 writable:false,这样就无法修改它们
    的值。

4. Getter/Setter

ES5可以使用getter和setter部分改写默认操作,但是只能应用在单个属性上,无法应用在整个对象上,getter,setter都是隐藏函数,前者在获取属性值时自动调用,后者是在设置属性值时自动调用。其实现在,我们可以总结一下前文所述。属性描述符其实分为两种

  • 数据修饰符
  • 访问修饰符

而我们前文一直在讲述数据修饰符,那么什么是访问修饰符呢?
当我们给一个属性定义getter和setter或者两者都有时,这个属性会被定义为”访问描述符“,对于访问描述符而言,JavaScript会忽略它们的value和writable特性,取而代之的是关心set/get(还有configurable和enumerable)特性

实例演示:

function Archiver() {
  var temperature = null;
  var archive = [];

  Object.defineProperty(this, 'temperature', {
    get: function() {
      console.log('get!');
      return temperature;
    },
    set: function(value) {
      temperature = value;
      archive.push({ val: temperature });
    }
  });

  this.getArchive = function() { return archive; };
}

var arc = new Archiver();
arc.temperature; // 'get!'
arc.temperature = 11;
arc.temperature = 13;
arc.getArchive(); // [{ val: 11 }, { val: 13 }]

一言以蔽之,setter/getter无非就是我们在赋值或者读取变量时,预先悄悄调用的一个隐藏方法。
还有一种通过对象文字语法创建的get,set(我也是从《你不知道的js》看到这种用法的,MDN这相关的文档中我并没有看到,学到了),这个不是通过Object.defineProperty()创建的,二者都会在对象中创建一个不包含值的属性,对于这个属性的访问会自动调用一个隐藏函数,它的返回值会被当作属性访问的返回值。

其实可以更细致的观察到,通过对象文字语法创建的变量,他的修饰符按照规则肯定是没有value的,但是其他配置信息是true,这一点很关键

大体上对象的内容就是这么多,后续在做一个补充,MDN实在是前端宝典,看到这里更推荐读者阅读MDN相关文档:https://developer.mozilla.org...

总结

以上是脚本宝典为你收集整理的

JavaScript对象详解

全部内容,希望文章能够帮你解决

JavaScript对象详解

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过