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. java解压缩zip和rar的工具类

    package decompress; import java.io.File; import java.io.FileOutputStream; import org.apache.tools.an ...

  2. java获取视频播第一帧

    FFMPEG 功能很强大,做视频必备的软件.大家可通过 http://ffmpeg.org/ 了解.Windows版本的软件,可通过 http://ffmpeg.zeranoe.com/builds/ ...

  3. java.lang.IllegalStateException: The remote endpoint was in state [TEXT_FULL_WRITING] which is an invalid state for called method 解决办法

    java.lang.IllegalStateException: The remote endpoint was in state [TEXT_FULL_WRITING] which is an in ...

  4. Ubuntu下搭建Hyperledger Fabric v1.0环境

      多次尝试才正常启动了Fabric,如遇到各种莫名错误,请参考如下一步步严格安装,特别用户权限需要注意. 一.安装Ubuntu16 虚拟机或双系统,虚拟机有VirtualBox或者VMware,Ub ...

  5. [转]CENTOS LINUX安装并使用NFS共享文件

    FROM :http://www.qiansw.com/centos-linux-nfs.html NFS是linux常用的一种文件分享工具. 下面介绍安装及使用方法. CentOS 5.5 yum ...

  6. Verilog 加法器和减法器(3)

    手工加法运算时候,我们都是从最低位的数字开始,逐位相加,直到最高位.如果第i位产生进位,就把该位作为第i+1位输入.同样的,在逻辑电路中,我们可以把一位全加器串联起来,实现多位加法,比如下面的四位加法 ...

  7. 数学图形(1.47)贝塞尔(Bézier)曲线

    贝塞尔曲线又称贝兹曲线或贝济埃曲线,是由法国数学家Pierre Bézier所发现,由此为计算机矢量图形学奠定了基础.它的主要意义在于无论是直线或曲线都能在数学上予以描述. 上一节讲的是高次方程曲线, ...

  8. canvas移动端常用技巧图片loading

    核心知识点:drawImage 作用:将图片加载在canvas html: <canvas id="myCanvas" width="200" heigh ...

  9. 【Scala】Scala多线程-并发实践

    Scala多线程-并发实践 scala extends Thread_百度搜索 scala多线程 - 且穷且独立 - 博客园 Scala和并发编程 - Andy Tech Talk - ITeye博客 ...

  10. 对Attention is all you need 的理解

    https://blog.csdn.net/mijiaoxiaosan/article/details/73251443 本文参考的原始论文地址:https://arxiv.org/abs/1706. ...