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

划重点:相对于构造函数的继承Object.create继承实现了将A,B的原型完美分隔 。双方不会互相影响。这是Object.create亮点所在

 

相关面试题:
对象字面量创建对象与 Object.create(null)创建对象有什么区别
答案:http://bugshouji.com/miansiti/t1406
 

写文章不容易哦,请给一个赞、在看吧;

你的支持,是我写下去的动力

bug收集

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐