function Car () {
this.color = "red";
}
Car.prototype.sayHi=function(){
console.log('你好')
}
var car =new Car();
var car2 = Object.create(Car);

new XXX()时发生了什么?

var obj={};
obj.__proto=Car.prototype
Car.call(obj)

第一步,创建了一个空对象obj
第二步,将空对象的__proto__成员指向了Car函数的原型属性,该原型属性是一个原型对象,也就意味着obj的原型属性上拥有了Car.prototype中的属性或方法

第三步,将Car函数中的this指针指向obj,obj有了Car构造函数中的属性或方法 ,然后Car函数无返回值或返回的不是对象,直接返回obj,否则返回Car函数中的对象


tip:__proto__是什么

每个对象都有一个[[prototype]}属性,这个属性是隐藏属性,谁创建了它,该属性就指向谁的prototype属性,因为是隐藏属性,不能直接访问,所以有的浏览器提供了一个__proto__属性来访问,然而这不是一个标准的访问方法,所以ES5中用Object.getPrototypeOf函数获得一个对象的[[prototype]]。ES6中,使用Object.setPrototypeOf可以直接修改一个对象的[[prototype]]

Object.create时发生了什么?

Object.create()方法创建一个新对象,并使用现有的对象来提供新创建的对象的__proto__,关键代码如下

关键代码如下:

Object.create =  function (o) {
var F = function () {};
F.prototype = o;
var newObj=new F();
return newObj;
};

可以看到Object.create内部创建了一个新对象newObj,默认情况下newObj.__proto__== F.prototype,在本例中则重写了构造函数F的原型属性,最终的原型关系链为newObj.__proto__== F.prototype == o

如果现有的对象是一个构造函数,即var car2=Object.create(Car)会发生什么呢?

console.log(car2.color)    //undefined
console.log(car2.sayHi()) //undefined

执行代码发现都是undefined, 为什么会这样呢?

问题1:因为Object.create内部的新对象是new F()创建的,跟Car构造函数没有半毛钱的关系,所以自然不能访问到Car中的属性了

问题2:调用car2.sayHi()时首先判断car2对象有没有相应的方法,如果没有,则查找car2的原型链上有没有该方法,car2的原型属性是Car构造函数(可以通过car2.__proto__来证明),构造函数没有sayHi方法,自然也就是undefined了。

那如果将var car2=Object.create(car)又发生了什么呢?

function Car () {
this.color = "red";
this.person={name:'张三'}
}
Car.prototype.sayHi=function(){
console.log('你好')
}
var car =new Car();
var car2 = Object.create(car);
car2.person.name ='李四'
console.log(`car是${car.person.name},car2是${car2.person.name}`)

相当于实现了原型继承方式(注意不是原型链继承),本质上来说是对一个对象进行了浅拷贝


最终结论:

1. Object.create(o),如果o是一个构造函数,则采用这种方法来创建对像没有意义

2.Object.create(o),如果o是一个字面量对象或实例对象,那么相当于是实现了对象的浅拷贝

js学习日记-new Object和Object.create到底干了啥的更多相关文章

  1. JS学习之--比较两个Object数组是否相等

    一.问题 在js中是不能直接用“==”或者“===”来计算两个数组是否相等的,那么就需要对数组的值进行比较: 二.次解决方案 对于比较两个数组次要的方法有如下几种,为什么说是次要解决方案呢?因为它不能 ...

  2. js学习日记-对象字面量

    一.对象字面量语法 var person={ name:'小王', age:18, _pri:233 } 成员名称的单引号不是必须的 最后一个成员结尾不要用逗号,不然在某些浏览器中会抛出错误 成员名相 ...

  3. js学习日记-隐式转换相关的坑及知识

    隐式转换比较是js中绕不过去的坎,就算有几年经验的工程师也很有可能对这块知识不够熟悉.就算你知道使用===比较从而避免踩坑,但是团队其它成员不一定知道有这样或那样的坑,有后端语言经验的人常常会形成一个 ...

  4. js学习日记 (1)createDocumentFragment() ES6 => 箭头

    只能说是会用和记载,深入理解还需时间. 有关性能优化: 使用createdocumentfragment()方法可以创建某个具有节点该有的所有属性的节点. 使用情况:  提取文档中的某个小部分,修改文 ...

  5. js学习日记-变量的坑

    js变量细节是前端面试经常遇到的问题,可见其重要程度,要想掌握这个知识点,需注意以下几点: 变量提升 所谓变量提升,就是使用了var关键字申明的变量,会提升到所在作用域的顶部.es5的作用域分为全局作 ...

  6. js学习日记-常用正则符号参考

    预定义类 量词 贪婪.惰性.支配性量词 前瞻 边界 RegExp是全局对象,RegExp.$1...$9是全局属性.当执行任意正则表达式匹配操作时,JavaScript会自动更新全局对象RegExp上 ...

  7. js学习日记-各种宽高总结(配图)

    1.窗口和浏览器 window.innerWidth.window.innerHeight   浏览器内部可用宽高 window.outerWidth.window.outerHeight   浏览器 ...

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

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

  9. js原型链接(二)和object类的create方法

    原型链的内部执行方式 <script> function Myclass(){ this.x=" x in Myclass"; } var obj=new Myclas ...

随机推荐

  1. POJ 3233 Matrix Power Series 【经典矩阵快速幂+二分】

    任意门:http://poj.org/problem?id=3233 Matrix Power Series Time Limit: 3000MS   Memory Limit: 131072K To ...

  2. js 跳转整理

    js方式的页面跳转1.window.location.href方式    <script language="javascript" type="text/java ...

  3. GPU卡掉卡

    这几天用GPU卡跑东西,老是提示opencv的一个问题.但是我换个数据跑就没问题.说明代码是没问题的.发挥我作为女人的特质,从起试试吧.结果从起后找不到GPU卡了.nvidia-smi提示我没有安装最 ...

  4. iOS:常用属性、方法

    前言:一段时间没接触,很容易就忘记以前的知识.专写一篇,供几个月没接触,拿起却忘记了. 0.宏定义.系统相关 0-1).宏定义.规范 变量: //全局变量通常用小写g来提示 int gNumb=0; ...

  5. iOS 直播类APP开发流程解析

    1 . 音视频处理的一般流程: 数据采集→数据编码→数据传输(流媒体服务器) →解码数据→播放显示1.数据采集:摄像机及拾音器收集视频及音频数据,此时得到的为原始数据涉及技术或协议:摄像机:CCD.C ...

  6. Vue--- Vue(Pubsub + Ajax) 数据交互

    案例知识点 兄弟组件儿的通信     使用了Pubsub    订阅与发布 ajax数据请求    获取前   获取中   获取后   获取为空    获取异常 获取成功后显示数据给到  原先定义号的 ...

  7. ABAP术语-Lock Argument

    Lock Argument 原文:http://www.cnblogs.com/qiangsheng/archive/2008/02/29/1085717.html Locked fields in ...

  8. motto - MySQL - 常用命令

    本文搜索关键字:motto mysql 登录数据库 mysql -uroot -proot -P3306 -h127.0.0.1 --prompt "\u@\h \d>" - ...

  9. Mac系统配置php环境

    [写在前面——叨叨叨] -_-#急着配环境的同志们可以绕道.最近学校的实验室里接了一个小项目——考勤刷卡系统,利用RFID在硬件层获取学生卡的ID,通过wifi传输至服务器,进行考勤信息存储,手机端获 ...

  10. thinkphp验证码实现。

    作为我大天朝的程序员,如果不会点thinkphp框架确实有点说不过去了(虽然作为菜鸟的我才入坑没几个月).不过不会也没关系,很简单的一个php框架.今天为大家介绍的是thinkphp如何实现验证码的功 ...