Object.create()对对象属性prototype和proto的影响

wangbjun 发布于2019-08-19 18:48 / 2816人阅读

摘要：语法参数一个对象，作为新创建对象的原型。注意该参数对象不能是，另外只有该对象中自身拥有的可枚举的属性才有效，也就是说该对象的原型链上属性是无效的。三题目详解属性表示对象的原型对象。

下面是一段判断信息详情是否有修改的逻辑，贴上项目展示：

那么问题来了，大家自行脑补一下如何判断图片是否有修改。

一、下面看两道关于Object.create()的经典面试题 第1题

var a = { name: "kelen" };
var b = Object.create(a);
b.name = "boke";
console.log(a.name);

第2题

var a = { person : { name: "kelen" } };
var b = Object.create(a);
b.person.name = "kobe";
console.log( a.person.name );

思考

为什么第一个修改obj2的name属性，obj1的name输出是one，而第二个却可以改变呢？

二、解释：Object.create函数

Object.create()方法创建一个拥有指定原型和若干个指定属性的对象。

语法

Object.create(proto, [ propertiesObject ])

参数

proto

一个对象，作为新创建对象的原型。

propertiesObject

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

抛出异常

如果 proto 参数不是 null 或一个对象值，则抛出一个 TypeError 异常

返回值

一个具有指定的内部原型且包含指定的属性（如果有）的新对象。

三、题目详解

Object.prototype 属性表示对象 Object 的原型对象。

__proto__ 属性表示对象 Object 的原型，原型的值可以是一个对象也可以为null，比如说Object.prototype.__proto__就是null

从上面的例子分析，当var b = Object.create(a);的时候，不等同于b = a，实际上就是

b.__proto__ ==> a; 

b.prototype ==> a.prototype;

当我们对b.name = "kobe"的时候，实际上是在b对象新增一个属性，并且赋值，但是在b.name = "kobe"之前打印console.log(b.name);的时候输出"kelen"，是因为在原型链去找到a的name属性，所以可以取到a的值

所以下面b.name = "kobe"并不会改变a的name属性，如果要实现a.name最后的值为kobe的话，可以这样写b.__proto__.name = "kobe";

而第二种情况，

b.person.name = "kobe"却可以改变a.person.name的值是因为，b.person是一个a.person的对象引用，当b.person.name进行赋值，实际上就是对a.person.name进行修改，举一个简单的引用类型的例子

var a = { name: "kelen" };
var b = a;
b.name = "kobe";
console.log(a.name); // kobe

四、项目问题详解 第1题

var a = { name: "kelen" };
var b = Object.create(a);
b.name = "boke";
console.log(a.name);  // kelen

第2题

var a = { person : { name: "kelen" } };
var b = Object.create(a);
b.person.name = "kobe";
console.log( a.person.name ); // kobe

项目代码

//原始接口拿到的福利信息, //图片列表对象
originInfo={
    welfareName:"中影国际",
    imageList:[
        {
            id:"5157",
            wIFImgUrl:"http://tcw-wsq.b0.upaiyun.com/2016/07/12/34/20160713165313449.jpg"
        },
        {
            id:"5158",
            wIFImgUrl:"http://tcw-wsq.b0.upaiyun.com/2016/07/14/34/20160732112832397.jpg"
        }
    ]
};

//$scope.welfareInfo=originInfo;  //no，完全行不通
//$scope.welfareInfo=Object.create(originInfo); //no，不可以
var originInfoCy=JSON.stringify(originInfo);  //stringify用于从一个对象解析出字符串
$scope.welfareInfo=JSON.parse(originInfoCy);  //parse 用于从一个字符串中解析出json 对象

对于这个问题正确的处理方法是，将originInfo对象转变成字符串，字符串并不是引用类型的，继而再转换成对象，它就完美解决问题啦啦。。。

私有云服务器托管 python的_ i节点_检查和修复linux 服务器虚拟化_集群和云 prototype_proto

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80016.html

Object.create()对对象属性prototype和__proto__的影响

摘要：语法参数一个对象，作为新创建对象的原型。注意该参数对象不能是，另外只有该对象中自身拥有的可枚举的属性才有效，也就是说该对象的原型链上属性是无效的。三题目详解属性表示对象的原型对象。下面是一段判断信息详情是否有修改的逻辑，贴上项目展示： showImg(https://segmentfault.com/img/bVzcLW); 那么问题来了，大家自行脑补一下如何判断图片是否有修改。一...

dabai 2019-08-01 15:27 评论0 收藏0
原型链是什么？关于原型链中constructor、prototype及__proto__之间关系的认

摘要：的隐式原型是母，母是由构造函数构造的，但函数的隐式原型又是。。。。可能是考虑到它也是由构造函数生成的吧，所以返回的值也是。 showImg(https://segmentfault.com/img/bVyLk0); 首先，我们暂且把object类型和function类型分开来，因为 function是一个特殊的对象类型，我们这里这是便于区分，把function类型单独拿出来。顺便一提，...

kaka 2019-08-19 18:41 评论0 收藏0
JavaScript 原型系统的变迁，以及 ES6 class

摘要：一般我们对这种构造函数命名都会采用，并把它称呼为类，这不仅是为了跟的理念保持一致，也是因为的内建类也是这种命名。由生成的对象，其是。这是标准的规定。本文的主题是原型系统的变迁，所以并没有涉及和对原型链的影响。概述 JavaScript 的原型系统是最初就有的语言设计。但随着 ES 标准的进化和新特性的添加。它也一直在不停进化。这篇文章的目的就是梳理一下早期到 ES5 和现在 ES6，...

chuyao 2019-08-22 11:59 评论0 收藏0
javascript的面向对象，原型链及继承

摘要：也就是说，不必在构造函数中添加定义对象信息，而是可以直接将这些信息添加到原型中。子类的属性，表示构造函数的继承，总是指向父类。以前，这些原生构造函数是无法继承的。面向对象 js是一门基于对象的语言。js中的一切皆对象; console.log(Object.prototype.toString.call(123)) //[object Number] console....

Xufc 2019-08-22 14:00 评论0 收藏0
JS 中的 __proto__ 与 prototype

摘要：在这篇文章中，他介绍了一种实现继承的方法，这种方法并没有使用严格意义上的构造函数。的左值一般是一个对象，右值一般是一个构造函数，用来判断左值是否是右值的实例。 __proto__ 探究 __proto__隐式原型与prototype显式原型是个容易令人混淆的概念，简而言之prototype是构造函数用来被自己的实例继承的原型，而_proto_是实例用来继承父类原型的载体。 1. 是什么...

Donald 2019-08-22 11:14 评论0 收藏0