深入了解JavaScript(对象）

小灰灰 2021-01-18 13:39 694阅读 0赞

我们经常看见一句话,时间万物皆为对象。当然不是处对象的那种啦。。。。首先我们知道每个对象中都包含了一系列的属性,这些属性是无序的,且每个属性都有一个字符串key和对应的value。

# 如何定义对象 #

var obj = { x: 1, y: 2};
    console.log(obj.x);//1
    console.log(obj.y);//2

我们定义了一个名为 obj的对象,其中x为属性、y为属性，对应的value值就是1和2。

下面另一种定义的方式

var obj = { };
    obj[1] = 1;
    obj['1'] = 1;
    console.log(obj);// [1,2]
    obj[{ }] = true;
    obj[{ x: 1}] = true;
    console.log(obj);//{1:2,[object Object]:true}

# 对象的解构 #

var obj = { };
    obj.y = 2;
    obj.x = 3;
    
    function func(){ }
    func.prototype.z = 10;
    var obj = new func();

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F3ZTg2MzE0_size_16_color_FFFFFF_t_70]  
此时我们输入obj.x,obj.z是可以输入值的,这里注意的是我们队obj.z设置的是原型的prototype属性。  
分别的阐述下对象的五大属性:  
writable: 指的是该对象是否具有写的操作权限  
enumerable：指的是对象是否可以被枚举  
configurable: 指的是是否可以被更新  
value: 执行链式队列并提取解链后的值. 返回值  
get: 获取属性或者方法  
set: 设置属性或者方法

# 字面量对象 #

var obj = { x: 1,y: 2};
    
    var obj1 = { 
        x: 1,
        y: 2,
        o: { 
           z: 3,
           n: 4
     }
    };

### 创建对象(new 的原型链) ###

function foo(){ }
    foo.prototype.z = 3;

这里我们在原型上面创建了个属性z,通过用 foo.prototype.z来获取这个值。  
那么如何通过方法直接获取z的值? 那我们可以这样做

function foo(){ }
    foo.prototype.z = 3;
    var obj = new foo();
    console.log(obj.z);

通过创建一个变量 来接收这个方法,然后就可以通过obj.z来拿到这个值了。  
为什么这样能够拿得到呢？因为我们知道每个对象的原型都来自于一个Object.prototype  
如果本身对象没有这个属性,那么会去这个对象的上一层查找。

其实有必要去了解Object.prototype这个属性 里面有好几种比较常见的方法  
对象的创建可以使用下面这种方法

var obj = Object.create(这里传入你要创建的对象名);

判断某个属性是否存在

obj.hasOwnProperty(属性名);

# 对象的属性操作 #

### 属性的读写 ###

var obj = { x : 1, y : 2};
    obj.x; // 1
    obj["y"]; // 2
    obj["x"] = 3;
    obj.y = 4;

上面的代码很简单就不多做阐述了。

### 属性的读写 异常 ###

var obj = { x : 1};
    obj.y; // undefined
    var yz = obj.y.z; // TypeError: Cannot read property 'z' of undefined
    obj.y.z = 2; // TypeError: Cannot set property 'z' of undefined

如果这样不做处理,代码运行就会报错Cannot read property ‘z’ of undefined

### 属性的删除 ###

属性的删除我们可以使用delete 进行删除

var person = { age : 28, title : 'fe'};
    delete person.age; // true
    delete person['title']; // true
    person.age; // undefined
    delete person.age; // true

但是原型的prototype是无法被删除的会返回false

delete Object.prototype; // false,

那么我只想在本身这个属性里面去查找该如何操作

var descriptor = Object.getOwnPropertyDescriptor(Object, 'prototype');

我们可以使用Object.getOwnPropertyDescriptor接赋予该对象的属性，不需要从原型链上进行查找的属性。

### 删除注意 ###

某些特定情况下是无法删除的如下几种:

由于globalVal 本身是个变量 并不是对象,delete对它不起任何的作用,这里返回的是false,无法删除。  
在一个函数里面 执行删除变量 也是返回的false 无法删除。  
delete 删除的对象的属性 无法直接删除函数。

### 属性检测 ###

属性的检测我们可以使用如下属性：

hasOwnProperty(属性名) //如果属性存在返回true 如果不存在 返回false
    propertyIsEnumerable()//指示指定的属性是否可枚举

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F3ZTg2MzE0_size_16_color_FFFFFF_t_70]: /images/1610977128216.png