Object.create() 详解

bug收集

30522人浏览 · 2021-02-03 12:45:56

bug收集 · 2021-02-03 12:45:56 发布

01 分析

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

参数

proto
创建对象的原型，表示要继承的对象

propertiesObject(可选 )
也是一个对象，用于对新创建的对象进行初始化

注：Object.create(null) 创建的对象是一个空对象，在该对象上没有继承 Object.prototype 原型链上的属性或者方法

如图：

我们来看看底层实现

Object.create =  function (o) {
    var F = function () {};
    F.prototype = o;
    return new F();
  };

F.prototype属性，进行了重新赋值，且指向传递的参数o;

02 应用

示例代码：

//创建一个Obj对象
  var Obj ={
    name:'mini',
    age:3,
    show:function () {
      console.log(this.name +" is " +this.age);
    }
  }
  //MyObj 继承obj, prototype指向Obj
  var MyObj = Object.create(Obj,{
    like:{
      value:"fish",        // 初始化赋值
      writable:true,       // 是否是可改写的
      configurable:true,   // 是否能够删除，是否能够被修改
      enumerable:true      //是否可以用for in 进行枚举
    },
    hate:{
      configurable:true,
      get:function () { console.log(111);  return "mouse" }, 
      // get对象hate属性时触发的方法
      set:function (value) {                                 
      // set对象hate属性时触发的方法 
        console.log(value,2222);
        return value;
      }    
    }
  });

能想到MyObj 的输出结果是什么嘛？会有哪些属性？（先思考一下）

看看运行结果，是否和你想的一样呢？

你会发现，第一个参数，在返回对象的原型上，而不是直接属性,可再回顾一下Object.create实现的底层原理；

第二参数，则是对返回对象添加属性，且进行属性描述对象的设置，关于属性描述对象，请看下面介绍

03 Object 对象 — 属性描述对象

JavaScript 提供了一个内部数据结构，用来描述对象的属性，控制它的行为，比如该属性是否可写、可遍历等等。这个内部数据结构称为“属性描述对象”（attributes object）。每个属性都有自己对应的属性描述对象，保存该属性的一些元信息。

下面是属性描述对象的一个例子。

{
  value: 123,
  writable: false,
  enumerable: true,
  configurable: false,
  get: undefined,
  set: undefined
}

属性描述对象提供6个元属性。

（1）value

value是该属性的属性值，默认为undefined。

（2）writable

writable是一个布尔值，表示属性值（value）是否可改变（即是否可写），默认为true。

（3）enumerable

enumerable是一个布尔值，表示该属性是否可遍历，默认为true。如果设为false，会使得某些操作（比如for...in循环、Object.keys()）跳过该属性。

（4）configurable

configurable是一个布尔值，表示可配置性，默认为true。如果设为false，将阻止某些操作改写该属性，比如无法删除该属性，也不得改变该属性的属性描述对象（value属性除外）。也就是说，configurable属性控制了属性描述对象的可写性。

（5）get

get是一个函数，表示该属性的取值函数（getter），默认为undefined。

（6）set

set是一个函数，表示该属性的存值函数（setter），默认为undefined。

04 Object.create继承的应用

var A = function () { };
  A.prototype.sayName=function () {
    console.log('a');
  }

  // B的实例继承了A的属性
  var B = function () { };
  B.prototype = Object.create(A.prototype);
  var b = new B();
  b.sayName();  // a