我们知道javascript里定义一个普通对象的方法,如:

  1. let obj = {};
  2. obj.num = 1;
  3. obj.string = 'string';
  4. obj.func = function(){alert('func')};
  5. obj.arr = ['x','y'];
  6. console.log(obj.num); //
  7. console.log(obj.string); // "string"
  8. console.log(obj.func); //function(){alert('func')}
  9. console.log(obj.arr); //["x", "y"]

或是:

  1. let obj = {
  2. num: 1,
  3. string: 'string',
  4. func: function() {alert('func')},
  5. arr: ['x', 'y']
  6. }

构造函数方式:

  1. function animal() {
  2. this.name = 'animal';
  3. }
  4. let obj = new animal();
  5. console.log(obj.name); //"animal"

等等。

不过每个对象都有它所对应的原型属性,譬如我们给一个对象添加原型属性:

  1. function animal() {
  2. animal.prototype.name = 'animal';
  3. animal.prototype.x = 1;
  4. }
  5. let obj = new animal();
  6. obj.x = 10;
  7. console.log(obj.name); //'animal'
  8. console.log(obj.x); //
  9. console.log(animal.prototype.x) //

上面我们给animal对象原型上添加了name和x属性,在下面 new 一个新的构造函数obj时,它本身是继承animal对象的,所以我们能找到obj里面的name属性值,不过obj一旦给animal已有属性 'x' 重新赋值为10的时候,这时候x的值就改变了,但是animal原型上的 'x' 值是没变的,原因是obj里的属性是优先找它自己里面有定义的属性,如果找不到,就会去它的原型链上找,也就是animal。

我们再来看下案例:

  1. console.log(typeof obj.toString) // "function"
  2. console.log('name' in obj) //true ‘in`关键字也会找到它的原型链上去,所以name是存在的
  3. console.log(obj.hasOwnProperty('x')) // true
  4. console.log(obj.hasOwnProperty('name')) //false

为什么obj对象和animal对象我们刚刚都没有定义toString方法,那这个toString方法是哪里来的?这也是一个优先级的问题,它会从obj开始一直向上查找,直到找到这个属性为止,如果没有将会返回undefined,而每个Object对象原型里里默认有toString方法的。hasOwnProperty()方法是用来判断一个对象是否有你给出名称的属性或对象,它使用来判断当前对象,而无法判断当前对象的原型链上的属性是否存在,因为obj没有定义name属性,所有返回false。

再介绍另外一个继承对象原型链的方法:

  1. let cat = new Object({
  2. name: 'cat',
  3. y:100
  4. });
  5.  
  6. let obj = Object.create(cat);
  7. obj.x = 1;
  8. console.log(obj.hasOwnProperty('x')) //true
  9. console.log(obj.hasOwnProperty('y')) //false
  10. console.log(obj.name) //cat
  11. console.log(obj.y) //

javascript 创建对象及对象原型链属性介绍的更多相关文章

  1. JavaScript之继承(原型链)

    JavaScript之继承(原型链) 我们知道继承是oo语言中不可缺少的一部分,对于JavaScript也是如此.一般的继承有两种方式:其一,接口继承,只继承方法的签名:其二,实现继承,继承实际的方法 ...

  2. javascript创建对象的方法--原型模式

    javascript创建对象的方法--原型模式 一.总结 1.原型模式解决内存浪费的方法(继承):通过继承,对象继承原型模式下的所有属性,对象不同于其它对象的的属性自己创建或者修改 2.原型的使用(p ...

  3. react-native-pg-utils(对react-native全局进行配置,对内置对象原型链增加方法,增加常用全局方法.)

    react-native-pg-utils 对react-native全局进行配置,对内置对象原型链增加方法,增加常用全局方法. 每次新建react-native项目之后都会发现有一些很常用的方法在这 ...

  4. 再访JavaScript对象(原型链和闭包)

    一:原型链简介 JavaScript通常被描述为基于原型的语言 (从继承机制的角度)- 为了提供继承,对象(注意:区别于实例)可以拥有一个原型对象,它充当一个模板对象,它继承了方法和属性.对象的原型对 ...

  5. JavaScript对象原型链的学习

    1.构造函数和原型 1.1对象的三种创建方式 字面量方式 var obj = {}; new关键字 var obj = new Object(); 构造函数方式 function Person(nam ...

  6. [js高手之路]一步步图解javascript的原型(prototype)对象,原型链

    我们接着上文继续,我们通过原型方式,解决了多个实例的方法共享问题,接下来,我们就来搞清楚原型(prototype),原型链的来龙去脉. function CreateObj(uName) { this ...

  7. JavaScript创建对象及对象继承

    面向对象的语言有一个标志,那就是他们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是在ECMAScript中没有类的概念,因此它的对象也与基于类的对象有所不同.实际上,JavaSc ...

  8. JavaScript高级内容:原型链、继承、执行上下文、作用域链、闭包

    了解这些问题,我先一步步来看,先从基础说起,然后引出这些概念. 本文只用实例验证结果,并做简要说明,给大家增加些印象,因为单独一项拿出来都需要大篇幅讲解. 1.值类型 & 引用类型 funct ...

  9. javascript精髓篇之原型链维护和继承.

    一.两个原型 很多人都知道javascript是原型继承,每个构造函数都有一个prototype成员,通过它就可以把javascript的继承演义的美轮美奂了. 其实啊,光靠这一个属性是无法完成jav ...

随机推荐

  1. 巧用FileShare解决C#读写文件时文件正由另一进程使用的bug

    在使用C#进行文件读写的时候,一旦对文件操作频繁,总会碰到一些令人措手不及的意外.例如经常会碰到的一个问题: System.IO.IOException: 文件“XXX”正由另一进程使用,因此该进程无 ...

  2. 【Android Studio使用教程4】Android Studio下载

    鉴于Android官网上下载很慢,Android Studio等已在网盘分享:Android Studio 网盘下载路径: windows:http://yunpan.cn/cfTszP2wrJxdD ...

  3. 【AsyncTask整理 1】 AsyncTask几点要注意的地方

    问题1:AsyncTask是多线程吗? 答:是. 问题2:AsyncTask与Handler相比,谁更轻量级? 答:通过看源码,发现AsyncTask实际上就是一个线程池,而网上的说法是AsyncTa ...

  4. leetcode 题解Merge Two Sorted Lists(有序链表归并)

    题目: Merge two sorted linked lists and return it as a new list. The new list should be made by splici ...

  5. php的一些简单算法程序(冒泡、快速等)

    冒泡排序: function buttle_sort($array) { $len=count($array); if($len<2){ return $array; } for($i=0;$i ...

  6. POJ 1860 Currency Exchange (最短路)

    Currency Exchange Time Limit:1000MS     Memory Limit:30000KB     64bit IO Format:%I64d & %I64u S ...

  7. curl模拟浏览器进行phpQuery抓取数据

    报Warning: file_get_contents(http://www.dianping.com/shop/8042874) [function.file-get-contents]: fail ...

  8. css3 transfrom使用以及其martix(矩阵)属性与其它属性的关系

    写法 其属性martix与skew .scale .translate之间的关系   兼容性 :       IE9+ : -ms-transform :  IE9只支持2D转换       fire ...

  9. Android 百度地图开发(一)--- 申请API Key和在项目中显示百度地图

      标签: Android百度地图API Key  分类: Android 百度地图开发(2)    最近自己想研究下地图,本来想研究google Map,但是申请API key比较坑爹,于是从百度地 ...

  10. SlickOne -- 基于Dapper, Mvc和WebAPI 的快速开发框架

    前言:在两年前,项目组推出了基于Dapper,Mvc和WebApi的快速开发框架,随着后续Slickflow产品的实践和应用,今再次对SlickOne项目做以回顾和总结.其目的是精简,持续改进,保持重 ...