android5.1 es6,ES6深入浅出-5 新版对象-1.如何创建对象

对象属性的加强:

1fefe0096100fc26a4165b75a013ab91.png

可以通过new Object(),{}) 包含的一个由零个或多个对象属性名和其关联值组成的一个逗号分隔的列表构成。

上面那句话说的是如何产生一个新的对象。

下面代码。a就是一个空对象,

127d9e8974ee11ed4bb7cece5ebefe60.png

空对象只有一个属性。那就是_proto_

7afee75daa593b304de2a586d4bbb7f7.png

使用object.create去创建对象,需要传个参数,这里传null。就真的是一个空对象了,里面什么都没有

fca2d9dde8c287d631996bcfd3e78042.png

Object.create是ES6的语法新增的,产生一个真正什么都没有的对象。

去调用它的任何方法都是没有的,例如下面调用toString的方法

77a7d0afc2764836934c502384371a1c.png

上面创建的a还是有一些自己的方法的 例如toString

95e76e14d5b425e037b6a801acdbe91a.png

ed71af49e1e4389362264677b8cec8ed.png

db53069788b6d2a979e2b218c10ce002.png

ES6创建另外一种方式,传入参数Object.prototype。那么这个c就和ES5语法创建的a对象是一样的了。

a2c8f9f1da304117213ed740f842783c.png

={}等价于new Object()

fbf4fafb581575d46aebb6f9c7de80de.png

输出d对象,看一下和a是一样的

a4e550906fc7dff32ff8e7d31814f790.png

看起来就是个对象,这就是自面量

b6df057fbc1cfa7b3ae1b4aa482409c8.png

如果是用函数造的对象就是非字面量

694c21a5e8a440a7aa387fa0b2b14d3c.png

ES6就是多了个空能可以产生真正的空对象。

ES5的时候是没法产证真正的空对象的。除非是产生后,再把这个属性删掉。

ES2015就是ES6,因为ES6是2015年发表的。

ES6的新标记

1807fa99b66b15791f50198a048e347b.png

获取对象的属性,下面两个是等价的

b6fd06df165b81f816e19367fa76c8b6.png

新的语法,ES6的对象会 更严格

定义属性,后面又不小定义了一个a。后面的a覆盖前面的a

09e03c2c8fb0b51cd19beb344225513d.png

对象的缩写

如果左边是字符串a右边是变量a 那么就可以只用下面简写的方式。

47fff050dcc8cbb9e7636df53a9343c4.png

动态属性名,动态key

想让a编程下面的name这里,变成这个对象的key

22d820f6a2fe404a783c47fe57f2445e.png

这样写其实不是a,输出的是name,name就是这个key

ce7dc37ba39e74b5dc362ec735113dc7.png

object先声明为空对象,

84a1b2b2890ef82fcc94aa08adb6d0d1.png

这样做就比较麻烦,不能在一开始定义的时候就把name的值放进去。

ede78ff572daba2c499bbdb709774f8b.png

于是ES6就提供了一种新的语法。直接[name],中括号括起来, 这叫做动态属性名。这样es6就知道你是想要变量name,而不是字符串name

4b72d12e2379fe102b20d77f38357136.png

js这个里的name不加引号是一个巨坑,很多新人不明白这里到底是变量还是字符串。正常来说加引号是最好的。

c64077271331d12659416bf6dfb975a2.png

get&set

有人对age的值,进行了修改。能不能对age的值做一些限制。

df9ba4c0c94db842d52bf8914cd97177.png

对属性的读和写进行自定义的操作。读的是时候是访问的get age的函数,写的时候是访问set age的函数。我们在写的函数里面做出一些判断。

01504f89c5ae59db0b31d5ce37834f39.png

这里有这么个age,看起来是一个值,实际上他是一个get gae访问器和set age访问器,所以并不存在一个叫做age的属性。这是一个动态属性。

3a7e5518f0eec093c6d0944ea046ad88.png

那么下划线的age是必须的吗?可以不是必须的。

o.age实际上是两个函数。当你做读o.age的时候,相当于访问了get age 函数。

987f58cc8b2d3e26ed1281e35af124f7.png

给window上添加属性,用Object.defineProperty.给windows添加属性a提供get。

这样window对象就有a的属性,

9aab18386c205b049d4d9955571f92b8.png

访问a的值,每次都在变,因为上面我们控制了a的读取过程。每次读取window.a实际上就是在读取get函数的return 值。这样我们就可以做window同时等于1、2、3

9d5b314735637ffc1fb4616806286c97.png

所以a同时等于1、2、3最终返回true是成立的。

69beac6e8c4d9bb4431d46bf1bd2f723.png

计算属性的属性名可以做运算

1bda8536cd4162be9cd5699ce003772b.png

扩展属性

3795187eb2f84df4036f305b9e4ef814.png

直接写obj1等于obj2,会使得obj1和obj2是同一个对象,他们只是存的对象的地址而已。

694e72e0c1f4e56d1d493697bc65b287.png

修改了obj2的a的值为4.那么obj1的值也是4。他俩是同一个对象。所以需要做一个全拷贝。让他俩是不同的对象。

43125ef17f9dc6faafcc9f3b3354caa4.png

怎么证明是同一个对象呢?用三个等号一看。

3a1e36f687142c0f4056f428fd2472c5.png

最简单的全拷贝,先定义obj2为一个空对象,然后for循环,把obj1里面每一个对象复制到obj2

2806e07a9d2f259967636db0ba3603af.png

这个时候再去修改obj2的值,那么obj1的值不会发生变化。因为我的a是自己的a。不是你的a。所以他们之间是没有关系的

5c751c1dcb2c3b77c39ee087245d2598.png

简写的方式Object.assign

把后面的obj1这个对象的每一个key和value复制到前面这个对象{}。然后把前面这个对象作为返回值,返回回来。 就得到了obj2

0b3349be66c6f7474959d7f13bce87b5.png

这个时候再求修改2的值 1不会变化

14cb5566f9c9a858323178db630f7f33.png

这样省去了些for循环。这是ES6提供的语法。

ES6还提供了语法单个点运算符的方式

74c81e435e19549ebec9706c122096a6.png

36e77ce6f846b948709e0dfa9085c13b.png

综合语法

e75a951fa149016db8b1e53c49eb30cd.png

调用obj4的x函数。

8c8b416109b1dec81c60ba21baf8f7e1.png

变更原形

ca7a8a245f1fbd9a5b56e76764bcdeea.png

任何一个对象都有下划线proto的值,但是es6明确的规定 你不要自己去访问,这个值是留给浏览器用的。它只是用来记住它的共有属性在哪里。

a是没有属性的,a的toString是在它的共有属性里面。

8d5b7c882db6b178bdcd670213681245.png

a.valueOf也是一个函数。

27472da24a78565c6fb605ec6c51702f.png

如果a没有任何的a。toString和valueOf是哪里来的?看下图

52c1432c10c99ea99aa02588bf10cece.png

__proto__实际上就是Object.prototype。指向Object.prototype这个对象

7a15c110bfb191b21d80251220f2e78f.png

Object.prototype里面就有我们常用的这些属性和方法。

7fcc18367ecfb6c7f9adad0a2d7205a1.png

如果想让a的隐藏属性变一下,声明一个b,有个函数叫做sayHi,

d5711395a3a09af05946725ff906a931.png

想让a也有这个sayHi属性,用Object.create创建的时候参数传入b。a现在是一个空对象,但是a里面有sayHi

5cfac42921f6c767503b8640c568a42d.png

也就是a__proto__和b是相等的。这个关系我们就叫做b是对象a的原型

347e86c15fc6dee5d25d7051532d0a6b.png

以前a的原型是Object.prototype。现在a的原型就是b,也就是以为着b有的所有属性,都可以通过a直接访问到。

1c228a87bf357100d6e852be6466d63d.png

那么a还有没有toString呢?还有的

e851c1ea66b5513f23736724e19becf5.png

a的原型还有原型。在那有toString

2567b5613e03eb49ca6f54e47aed507f.png

b的原型是object

0d7675fa4f5c5c62e651fadd8b4c9ae4.png

es6的标准 不要在任何时候使用 下划线proto

cbdcd6dcc9129356797d4959e4899994.png

getPrototypeOf获取到对象的原型

提供了拿到原型的方法,推荐用getPrototypeOf

90b6890624e73b1f319f6aac3e544733.png

用hasOwnPropertype判断是有没有__proto__属性判断是没有。但是直接用a.__proto__反而可以输出。这里记住就可以了。

124c84c63597d7eac9eb49980c2fa90c.png

__proto__很不受标准待见。

js的对象与JSON的对象的区别,

54d140488f1a94378e4b4aa8487e174a.png

json是一门数据语言。没有function

结束

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值