Js-对象的原型和原型链及原型对象方法

曾经终败给现在 2023-07-06 09:53 62阅读 0赞

# Ⅰ- 壹 - 对象的原型和原型链 #

## 一 对象简介 ##

什么是对象，其实就是一种类型，即引用类型。而对象的值就是引用类型的实例。  
在 ECMAScript 中引用类型是一种数据结构。用于将数据和功能组织在一起，它也常被称做为类，但 ECMAScript 中却没有这种东西。虽然 ECMAScript 是一门面向对象的语言。却不具备传统面向对象语言所拥有的类和接口等基本结构。

*  万物皆对象，除了数字，字符，布尔这种绝对值以外的所有都是对象；
 *  对象是类的实例化体现，类是对象的抽象体现；
 *  对象是一个个体，他具备自身类的所有属性和方法；

对象的创建有 字面量创建 构造器创建

## 二 型和原型链是什么 ##

*  对象的原型链和构造函数(类)的原型是同一个引用对象；
 *  原型链是针对对象的叫法，只有对象才有\_\_proto\_\_；描述在\_\_proto\_\_ 中的都是原型中的
 *  原型是构造函数(类)的叫法，只有构造函数(类)才有prototype；
 *  实例化构造函数（原型）后，可以通过实例调用该构造函数（原型）的方法，会自动拥有自身原型的属性和方法；
 *  在堆当中存储。在栈当中存放一个指向堆的内存 地址
 *  五种类型也都是继承于对象被特殊处理了所以放在栈当中，调用方法时候找到堆中所有原型下的方法进行使用

var obj={ a:1};
    console.log(obj);

在控制台可以看到以下内容\_\_proto\_\_ 就是原型 本身就存在的方法和属性。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70_pic_center]

# Ⅱ - 贰 - 对象的操作方法 #

<table> 
 <thead> 
  <tr> 
   <th>对象的操作方法</th> 
   <th>简述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Object.create ( proto, [ propertiesObject ] )</td> 
   <td>以proto作为原型创建，propertiesObject可以不写</td> 
  </tr> 
  <tr> 
   <td>Object.assign(目标对象，源对象1，源对象2。。。)</td> 
   <td>方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象</td> 
  </tr> 
  <tr> 
   <td>Object.defineProperty()</td> 
   <td>详细定义对象的属性</td> 
  </tr> 
  <tr> 
   <td>Object.defineProperties()</td> 
   <td>定义对象的多个属性</td> 
  </tr> 
  <tr> 
   <td>Object.freeze()</td> 
   <td>冻结对象，不能修改该对象的所有属性，不能删除所有属性，也不能重新设置属性</td> 
  </tr> 
  <tr> 
   <td>Object.getOwnPropertyNames()</td> 
   <td>获取对象下所有属性的名称，不包括__proto__</td> 
  </tr> 
  <tr> 
   <td>Object.getOwnPropertyDescriptor()</td> 
   <td>获取对象下属性的描述</td> 
  </tr> 
  <tr> 
   <td>Object.is()</td> 
   <td>判断两个对象或者两个内容是否相等</td> 
  </tr> 
  <tr> 
   <td>Object.isFrozen()</td> 
   <td>判断该对象是否被冻结。</td> 
  </tr> 
  <tr> 
   <td>Object.isExtensible()</td> 
   <td>判断一个对象是否是可扩展的（是否可以在它上面添加新的属性）跟Object.isFrozen() 的结果相反。</td> 
  </tr> 
  <tr> 
   <td>isPrototypeOf()</td> 
   <td>测试一个对象是否存在于另一个对象的原型链上。</td> 
  </tr> 
 </tbody> 
</table>

## 一 Object.create() ##

该方法可以针对已知对象创建新对象，也可以创建一个空对象。

语法：  
Object.create ( proto, \[ propertiesObject \] )

有两个参数：

*  proto：必须。表示新建对象的原型对象，该参数可以是 null，对象，函数的 prototype 属性（创建空的对象时需要传 null ，否则会抛出 TypeError 异常）。
 *  propertiesObject：可选。添加到新创建对象的可枚举属性（即其自身的属性，而不是原型链上的枚举属性）对象的属性描述符以及相应的属性名称。这些属性对应 Object.defineProperties() 的第二个参数。

说明：

*  原型链属性：被放在原型链（**proto** ）下的属性；
 *  对象属性：对象下直属的属性；
 *  如果该对象有对象属性，就可以直接获取对象属性，如果没有对象属性则获取距离该对象最近的原型链属性；
 *  设置属性时，只会设置对象属性，不能设置原型链属性；
 *  delete可以直接删除对象的对象属性，不能删除原型链属性；
 *  删除对象时，为了防止内存泄露，需要先将对象设置成 null ，再进行删除；
 *  使用 Object.create() 方法创建的对象时，属性是在原型下面的，创建后的对象可以直接访问原型链属性；

当设置对象属性时，直接设置的是对象的自身属性（对象属性）;如果获取时，首先查看该对象有没有这个名称的对象属性，如果有直接返回这个属性值如果没有向下查找紧邻的原型链中的属性是否具有该属性名查找到距离该对象最近的原型链中属性名后返回其值

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70_pic_center 1]

## 二 Object.assign() ##

Object.assign() 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。如果目标对象中的属性具有相同的键，则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。

语法：  
Object.assign(目标对象，源对象1，源对象2。。。)

说明：

*  Object.assign() 只能复制对象属性，不能复制对象的原型链属性；
 *  Object.assign() 只能复制可枚举类型的属性；
 *  Object.assign() 引用关系也会一同被复制，只能浅复制；
 *  如果后面的对象属性与前面的对象属性相同时，则会覆盖前面的对象属性
 *  原对象中增加复制的属性。引用地址不会发生改变
 *  使用扩展运算符的时候会改变引用地址

## 三 Object.defineProperty()和Object.defineProperties() ##

详细定义对象的属性

语法：  
Object.defineProperty(obj, prop, descriptor)  
第一个参数为对象名称，第二个参数为属性名称，第三个参数为属性描述对象，第三个参数的值为：

*  configurable，是否可删除属性并且是否可以重定义该属性的属性描述对象，默认值是false；
 *  enumerable，是否可以遍历，是否可枚举（该对象在使用for in遍历时，不可枚举属性是不能被遍历，也不能被Object.assign()复制），默认值是false；
 *  writable，是否可写，是否能够修改值，默认值是false；
 *  value，设置值；
 *  set:function()\{\}:设置属性 和value冲突 只能存在一个
 *  get:function()\{\}:获取属性，和writable冲突 只能存在一个

## 四 Object.freeze() ##

冻结对象，使用该方法以后，不能修改该对象的所有属性，不能删除所有属性,不能复制，也不能重新设置属性的描述对象。

ES6的类里面没有常量可通过这中方式当做常量使用

obj.a=10;
        obj.b=20;
        Object.freeze(obj);
        delete obj.a;
        obj.a=100;
        console.log(obj);

## 五 Object.getOwnPropertyNames() 和Object.getOwnPropertyDescriptor() ##

*  Object.getOwnPropertyNames()：

获取对象下所有属性的名称，不包括\_\_proto\_\_，把所有的属性名放在一个数组中返回。  
该数组的内容就是这些属性名，该数组对元素是 obj 自身拥有的枚举或不可枚举属性名称字符串。 数组中枚举属性的顺序与通过 for…in 循环（或 Object.keys）迭代该对象属性时一致。 数组中不可枚举属性的顺序未定义。

*  Object.getOwnPropertyDescriptor() ：

获取对象下属性的描述，也就是使用Object.defineProperty定义的所有属性的描述内容。

//Object.getOwnPropertyNames()：
    
    var obj={ a:1,b:2}
    Object.defineProperties(obj,{ 
        e:{ 
            value:20,
            writable:true,
            configurable:true
        }
    });
    var arr=Object.getOwnPropertyNames(obj);
    console.log(arr);//["a","b","e"]
    
    
    //Object.getOwnPropertyDescriptor() 
    var obj={ a:1,b:2}
    Object.defineProperties(obj,{ 
        e:{ 
            value:20,
            writable:true,
            configurable:true
        }
    });
    var desc=Object.getOwnPropertyDescriptor(obj,"e");
    console.log(desc);
    //{value: 20, writable: true, enumerable: false, configurable: true}

## 六 对象的判断方法 ##

*  Object.is() 判断两个对象或者两个内容是否相等 ，等同于===
 *  Object.isFrozen() 判断该对象是否被冻结。
 *  Object.isExtensible() 判断一个对象是否是可扩展的（是否可以在它上面添加新的属性）跟Object.isFrozen() 的结果相反。
 *  isPrototypeOf() 测试一个对象是否存在于另一个对象的原型链上。

### 1 Object.is() ###

//Object.is() 
    var a=3;
    var b=new Number(3);//创造一个数值型对象
    var c=Number(3);//强制转换为数值3
    console.log(Object.is(a,b));//false
    console.log(Object.is(a,c));//true
    console.log(Object.is([],[]));//false
    console.log(NaN===NaN);//false
    console.log(Object.is(NaN,NaN));//true

### 2 Object.isFrozen() ###

var obj={ a:1};
    Object.freeze(obj);
    console.log(Object.isFrozen(obj));//true

### 3 Object.isPrototypeOf() ###

isPrototypeOf() 方法也可以用来判断一个类是否是另一个类的父类。

### 4 Object.hasOwnProperty() ###

hasOwnProperty() 方法会返回一个布尔值，指示对象是否具有指定的属性作为自身（不继承）属性。

var o={ a:1,b:2};
    
    var o1=Object.create(o);
    
    o1.c=10;
    
    var o2=Object.create(o1);
    
    var arr=[1,,2,3,undefined,4];
    
    // console.log(4 in arr);
    
    // console.log(arr.hasOwnProperty(4));
     // 对象原型链上的属性不是它的属性
    
    console.log(o1.hasOwnProperty("a"));//false，当前对象的对象属性，原型链属性不属于范围
    
    console.log("a" in o1);//true 当前对象和对象的原型链中所有属性都可以判断

### 5 Object.propertyIsEnumerable() ###

propertyIsEnumerable() 方法返回一个布尔值，表明指定的属性名是否是当前对象可枚举的自身属性。

枚举就是用for in可以罗列出来的属性

var o={ };
    var a=[];
    o.prop="属性";
    a[0]=3;
    console.log(o.propertyIsEnumerable("prop"));
    console.log(a.propertyIsEnumerable(0))

# 0 - 0 - 知识点： #

## 一 Object.assign() 和 Object.create() 的区别 ##

*  Object.create() 是可以创建对象的；
 *  Object.assign() 是不能创建对象的，必须拥有目标对象才能进行创建；

## 二 constructor ##

*  constructor 就是该对象的类型或者叫做构造函数。
 *  用来判断该对象是否属于某个超类。
 *  是一个属性，返回一个指向创建了该对象原型的函数引用。需要注意的是，该属性的值是那个函数本身，而不是一个包含函数名称的字符串。对于原始值（如1，true 或 “test”），该属性为只读。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200812201605315.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20200812201629251.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg2MzgwMA==,size_16,color_FFFFFF,t_70#pic_center