JavaScript对象详解，深入理解js对象

待我称王封你为后i 2021-07-24 21:53 425阅读 0赞

# 定义： #

对象是JavaScript的基本数据类型。对象也是一种复合值：可以通过名字访问这些值，我们可以将对象看做是从字符串到值的映射，当然对象不仅仅是字符串到值的映射，除了自有的属性还可以从原型继承属性。

## 创建对象: ##

### 1.字面量方式 ###

var empty={} //创建一个空对象
    
    	var obj={a:1,b:2}; //两个属性的对象
    
    	var compObj={a:'1',b:'2',cc:{
    						d:'3',
    						e:'4'
    					}
    				}; //复杂的对象

### 2.new构造函数的方式创建对象 ###

var a = new Array();//创建一个空数组
      var d = new Date();//创建当前时间的Date对象

### 3.原型对象方式 ###

function Person(name){
     	this.name=name;
      }
      Person.prototype.eat=function(){
    	 console.log(this.name+"是个好人");
      }
     var zhangsan =new Person("张三");

### 4.Object.create() ###

var o1=Object.create({a:1,b:2});//o1会继承属性 a和b

## 属性的查询和设置 ##

### 可以通过点(.)和方括号(\[\])来获取属性的值 ###

var o1={
       		a:1,
       		b:2,
       		'hello zhangsan':'张三'
       }
       o1.a //1
       o1.b //2
       o1['a']//1
       o1['b']//2
       var key='hello zhangsan';
      	   o1[key]//张三
      	 o1.key//undefined
      	 o1.hello zhangsan //报错

可以看出对于点 (.) 来说，右侧必须是一个以属性名称命名的简单标示符。对于方括号来说，方括号内是一个计算结果为字符串的表达式，而这个字符串就是属性的名字，比如：

属性名'hello zhangsan'，因为中间有空格只能用‘方括号‘的方式来获取，而其他属性则既可以 点 也可以 方括号。

### 设置值也是一样的，只不过有个赋值操作： ###

o1.a='3'
     o1['b']='4'

## 删除属性 ##

delete o1.a;
     delete o1['b']

注意：delete运算符只能删除自有属性，不能删除继承属性。

## 检测属性 ##

### 1.in运算符 ###

'a' in o1;//true 
       'b' in o1;//true
       'toString' in o1//true o继承来的属性，打开控制台可以在o1对象的__proto__属性里面找到toString

### 2.hasOwnPreperty()方式 ###

o1.hasOwnProperty('a');//true
       o1.hasOwnProperty('b');//true
       o1.hasOwnProperty('toString');//false 继承来的属性为false

### 3.使用 !==undefined ###

o1.a!==undefined//true
       o1.b!==undefined//true
       o1.toString!==undefined// 继承来的属性为true

当然如果值直接设置了undefined，则这种检测不起作用，比如 var o1=\{a:undefined\} ,这个a属性就没办法这样检测了。

## 属性的枚举 ##

###  1.for/in方式 ###

for(key in o1){
       	console.log(key,'===',o1[key])
       }

![20201223193358639.png][]

### 2.Object.keys 方式 ###

var keys = Object.keys(o1);
       keys.forEach((key)=>{
       	 	console.log(key,'===',o1[key])
       })

![20201223193535837.png][]

## 原型属性 ##

1.对象的\_\_proto\_\_均指向自身构造函数的prototype。  
    2.prototype中的constructor 属性指向构造函数本身。  
    3.isPrototypeOf方法检测对象自身是否处于另一个对象的原型或者处于原型链上。

##   
 对象的方法 ##

对象从原型对象继承的基本是方法，看看几个比较重要的

### 1.valueOf() 方法返回指定对象的原始值。 ###

//Array：返回数组对象本身
    var array = [1,3,4,6];
    console.log(array.valueOf() === array);   // true
    
    // Number：返回数字值
    var num =  123213;
    console.log(num.valueOf());   // 15.2654
    
    // boolean：返回布尔值true或false
    var bool = true;
    console.log(bool.valueOf() === bool);   // true

### 2.toString() 方法返回一个表示该对象的字符串。 ###

可以通过这个方法来检测对象的类型，如下代码

var toString = Object.prototype.toString;
    
    	console.log(toString.call(new Object()));//[object Object]
    	console.log(toString.call(new Date())); // [object Date]
    	console.log(toString.call('abc')); // [object String]
    	console.log(toString.call(123)); // [object Number]
    	console.log(toString.call(true)); //  [object Boolean]
    	console.log(toString.call(undefined)); // [object Undefined]
    	console.log(toString.call(null)); // [object Null]
    	console.log(toString.call(/./));//[object RegExp]

### 3.toLocaleString() 方法返回一个该对象的字符串表示。 ###

var toString = Object.prototype.toLocaleString;
    
    	console.log(toString.call(new Object()));//[object Object]
    	console.log(toString.call(new Date())); // Wed Dec 23 2020 20:09:24 GMT+0800 (中国标准时间)
    	console.log(toString.call('abc')); // abc
    	console.log(toString.call(123)); // 123
    	console.log(toString.call(true)); //  true
    	console.log(toString.call(/./));// /./

### 4.hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性。 ###

var o1={
       		a:1,
       		b:2,
       		'hello zhangsan':'张三'
       }
       
       console.log(o1.hasOwnProperty('a'));//true
       console.log(o1.hasOwnProperty('b'));//true
       console.log(o1.hasOwnProperty('toString'));//false 继承来的属性为false

### 5.propertyIsEnumerable() 方法返回一个布尔值，表示指定的属性是否可枚举。 ###

//propertyIsEnumerable() 方法返回一个布尔值，表示指定的属性是否可枚举。
        var o1={
       		a:1,
       		b:2,
       		'hello zhangsan':'张三'
       }
       
       console.log(o1.propertyIsEnumerable('a'));//true
       console.log(o1.propertyIsEnumerable('b'));//true
       console.log(o1.propertyIsEnumerable('toString'));//false 继承来的属性为false

### 6.isPrototypeOf() 方法用于测试一个对象是否存在于另一个对象的原型链上。 ###

function Person(){}
       function Man(){}
       Man.prototype = Object.create(Person.prototype);
       
       var m = new Man();
    
    	console.log(Person.prototype.isPrototypeOf(m)); // true
    	console.log(Object.prototype.isPrototypeOf(m)); // true

从下图我们也可以看到 m 实例对象的\_\_proto\_\_指向了Person.prototype对象,同时Person.prototype对象的\_\_proto\_\_属性指向了Object.prototype对象。

![20201223202057911.png][]

# 整理不易给个三连支持一下吧，谢谢！ #

[20201223193358639.png]: /images/20210724/8fd5a169df384a09a294b53d2558f92b.png
[20201223193535837.png]: /images/20210724/fb917ce5f8864de6808d894bbe399e80.png
[20201223202057911.png]: /images/20210724/aef56a758fec4c5089f135b7eb8f67a9.png