对于本篇对于如何自定义对象、和对象相关的属性操作不了解的话,可以查我对这两篇博客。了解这两篇可以更容易理解本篇文章

用构造函数创建了一个对象

obj对象的本身创建了两个属性  x=1   ,y=2

对象本的的两个属性都有属性特征  writable是否可写的,enumerable是否可枚举的 configurable是否可重置的,getter  ,setter

obj对象本身也有三大特性    proto 原型    class 类     extensible可拓展

foo.prototype是对象上的原型 , foo.prototype也是个对象。

z=3是foo.prototype是对象上原型的属性。

再往上object.prototype是一个顶级属性,是所有对象的原型。

再上往上就是null 空了。  此时就形成了一个原型链。

我再用代码来一一解析,用演示代码再向大家详细解释:

 1 <script>
 2       function Foo(){    //声名一个函数FOO
 3
 4       }
 5       alert(typeof Foo.prototype)    //Foo.prototype 是一个对象。也可以是obj对象上的原型
 6       Foo.prototype.z =3    //设置了原型属性z为3
 7       var obj = new Foo()    //用构建函数来创建了obj对象
 8       obj.x = 1;            //x=1是obj对象上本身的属性
 9       obj.y = 2;           //y=2是obj对象上本身的属性
10       alert(obj.x)         //=>1 对过查询对象,我们是否得到这个属性值
11       alert(obj.y)         //=>1 对过查询对象,我们是否得到这个属性值
12       alert(obj.z)        //=》3 z不是obj本身的属性,是他原型上的属性,如果本身没有,可以向他的原型链上的原型来查找,得到z属性
13       alert(obj.toString())//=toString是顶级object对象上的属性,先是查找原型上有没有这个属性,如果没有再往原型链上顶级的object对象上找
14 </script>

再来了解一下得到对象上属性的优先级。

如果在对象本身上有这个属性,则得到的是对象上本身的属性。

如果对象本身上有这个属性,则向他的原型上查找。

如果再没有再向顶级属性上查找。

如果原型上和对象本身上都有这个属性,则还是先用对象本身的属性

为了让大家更好的了解,演示代码如下:

 1 <script>
 2       function Foo(){    //声名一个函数FOO
 3
 4       }
 5       Foo.prototype.z =3    //设置了原型属性z为3
 6       var obj = new Foo()    //用构建函数来创建了obj对象
 7       obj.z = 5     //定义对象的属性Z = 5
 8       alert(obj.z)   //=>5  如果对象上本身定义了属性z ,则先用对象本身的属性
 9       delete obj.z;   //删除对象上本身的属性
10       alert(obj.z);   //=>3再次获取对象的z,结果发现对象本身z的属性被删除了,会自动往对象的原型上查找,得到z=3
11       delete Foo.prototype.z;  //删除对象原型上的z属性
12       alert(obj.z)   //=> undefined 因为对象本身的z属性被删除,原型上的z属性也被删除,再继续往顶级对象Object上查找,没有此属性,返回undefined
13 </script>

通过 var obj = Object.create({x:1}) 来创建对象来解析对象、对象上的原型

其实obj.create圆括号里面定义对象和属性就是obj对象的原型和原型属性,

演示代码如下:

1 <script>
2     var obj = Object.create({z:4})  //Object.create({z:4})是一个对象上的一个原型,z是原型上的属性
3       obj.x = 1      //x是对象本身的属性
4       obj.z = 3         //z是对象本身的属性
5       alert(obj.x)     //=>1  输出的是对象本身的x
6       alert(obj.z)     //=>3  输出的是对象本身的z
7       delete obj.z;    //当我们删除对象本的z
8       alert(obj.z)    //就是会向原型上面查找原型上有没有这个属性,如果有,z指的是原型上的属性
9 </script>

通过In来解释某个对象上是否有这个属性:

演示代码如下:

 1 <script>
 2     //用  属性 In  对象来检测 是否是对象上的属性,返回true否是,返回false 则不是
 3      function Foo(){
 4
 5      }
 6      Foo.prototype.z = 5
 7      var obj = new Foo()
 8      obj.x = 1 ;
 9      obj.y = 2;
10      alert("x" in obj)   //=>true x是对象上本身定义的属性
11      alert("y" in obj)   //=>true y也是对象上本身定义的属性
12      alert("z" in obj)   //=>true z是从对象原型上继承来的属性
13      alert("toString" in obj) //=>true toString是从顶级对象Object上继承来的属性
14      alert("no" in obj)   //=>false  对象本上没有,查找整个原型链都没有这个属性直到null 则反回false,
15 </script>

通过hasOwnProperty查找是否是对象本身的属性,而不是继承来的属性

 1 <script>
 2     //用对象.hasOwnProperty("属性") 来检测是否是对象本身的属性,而不是继承来的
 3      function Foo(){
 4
 5      }
 6      Foo.prototype.z = 5
 7      var obj = new Foo()
 8      obj.x = 1 ;
 9      obj.y = 2;
10      alert(obj.hasOwnProperty("x")) //=>true   x是对象本身定义的属性,所以返回true
11      alert(obj.hasOwnProperty("z")) //=>false   z是对象原型上继承的属性,所以返回false
12      alert(obj.hasOwnProperty("toString")) //=>false   toString是顶级对象上继承来的属性,所以返回false
13 </script>

我们最后来看看用var obj = Objcet.create()来创建的对象如何来检测他的属性。

如果想没有任何继续属性的话可以写  var obj = Object.create(null) 则不继承任何属性

演示代码:

 1 <script>
 2      var obj = Object.create({x:1})
 3       obj.y = 2
 4      alert("y" in obj)  //=>true
 5      alert("x" in obj)  //=>true
 6      alert("toString" in obj)  //=>true
 7      alert(obj.hasOwnProperty("x")) //=>false
 8      alert(obj.hasOwnProperty("y"))  //=>true
 9     var obj1 = Object.create(null)
10     alert("toString" in obj1)    //=>false 创建了一个不继承任何属性的对象obj1,直到顶级对象Object对象都不继承
11 </script>

js 中对象--对象结构(原型链基础解析)相关推荐

  1. JS中关于构造函数、原型链、prototype、constructor、instanceof、__proto__属性

    在Javascript不存在类(Class)的概念,javascript中不是基于类的,而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是在ES6中引入 ...

  2. JS中的继承与原型链

    对于原型我们通过[[prototype]].proto 以及 prototype 这三个概念理解其实现继承的思路. [[prototype]] 在 ECMAScript 标准中规定每个对象都有一个内置 ...

  3. 初学JavaScript:js中的对象(对象+原型对象)

    文章目录 js对象详解 1.创建对象 字面量模式创建对象 构造函数模式创建对象 2.访问对象 访问属性 访问方法 3.遍历对象中的属性和属性值 4.往对象中新添属性 5.删除对象中的属性 6.Obje ...

  4. 原生JS 对象 包装类 原形 原型链

    对象 用已学的知识点,描述一下你心目中的对象 var mrDeng = { name : "mrDeng",age : 40,sex : "male",heal ...

  5. JS中集合对象(Array、Map、Set)及类数组对象的使用与对比

    JS中集合对象(Array.Map.Set)及类数组对象的使用与对比 在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java ...

  6. Js中Array对象

    Js中Array对象 JavaScript的Array对象是用于构造数组的全局对象,数组是类似于列表的高阶对象. 描述 在JavaScript中通常可以使用Array构造器与字面量的方式创建数组. c ...

  7. javaScript核心学习 (二)函数和对象,继承原型链

    javaScript的函数和对象,继承原型链 一.函数 1.初始函数 2.创建函数 2.1 参数设置 2.2 函数声明 来创建函数 2.3 函数表达式创建函数 3.变量作用域 4.匿名函数 5.回调函 ...

  8. Js中Symbol对象

    Js中Symbol对象 ES6引入了一种新的基本数据类型Symbol,表示独一无二的值,最大的用法是用来定义对象的唯一属性名,Symbol()函数会返回symbol类型的值,该类型具有静态属性和静态方 ...

  9. php 遍历对象数组,js中遍历对象(5种)和遍历数组(6种)的方法总结

    本篇文章给大家带来的内容是关于js中遍历对象(5种)和遍历数组(6种)的方法总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.遍历对象方法 1.for...in 遍历输出的是对 ...

最新文章

  1. archlinux常用的包管理器
  2. [CES 2018] TPCast发布升级版本,将支持微软MR设备
  3. 机器学习第7天:深入了解逻辑回归
  4. python中用于标识字符串的定界符_001.python-基础-Template的字符串格式化
  5. 容器技术之kubectl常用命令
  6. linux php mysqldump,Linux Shell脚本之利用mysqldump备份MySQL数据库(详细注解)
  7. 怎么在html使用百度商桥,电脑版网站如何添加爱番番(原:百度商桥)
  8. jsf 导航_JSF动作方法导航示例教程– from-action标记
  9. 迭代器模式的原理和实现
  10. 使用 Travis 自动部署 Hexo 到 Github 与 自己的服务器
  11. 什么是数据运营?数据运营是做什么的?
  12. 剑网3手游微信52服务器灵霄峡,剑网3指尖江湖灵霄峡宝箱位置详解攻略
  13. stm32工程和算法分享(12)--精准闪烁灯[定时中断]
  14. EBP与ESP的作用
  15. 直击微软第九频道著名主持Robert Green 对话一站式示例代码库大老板梁梅女士
  16. 题库小程序盈利点分析
  17. emq 不断掉线重连
  18. storm trident mysql,storm_Trident
  19. 如何通过IE浏览器下载视频?
  20. windbg r eip=0xxxxxxxxx如何实现?

热门文章

  1. 【Linux 内核】进程优先级与调度策略 ② ( 获取调度策略对应的进程优先级函数 | sched_get_priority_max 函数 | sched_get_priority_min 函数 )
  2. Linux服务源码安装后开机自启动04-php-fpm
  3. 【算法笔记】B1044 火星数字
  4. top命令详析及排查问题使用演示
  5. RabbitMQ发布订阅实战-实现延时重试队列
  6. 数据结构与算法JavaScript描述——链表
  7. winform 基础
  8. result的type属性
  9. [原创] Legato 8.1 oracle full backup skip 奇怪的问题处理过程 -- 非调度日期手工运行调度也不成功(skip)...
  10. PetShop的系统架构设计[转]