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. Weblogic跨域session冲突解决办法

    一.现象: 在WebLogic中,有两个不同域A(端口:9000)和B(端口:8000),应用CA在域A中,应用CB在域B中,进行如下操作: 1.先登录应用CA,再登录应用CB,然后,切换回应用CA, ...

  2. 详解UILabel的adjustsFontSizeToFitWidth值

    详解UILabel的adjustsFontSizeToFitWidth值 UILabel有一个属性值,叫adjustsFontSizeToFitWidth,看着名字就知道,他是用来让文字自动适应UIL ...

  3. SQLUnit 环境搭建

    1 技术须要积累 前几天去一位笛友小赖家玩,才知道他的笛子吹得好不是偶然.是由于他真的用功了,电脑里面下载有超多的视频.教程等!这真的非常让我震撼!一直是在公司做技术,但资料考不出来,而我整理了多少技 ...

  4. android中得到颜色，图片资源的方式

    button01.setBackgroundColor(getResources().getColor(R.color.red)); color.xml colors.xml <?xml ver ...

  5. [转]windows7X64环境下wamp开启PHP_Curl组件

    From : http://www.justintseng.com/windows7x64-environment-wamp-open-php_curl-in-components 装上64位的win ...

  6. Guava CompoundOrdering

    概述 CompoundOrdering是Ordering的子类,它用来存储比较器链, Ordering的compound()内部实现就是使用 CompoundOrdering(Comparator&l ...

  7. 修改VIM恶心的注释自动格式化

    我复制一段代码,里面有// 只有一行,但是复制到vim中就下面全部都有//了.我要取消这个功能 vim ~/.vimrc set nu! "set formatoptions=croql 这 ...

  8. C/C++log日志库比较

    事实上,在C的世界里面没有特别好的日志函数库(就像Java里面的的log4j,或者C++的log4cxx).C程序员都喜欢用自己的轮子.printf就是个挺好的轮子,但没办法通过配置改变日志的格式或者 ...

  9. Tensorflow LSTM实现

    Tensorflow[LSTM]   0.背景 通过对<tensorflow machine learning cookbook>第9章第3节"implementing_lstm ...

  10. 深度学习(Deep Learning)算法简介

    http://www.cnblogs.com/ysjxw/archive/2011/10/08/2201782.html Comments from Xinwei: 最近的一个课题发展到与深度学习有联 ...