1、作用

Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create

2、Object.create内部实现

Object.create =  function (o) {

    var F = function () {};

    F.prototype = o;

    return new F();

};

Object.create是内部定义一个对象，并且让F.prototype对象 赋值为引进的对象/函数 o，并return出一个新的对象。

3、使用Object.create实现继承

说明：以下示例使用Object.create创建的对象obj，obj只有父类的prototye上的属性和方法。不具有父类示例上的方法。

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>使用Object.create实现继承</title>

    </head>

    <body>

        <script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script>

        <script type="text/javascript">

            var Base = function() {

                //实例属性

                this.a = 2

            }

            //原型属性

            Base.prototype.a = 3;

            //原型方法

            Base.prototype.sayA = function() {

                return this.a

            };

            //创建实例o1

            var o1 = new Base();

            //创建实例o2

            var o2 = Object.create(Base.prototype);

            console.log(o1)

            console.log(o2)

            //打印实例

            console.log(o1.a); //2

            console.log(o2.a); //3

            console.log(o1.sayA()); //2

            console.log(o2.sayA()); //3

            console.log(o1 instanceof Base); //true

            console.log(o2 instanceof Base); //true

        </script>

    </body>

</html>
Object.create还有第二个参数：
Object.create(proto, [propertiesObject])

propertiesObject可选。如果没有指定为 undefined，则是要添加到新创建对象的可枚举属性（即其自身定义的属性，而不是其原型链上的枚举属性）对象的属性描述符以及相应的属性名称。这些属性对应Object.defineProperties()的第二个参数。

强调：是自身的属性，而不是原型链上的属性。

同时，默认是不可枚举的。

const obj = Object.create({}, {p: {value: 42}});

Object.values(obj) // []

若设置为枚举的话：

const obj = Object.create({}, {p:

  {

    value: 42,

    enumerable: true

  }

});

Object.values(obj) // [42]
 

4、new做了什么操作

var obj  = {};

obj.__proto__ = Base.prototype;

Base.call(obj);

总结来说：obj的__proto__指向父类的原型对象，因此可以访问父类原型对象上的方法。将父类的this指向obj，因此obj可以访问父类实例上的方法和属性。

更新：2019.1.3

function New2(func){

                let obj = Object.create(func.prototype)

                let k = func.call(obj)//this指向obj

                if (typeof k == 'object') {

                    return k

                } else{

                    return obj

                }

            }

5、继承说明

sub.prototype = new Super()

因为prototype是一个对象，所以让它等于一个对象，而不是Super方法。

js Object.create 初探的更多相关文章

  1. JS - Object.create(prototype)方法

    用Object.create(prototype)方法创建一个对象,这个对象的原型将指向这个传入的prototype参数

  2. 【前端】js中new和Object.create()的区别

    js中new和Object.create()的区别 var Parent = function (id) { this.id = id this.classname = 'Parent' } Pare ...

  3. [JS] Topic - Object.create vs new

    故事背景 Ref: 你不知道的javascript之Object.create 和new区别 var Base = function () {} (1) var o1 = new Base(); (2 ...

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

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

  5. js继承之Object.create()

    通过 Object.create() 方法,使用一个指定的原型对象和一个额外的属性对象创建一个新对象.这是一个用于对象创建.继承和重用的强大的新接口.说直白点,就是一个新的对象可以继承一个对象的属性, ...

  6. js创建对象 object.create()用法

    Object.create()方法是ECMAScript 5中新增的方法,这个方法用于创建一个新对象.被创建的对象继承另一个对象的原型,在创建新对象时可以指定一些属性. 语法: Object.crea ...

  7. js学习日记-new Object和Object.create到底干了啥

    function Car () { this.color = "red"; } Car.prototype.sayHi=function(){ console.log('你好') ...

  8. 使用 Object.create实现js 继承

    二.Object.create实现继承 本文将来学习第七种继承方式Object.create()方法来实现继承,关于此方法的详细描述,请戳这里.下面来通过几个实例来学习该方法的使用: var Pare ...

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

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

随机推荐

  1. Cannot find snapshot in models/VGGNet/VOC0712/SSD_300x300

    错误描述: 执行 python examples/ssd/ssd_pascal.py 报错: Cannot find snapshot in models/VGGNet/VOC0712/SSD_300 ...

  2. [转]抢先Mark！微信公众平台开发进阶篇资源集锦

    FROM : http://www.csdn.net/article/2014-08-01/2820986 由CSDN和<程序员>杂志联合主办的 2014年微信开发者大会 将于8月23日在 ...

  3. Unicode和UTF-8之间的关系

    作者: 阮一峰 日期: 2007年10月28日 今天中午,我突然想搞清楚Unicode和UTF-8之间的关系,于是就开始在网上查资料. 结果,这个问题比我想象的复杂,从午饭后一直看到晚上9点,才算初步 ...

  4. Chart：ECharts

    ylbtech-Chart:ECharts ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome, ...

  5. 命令行调用dubbo远程服务

    命令行调用dubbo远程服务 telnet远程连接到dubbo telnet 127.0.0.1 20880 查看提供服务的接口 dubbo>ls com.test.service.TestIn ...

  6. go语言之进阶篇数组越界导致panic

    1.数组越界导致panic 示例: package main import "fmt" func testa() { fmt.Println("aaaaaaaaaaaaa ...

  7. C#中的集合（HashTable与Array类）【转】

    一.Array类 1.Array类的属性 序号 属性 & 描述 1 IsFixedSize 获取一个值,该值指示数组是否带有固定大小. 2 IsReadOnly 获取一个值,该值指示数组是否只 ...

  8. C++ stringstream格式化输出输入探索

    - 最近在笔试时经常遇见各种输入问题,于是细心总结一波: - 首先string str; cin>>str;遇到空格结束: - 于是乎产生了getline(),可与得到一行字符串:空格自动 ...

  9. iOS开发-CocoaPods实战

    CocoaPods 是开发 OS X 和 iOS 应用程序的第三方库的依赖管理工具,如果是正常的开发不需要使用的第三方的代码,CocoaPods是不需要的,但是从实际情况上,为了提高开发效率,Coco ...

  10. 免费桌面视频录像工具OBS的简单操作介绍

    本帖最后由 felix0911 于 2014-5-21 09:32 编辑 0起点,傻瓜操作,为什么不尝试录制一个自己的游戏视频,来展现自己牛逼风骚的操作呢?(本教学不包括后期制作,特效背景音乐等部分) ...