首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript入门总结——第二弹学习对象,分清__proto__、prototype

JavaScript入门总结——第二弹学习对象,分清__proto__、prototype

作者头像
萌兔IT
发布2019-07-26 11:32:06
4300
发布2019-07-26 11:32:06
举报
文章被收录于专栏:萌兔it萌兔it

Hello小伙伴们,我又来啦,今天我们要继续我们JavaScript的入门总结第二弹!!!

今天我们要探讨的是对象!在JS的世界中没有对象是万万行不通的,因为JS中几乎所有的事物都是对象,不了解对象,怎么了解JS呢~

不要伤感,生活中没有对象,来这里new呀!嘿嘿,那么JS中的对象到底是什么呢,它是拥有属性和方法的数据,比如说您有个女票,她拥有爱您的方法,也有爱生气的属性,这就是对象咯~要不兔妞在这给大家创建个女票吧!

嘿嘿,大家对这个女票还满意吗?那么自己试一试吧!我们详细的了解一下对象吧!

定义对象:

定义对象主要有四种方法:对象直接量、通过new创建对象、原型创建法、Object.create()方法

(1)对象直接量:这个就是上图中的创建方式,直接通过字符创建对象,简单写出来就是:var mengtu = {};三部分包括var关键字、对象名称和对象的值

(2)通过new创建:var rabbit = new Rabbit();这个和Java中的创建方式基本一样,通过new关键字创建rabbit

(3)原型:事实上,在JS中存在着一条我们看不到的链,叫做原型链,每个对象都从原型继承属性,从而我们可以通过Object.prototype来获取对原型对象的引用,创建对象

(4)通过Object.create()方法来创建对象,这种创建方法要先保证有一个现有对象,如已经存在一个rabbit1对象,通过rabbit1我们创建了一个rabbit2对象:var rabbit2 = Object.create(rabbit1);

对象属性:

还记得对象直接量创建对象时的{}吗,{}可以盛装key:value键值对,对象属性就是写在这里。比如一个小兔子是白色毛还是棕色毛,是红眼睛还是黑眼睛。那么我们又要怎样去访问属性呢,比如我想知道女朋友的firstname是什么。下面我们来展开说一下属性,从属性的访问方式、属性方法、属性类型三个方面出发:

(1)访问方式:三种访问方式都可以实现:object.property、object["property"]、customer["address"+i]

(2)属性方法:

删除属性:delete

检测属性:in、obj.hasOwnProperty、obj.propertyIsEnumerable

(3)访问器属性:其实JS也像Java中一样有setter和getter的存在,用来获取属性的返回值和设置值

(4)数据属性:

[[Configurable]]:能否通过deleted删除属性从而重新定义属 性,能否修改属性的特性,或者能否把属性修改为访问器属性;

[[Enumerable]]:表示能否通过for-in循环返回属性;

[[Writable]]:修改属性;

[[Value]]:数据值

(5)设置属性:Object.defineProperty(属性所在的对象,属性的名字,一个描述符对象);

对象方法:

对象通过定义函数的方法,来存储方法。比如我们将上面的girlFriend对象加工一下,introduction就是对象的方法,通过调用introduction方法,就可以获取到girlFriend的introduction,那么又怎样调用呢,类似于属性的调用:girlFriend.introduction()


说到这了,就加一个彩蛋吧,如果大家看过控制台,想必对__proto__并不陌生,是不是觉得__proto__和prototype有点相似呢,我们来比较一下:首先__proto__和constructor是对象所独有的,而prototype则是函数所独有的。但是我们说过JS中万物皆对象,所以函数也拥有__proto__和constructor,我们首先看一下定义:

prototype:

显式原型,每个函数都有prototype属性,它指向的是其创建的实例对象的原型,让该函数所实例化的对象们都可以找到公用的属性和方法。如下图构造函数Girlfriend的prototype指向的就是创建的gf的原型,原型是对象创建时与另一个对象产生的关联,也就是实例原型

__proto__:

隐式原型,当访问一个对象的属性时,如果该对象内部不存在这个属性,那么就会去它的__proto__属性所指向的那个对象(父对象)里找,一直找,直到__proto__属性的终点null,然后返回undefined,通过__proto__属性将对象连接起来的这条链路即我们所谓的原型链。JS对象中除了null以外的所有对象都有__proto__属性,这个属性指向对象原型:

function GirlFriend(){}

var gf = new GirlFriend()

gf.__proto__ === GirlFriend.prototype

constructor:

指向该对象的构造函数,所有函数(此时看成对象了)最终的构造函数都指向Function()。原型不能访问实力对象,但是可以借助构造器去访问构造函数,每个原型都有一个constructor属性:

function GirlFriend(){}

var gf = new GirlFriend() console.log(GirlFriend.prototype.constructor === GirlFriend) //true

原型链:

这就是一个原型链,事实上原型的原型是Object构造函数,而Object的原型是null,所以原型链到了Object就没有原型了。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-02-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 萌兔it 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档