javascript 创建对象及对象原型链属性介绍
我们知道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 创建对象及对象原型链属性介绍的更多相关文章
- JavaScript之继承(原型链)
JavaScript之继承(原型链) 我们知道继承是oo语言中不可缺少的一部分,对于JavaScript也是如此.一般的继承有两种方式:其一,接口继承,只继承方法的签名:其二,实现继承,继承实际的方法 ...
- javascript创建对象的方法--原型模式
javascript创建对象的方法--原型模式 一.总结 1.原型模式解决内存浪费的方法(继承):通过继承,对象继承原型模式下的所有属性,对象不同于其它对象的的属性自己创建或者修改 2.原型的使用(p ...
- react-native-pg-utils(对react-native全局进行配置,对内置对象原型链增加方法,增加常用全局方法.)
react-native-pg-utils 对react-native全局进行配置,对内置对象原型链增加方法,增加常用全局方法. 每次新建react-native项目之后都会发现有一些很常用的方法在这 ...
- 再访JavaScript对象(原型链和闭包)
一:原型链简介 JavaScript通常被描述为基于原型的语言 (从继承机制的角度)- 为了提供继承,对象(注意:区别于实例)可以拥有一个原型对象,它充当一个模板对象,它继承了方法和属性.对象的原型对 ...
- JavaScript对象原型链的学习
1.构造函数和原型 1.1对象的三种创建方式 字面量方式 var obj = {}; new关键字 var obj = new Object(); 构造函数方式 function Person(nam ...
- [js高手之路]一步步图解javascript的原型(prototype)对象,原型链
我们接着上文继续,我们通过原型方式,解决了多个实例的方法共享问题,接下来,我们就来搞清楚原型(prototype),原型链的来龙去脉. function CreateObj(uName) { this ...
- JavaScript创建对象及对象继承
面向对象的语言有一个标志,那就是他们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是在ECMAScript中没有类的概念,因此它的对象也与基于类的对象有所不同.实际上,JavaSc ...
- JavaScript高级内容:原型链、继承、执行上下文、作用域链、闭包
了解这些问题,我先一步步来看,先从基础说起,然后引出这些概念. 本文只用实例验证结果,并做简要说明,给大家增加些印象,因为单独一项拿出来都需要大篇幅讲解. 1.值类型 & 引用类型 funct ...
- javascript精髓篇之原型链维护和继承.
一.两个原型 很多人都知道javascript是原型继承,每个构造函数都有一个prototype成员,通过它就可以把javascript的继承演义的美轮美奂了. 其实啊,光靠这一个属性是无法完成jav ...
随机推荐
- C#获取进程的主窗口句柄的实现方法
通过调用Win32 API实现. public class User32API { private static Hashtable processWnd = null; public delegat ...
- WebApi 部署后一直返回404的解决办法
Fixing ASP.NET MVC 4 Web API 404 Posted on November 5, 2012 For a Web Service providing some REST-st ...
- 沈逸老师PHP魔鬼特训笔记(5)
接上一节课,我们专门新建了一个godconfig类,设置了两个属性prj_name(项目名),prj_author(作者),然后我们获取标准输入(stdin)把结果保存在了类里面. 好吧,这节课的名字 ...
- 【阿里云产品公测】OpenSearch初探
作者:阿里云用户 yqzzzz 这两天在折腾站内搜索,下午照例上阿里云网站看看ECS,OSS情况,恰巧看到免费公测的活动,咦,OpenSearch,看起来这不就是我要找的东西么! 1分钟时间填完申请 ...
- linux初学 :linux 常用命令(二)
压缩和解压命令 gzip/guzip zip/unzip tar gzip和gunzip一般可用参数是-r,例: gzip test.txt 压缩文件 gzip -r test 压缩所有tes ...
- jQuery的deferred对象详解(二)
Deferred对象是由$.Deferred构造的,$.Deferred被实现为简单的工厂模式. $.Deferred的实现 创建三个$.Callbacks对象,分别表示成功done,失败fail,处 ...
- QTREE3 spoj 2798. Query on a tree again! 树链剖分+线段树
Query on a tree again! 给出一棵树,树节点的颜色初始时为白色,有两种操作: 0.把节点x的颜色置反(黑变白,白变黑). 1.询问节点1到节点x的路径上第一个黑色节点的编号. 分析 ...
- ASP.NET多线程下使用HttpContext.Current
本来要实现asp.net下使用tcp通讯方式向服务器获取数据,开始采用的方式是 参考: ASP.NET多线程下使用HttpContext.Current为null解决方案 http://www.cnb ...
- Ajax异步操作集合啦(阿贾克斯)
/* * Ajax的核心操作对象是xmlHttpRequest * 简化操作步骤:实例化一个xmlHttpRequest对象 ==> 发送请求 ==> 接受响应 ==> 执行回调 * ...
- css3 transfrom使用以及其martix(矩阵)属性与其它属性的关系
写法 其属性martix与skew .scale .translate之间的关系 兼容性 : IE9+ : -ms-transform : IE9只支持2D转换 fire ...