javascript中对象特性

阳光穿透心脏的1/2处 2021-09-02 03:43 327阅读 0赞

对象是什么，我们用属性来描述

属性是什么， 我们用特性来描述

特性是用来描述属性的

### **Object.defineProperty** ###

该方法用于设置单一属性特性

使用方式：

Object.defineProperty(obj, property, descript)

obj：要设置特性的对象

property: 要设置的特性属性

descript：描述特性对象

### **特性--可枚举性 ** enumerable: true | false ###

使用方式：

Object.defineProperty(obj , property，\{

// 不可枚举

enumerable: true | false

\})

// 在ES5中
          var obj = {
            num: 100,
            color: "red"
    }
    
    // 枚举
    for (var i in obj) {
    	console.log(i);
    }
    
    这里没有设置特性时打印出来的结果为 num  color
    
    
    
    // 设置对象的特性
    Object.defineProperty(obj, "color", {
         // 修改可枚举性
         enumerable: false
    })
    
    
    // 枚举
    for (var i in obj) {
    	console.log(i);
    }
    
    
    
    这时color设置了不可修改枚举性  打印出来的只有num

###  **特性--配置值** value: “”  ###

使用方式：

Object.defineProperty(obj, property, \{

// 配置值

value: “”

\})

// 在ES5中
    var obj = {
    
    }
    
    // 设置特性
    Object.defineProperty(obj, "color", {
              // 配置值
    	value: "red"
    })

![20200906161900246.png][]

### **特性--可修改性** writable: true | false ###

使用方式：

Object.defineProperty(obj, property, \{

// 配置可修改性

writable: true | false

\})

// 在ES5中
    var obj = {
    	num: 100
    }
    
    // 设置特性
    Object.defineProperty(obj, "num", {
             // 不可修改
    	writable: false
    })
    
    // 尝试修改属性值
    obj.num = 200;

![20200906162104543.png][]

### **特性--可配置性**configurable: true | false ###

使用方式：

Object.defineProperty(obj, property, \{

// 可配置性

configurable: true | false

\})

// 在ES5中
      var obj = {
            num: 100,
    	color: "red"
    }
    
    // 设置特性
    Object.defineProperty(obj, "num", {
             // 配置值
             value: 500,
             // 不可修改
    	writable: false,
    	// 不可配置
    	configurable: false
    })
    
    num=1000
    
    
    
    //因为你这里配置了不可配置所有当你配置值的时候它会报错

![2020090616272429.png][]

### **特性方法  set get** ###

**     **

get方法用来获取值的

没有参数

返回值就是要获取的属性值

作用域是当前对象

千万不要在方法中获取该属性值， 否则将会递归死循环

通常，我们是获取该属性值的一个备用值

set方法用来设置值的

参数就是要设置的值

没有返回值

作用域是当前对象

千万不要在方法中设置该属性值， 否则将会递归死循环

通常，我们设置该属性的一个备用属性

// 定义对象
    var obj = {
    	color: "red"
    }
    
    
    // 一旦设置了特性方法， 当obj.color(读取属性值)的时候，触发get方法，当obj.color = xx(设置属性值)的时候， 会触发set方法
    // 设置特性
    Object.defineProperty(obj, "color", {
    	// 取值器
    	get: function() {
    		console.log("读取属性", this, arguments);
    		// 不要在方法中获取属性值
    		// return this.color;
    		// 通常， 我们是获取该属性值的一个备用值
    		return this._color;
    	},
    	// 赋值器
    	set: function(value) {
    		console.log("设置属性", this, arguments);
    		// 不要在方法中设置该属性
    		// this.color = value;
    		// 通常，我们设置该属性的备用属性
    		this._color = value;
    	}
    })
    
    obj.color = "blue";
    console.log(obj.color);

![20200906163141995.png][]

### **设置多个属性特性**defineProperties ###

使用方式：

Object.defineProperties(obj, options)

obj: 要设置的对象

options: 配置对象

key: 设置的特性属性

value: 描述特性对象

我们可以设置特性属性以及方法

// 定义对象
    var obj = {
    	num: 100,
    	color: "red"
    }
    
    // 设置特性
    Object.defineProperties(obj, {
    	// 配置num
    	num: {
    		// 配置值
    		value: 500,
    		// 不可修改
    		writable: false,
    		// 不可枚举
    		enumerable: false,
    	},
    	// 特性方法
    	color: {
    		get: function() {
    			return this._color;
    		},
    		set: function(value) {
    			this._color = value;
    		},
    		// 配置不可枚举
    		enumerable: false,
    		// 一旦设置了特性方法， 将无法再次配置writable以及value
    		// 配置可修改性
    		// writable: false
    		// 配置值
    		// value: "orange"
    	}
    })
    
    obj.num = 1000;
    obj.color = "blue";

** **

### **原型方法 isPrototypeOf    getPrototypeOf    setPrototypeOf** ###

**       **

**isPrototypeOf **

原型对象的方法

判断原型对象

是否是参数对象的原型

参数就是实例化对象

在查找的过程中， 会查找整个原型链

<div>1</div>
    <div>2</div>
    <div>3</div>
    <script type="text/javascript">
    // 获取类数组对象
    var obj = document.getElementsByTagName('div');
    
    // 定义数组
    var arr = [];
    
    // isPrototypeOf
    // 判断Array的原型是哪一个对象的原型
    console.log(Array.prototype.isPrototypeOf(obj));
    console.log(Array.prototype.isPrototypeOf(arr));
    
    
    // 查找过程中，会查找整个原型链
    console.log(Object.prototype.isPrototypeOf(obj));
    console.log(Object.prototype.isPrototypeOf(arr));
    </script>

![20200906163928969.png][]

**getPrototypeOf  **

在ES5之前，获取某个对象的原型对象可以通过\_\_proto\_\_获取， 但是在ES5中， 不推荐以\_\_开头，所以提供了getPrototypeOf方法用来获取原型对象

// 获取原型对象
    console.log(arr.__proto__);
    console.log(Object.getPrototypeOf(arr));
    console.log(arr.__proto__ === Object.getPrototypeOf(arr));

![20200906164042930.png][]

**setPrototypeOf** 用于设置某个对象的原型

使用方式：(可以设置null)

Object.setPrototypeOf(obj, prototype)

obj: 要设置的对象

prototype: 新的原型对象 （可以是对象 还可以是null）

// 设置arr的原型
    Object.setPrototypeOf(arr, {"name": "王老五"});
    Object.setPrototypeOf(arr, null);
    // 会修改整个原型链
    console.log(arr.__proto__);

![20200906164205398.png][]

### **preventExtensions** 用于取消对象的可拓展性 ###

**总结****:**

**当对象取消了可拓展性之后， 对象不能被拓展，但是可以修改属性值， 还可以删除属性**

**查看对象是否取消了可拓展性：**

**Object.isExtensible(obj) 返回值bool 如果是true 表示对象可以拓展，反之不可拓展**

// 定义对象
    var obj = {
    	a: 1
    }
    
    // 默认情况下对象是可以被拓展的
    obj.b = 22;
    
    // 取消对象的可拓展性
    Object.preventExtensions(obj);
    
    // 再次尝试拓展属性
    obj.c = 3;
    
    // 尝试修改属性值
    obj.a = 11;
    obj.b = 22;
    // 尝试删除属性
    delete obj.a;

![202009061644123.png][]

### seal用于封闭对象 ###

** 当一个对象被封闭之后，此时不可再次拓展， 不可删除属性， 可以修改属性值**

**查看对象是否被封闭：**

**Object.isSealed(obj) 返回值bool 如果是true 表示被封闭了， 反之没有被封闭**

// 定义对象
    var obj = {
         a: 1
    }
    
    // 封闭对象
    Object.seal(obj);
    
    // 尝试拓展属性
    obj.b = 2;
    // 尝试删除属性
    delete obj.a;
    // 尝试修改属性值
    obj.a = 11;

![20200906164710919.png][]

### **freeze** 冻结对象 ###

**总结：**

**当一个对象冻结之后，此时对象不可拓展属性、不可删除属性、 不可修改属性值**

**查看对象是否被冻结：**

**Object.isFrozen(obj) 返回值bool 如果是true表示被冻结了， 反之没有被冻结**

// 定义对象
    var obj = {
    	a: 1
    }
    
    // 冻结对象
    Object.freeze(obj);
    
    // 尝试拓展属性
    obj.b = 2;
    // 尝试修改属性值
    obj.a = 11;
    // 尝试删除属性
    delete obj.a;

![20200906164836395.png][]

### **对象创建的新方式Object.create** ###

**Object.create**

使用方式：

Object.create(prototype, options)

方法接收两个参数

第一个参数是一个对象 （可以是null）

该对象是通过Object.create方法创建出来的原型对象

第二个参数也是一个对象 （可以省略）

该对象是通过Object.create方法创建出来的特性对象

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70][]

[20200906161900246.png]: /images/20210813/47fe415a7e71410e8b741e1b26ed8500.png
[20200906162104543.png]: /images/20210813/7bc13dbdda914e3997b18c2d9324b976.png
[2020090616272429.png]: /images/20210813/9aa109e0be984e2fa590971d3d7b280d.png
[20200906163141995.png]: /images/20210813/19a2bf5d82b04fc6ad5c26b1346e2afa.png
[20200906163928969.png]: /images/20210813/d13ba59350724f19955ad74b8628a63d.png
[20200906164042930.png]: /images/20210813/3fc744dbdc9f4c4585fe299e972cc428.png
[20200906164205398.png]: /images/20210813/557ca25e306f471f8a9893e456a4879b.png
[202009061644123.png]: /images/20210813/8078544c650043edaab01ff1b430d02b.png
[20200906164710919.png]: /images/20210813/8d9b468045a54a809d77fb3958184769.png
[20200906164836395.png]: /images/20210813/2b5823f3a5d54596be5fd24386c7db9e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70]: /images/20210813/4910c39265444806a307526061d4531a.png