第一部分

  Object.crate() 方法是es5中的关于原型的方法, 这个方法会使用指定的原型对象以及属性去创建一个新的对象

 

语法

  Object.create(proto, [ propertiesObjecy ])

参数

  proto

  必须的。一个对象,它是新创建的对象的原型

  

  propertiesObject

  可选的。 该参数是一组属性和值,该对象的属性名称将是新创建的对象的属性名称,值是属性描述符, 这些属性描述符的结构与Object.defineProperties()的第二个参数一样。 注意:该参数对象不能是 undefined,另外只有该对象中自身拥有的可枚举的属性才有效,也就是说该对象的原型链上属性是无效的。

抛出异常

如果 propertiesObject 参数不是 null 也不是对象,则抛出一个 TypeError 异常。

例子

使用 Object.create 实现类式继承。

下面的例子演示了如何使用Object.create()来实现类式继承。这是一个单继承。

//Shape - superclass
function Shape() {
this.x = ;
this.y = ;
} Shape.prototype.move = function(x, y) {
this.x += x;
this.y += y;
console.info("Shape moved.");
}; // Rectangle - subclass
function Rectangle() {
Shape.call(this); //call super constructor.
} // subclass extends superclass
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle; var rect = new Rectangle(); console.log('Is rect an instance of Rectangle?',
rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?',
rect instanceof Shape); // true rect.move(, ); //Outputs, "Shape moved."

这里的继承还是很好理解的,值得注意的是,使用这种方式继承,不会出现new。

常见问题: Object.create(null) 和 {} 区别是什么

  在vue源码中,就会经常出现 Object.create(null)。 这样的结果就是 Object.create(null)创建的对象是不会以Object的原型为构造函数的,因为这个对象就没有原型。

console.log(Object.create({}).toString);   // function toString() { [native code] }
console.log(Object.create(null).toString); // undefined

使用 Object.create 的 propertyObject 参数

var o;

// 创建一个原型为null的空对象
o = Object.create(null); o = {};
// 以字面量方式创建的空对象就相当于:
o = Object.create(Object.prototype); o = Object.create(Object.prototype, {
// foo会成为所创建对象的数据属性
foo: {
writable:true,
configurable:true,
value: "hello"
},
// bar会成为所创建对象的访问器属性
bar: {
configurable: false,
get: function() { return },
set: function(value) {
console.log("Setting `o.bar` to", value);
}
}
}); function Constructor(){}
o = new Constructor();
// 上面的一句就相当于:
o = Object.create(Constructor.prototype);
// 当然,如果在Constructor函数中有一些初始化代码,Object.create不能执行那些代码 // 创建一个以另一个空对象为原型,且拥有一个属性p的对象
o = Object.create({}, { p: { value: } }) // 省略了的属性特性默认为false,所以属性p是不可写,不可枚举,不可配置的:
o.p =
o.p
// o.q =
for (var prop in o) {
console.log(prop)
}
//"q" delete o.p
//false //创建一个可写的,可枚举的,可配置的属性p
o2 = Object.create({}, {
p: {
value: ,
writable: true,
enumerable: true,
configurable: true
}
});

第二部分

  Object.setPrototypeOf() 方法设置一个指定的对象的原型 ( 即, 内部[[Prototype]]属性)到另一个对象或  null

  

语法:

Object.setPrototypeOf(obj, prototype)

参数

obj
要设置其原型的对象。.
prototype
该对象的新原型(一个对象 或 null).


示例

var dict = Object.setPrototypeOf({}, null);
 

一个例题:

    

其中的第一个题为true还是不难理解的, 开始这个对象obj的原型是 {name: "king"},然后因为是传递了引用,接着把原型又赋值给了null,但是呢,他们的地址没有变,还是在老地方,只是原型发生了变化。

Object.create 以及 Object.setPrototypeOf的更多相关文章

  1. (转)es6中object.create()和object.assign()

    今天学习javascript面向对象,在学习Obejct方法时了解到create方法,偶像想起之前使用的assign方法,顺带查找一番,感觉这篇博客讲解详细,遂转载. 先简单提一下装饰器函数,许多面向 ...

  2. Object.create 和 Object.assign

    Object.assign(target, ...source) 1.Object.assign方法只会拷贝源对象自身(不包括原型)的并且可枚举的属性到目标对象,使用源对象的get和目标对象的set, ...

  3. js中的new操作符与Object.create()的作用与区别

    js中的new操作符与Object.create()的作用与区别 https://blog.csdn.net/mht1829/article/details/76785231 2017年08月06日 ...

  4. Object.create() 实现

    if (typeof Object.create !== 'function') { Object.create = function (o) { function F() {} F.prototyp ...

  5. Object.create()和new object()和{}的区别

    Object.create()介绍 Object.create(null) 创建的对象是一个空对象,在该对象上没有继承 Object.prototype 原型链上的属性或者方法,例如:toString ...

  6. js-new、object.create、bind的模拟实现【转载备忘】

    //创建Person构造函数,参数为name,age function Person(name,age){ this.name = name; this.age = age; } function _ ...

  7. ES5 Object.create 方法

    Object.create(proto[, propertiesObject])The Object.create() method creates a new object with the spe ...

  8. Object.create() __https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create

    Object.create() 方法会使用指定的原型对象及其属性去创建一个新的对象. 语法 Object.create(proto[, propertiesObject]) 参数 proto 新创建对 ...

  9. js 继承,Object.setPrototypeOf | Object.getPrototypeOf | Object.create class

    https://juejin.im/post/5cfd9d30f265da1b94213d28#heading-14 https://juejin.im/post/5d124a12f265da1b91 ...

随机推荐

  1. 【Android开源】CircleImageView自定义圆形控件的使用

    github地址:https://github.com/hdodenhof/CircleImageView package de.hdodenhof.circleimageview; import e ...

  2. 小小c#算法题 - 10 - 求树的深度

    树型结构是一类重要的非线性数据结构,树是以分支关系定义的层次结构,是n(n>=0)个结点的有限集.关于树的基本概念不再作过多陈述,相信大家都有了解,如有遗忘,可翻书或去其他网页浏览以温习. 树中 ...

  3. [译]Javascript中的switch语句

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  4. 事件Event 介绍总结

    最近在总结一些基础的东西,主要是学起来很难懂,但是在日常又有可能会经常用到的东西.前面介绍了 C# 的 AutoResetEvent的使用介绍, 这次介绍事件(event). 事件(event),对于 ...

  5. C#利用phantomJS抓取AjAX动态页面

    在C#中,一般常用的请求方式,就是利用HttpWebRequest创建请求,返回报文.但是有时候遇到到动态加载的页面,却只能抓取部分内容,无法抓取到动态加载的内容. 如果遇到这种的话,推荐使用phan ...

  6. Vue属性绑定

    v-bind:属性动态绑定数据,简写: v-html:绑定html代码 {{}}:绑定数据,另一种v-text v-bind:class="{‘red’:isActive}"  : ...

  7. Struct结构体

    1.结构体的定义与调用 // 定义结构体类型 // 结构体类型名为 MyDate1 struct MyDate1 { int year; int month; int day; }; // 定义结构体 ...

  8. java基础之语法和开发规则

    一. 代码书写的规则 以下面为例: 先写好结构 注意:为了避免错误,写代码时先把括号打齐,然后再补内容,每个”{}”里的内容开始写时要相比上一行多8个空格.为了方便可以用键盘上的 键代替(一般情况下时 ...

  9. MySQL数据库之插入显示图片

    图书馆系统项目需要用到好多图片,并且要求存入到数据库中,对这个特别感兴趣,于是上网查了资料,采用C#语言,进行了具体实现. 说明: 功能:往MySQL数据库插入并显示图片: 验证:执行插入功能后,我把 ...

  10. mysql DISTINCT根据某字段去重同时查出其他字段

    mysql有个关键字distinct用来去重的,但是使用时只能放在查询字段的最前边,如: SELECT DISTINCT user_id,age FROM t_user;若不是放在最前边,如:SELE ...