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

let obj = {};
obj.num = 1;
obj.string = 'string';
obj.func = function(){alert('func')};
obj.arr = ['x','y'];
console.log(obj.num); //
console.log(obj.string); // "string"
console.log(obj.func); //function(){alert('func')}
console.log(obj.arr); //["x", "y"]

或是:

let obj = {
num: 1,
string: 'string',
func: function() {alert('func')},
arr: ['x', 'y']
}

构造函数方式:

function animal() {
this.name = 'animal';
}
let obj = new animal();
console.log(obj.name); //"animal"

等等。

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

function animal() {
animal.prototype.name = 'animal';
animal.prototype.x = 1;
}
let obj = new animal();
obj.x = 10;
console.log(obj.name); //'animal'
console.log(obj.x); //
console.log(animal.prototype.x) //

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

我们再来看下案例:

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

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

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

let cat = new Object({
name: 'cat',
y:100
}); let obj = Object.create(cat);
obj.x = 1;
console.log(obj.hasOwnProperty('x')) //true
console.log(obj.hasOwnProperty('y')) //false
console.log(obj.name) //cat
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. FileSystemWatcher触发多次Change事件的解决办法 .

    最近要用到FileSystemWatcher来监控某个目录中的文件是否发生改变,如果改变就执行相应的操作.但在开发过程中,发现FileSystemWatcher在文件创建或修改后,会触发多个Creat ...

  2. [Java] 使用 Spring 2 Portlet MVC 框架构建 Portlet 应用

    转自:http://www.ibm.com/developerworks/cn/java/j-lo-spring2-portal/ Spring 除了支持传统的基于 Servlet 的 Web 开发之 ...

  3. hadoop群集安装中碰到的问题

    在hadoop群集安装结束后,进行格式测试出现问题如下 格式化 cd /data/hadoop/bin ./hdfs namenode -format 15/01/21 05:21:17 WARN f ...

  4. Java快速入门

    Java 是什么? Java 的特点: 面向对象 平台无关(跨平台): 简单 安全 体系结构 - 中性 可移植 健壮 多线程 解释型 高性能 分布式 动态 Java环境设置: Java SE可免费提供 ...

  5. 【阿里云产品公测】一句话告诉你什么样的人该使用ACE,如何使用ACE

    作者:阿里云用户小鸡咕咕 首先回应标题,这一句话就是:看完这篇帖子你就知道了.     前言 写在文章之前,我想先阐述一下写这篇文章的意义.可能大伙就要说了,写这篇文章不就是为了200的代金券吗?错, ...

  6. 【Shell脚本学习6】Shell变量:Shell变量的定义、删除变量、只读变量、变量类型

    Shell支持自定义变量. 定义变量 定义变量时,变量名不加美元符号($),如: variableName="value" 注意,变量名和等号之间不能有空格,这可能和你熟悉的所有编 ...

  7. java.util.concurrent.CountDownLatch

    闭锁是一种同步工具类,可以延迟线程的进度直到闭锁到达终止状态. 闭锁的作用相当于一扇门,在闭锁到达结束状态之前,这扇门一直是关闭的,任何线程都不能通过这扇门,当闭锁到达结束状态时,这扇门会打开并允许所 ...

  8. hdu 3450 树状数组

    思路:二分查找位置,之后是裸的树状数组. #include<set> #include<map> #include<cmath> #include<queue ...

  9. 转: ios app架构设计

    http://keeganlee.me/post/architecture/20160107 看完这一系列文章后就知道怎么回答这类问题了: App架构设计经验谈:接口的设计 App架构设计经验谈:技术 ...

  10. swift(一)

    var floatNum:Float = 10.2 //浮点型 var double:Double = 10.3333 //双精度浮点型 var isSuccess:Bool = true //fal ...