ES6新增对象

Symbol

1.ES5的对象属性名都是字符串,容易造成命名冲突,ES6引入Symbol机制,以保证每个属性名都是独一无二的;

2.Symbol是JS的第七种原始数据类型,其他六种分别是undefined、null、布尔值、字符串、数值、对象;

3.Symbol值通过Symbol函数生成,凡是属于Symbol类型的属性名,保证不会与其他属性名产生冲突;

lets1=Symbol();

lets2=Symbol('foo');-->s2.toString();//

1.为Symbol函数添加的参数,就等于加上了描述,更容易区分,即使参数名相同,两个Symbol值也是不同的;

2.如果参数是一个对象,就会调用该对象的toString(),将其转为字符串,然后才生成一个Symbol值;

constobj={

toString() {

return'abc';

       }

   };

constsym=Symbol(obj);//Symbol(abc)

4.Symbol值不能与其他类型的值进行运算,即使是字符串拼接也不行;

1.但是,Symbol值可以显式转为字符串;

String(s2);s2.toString();// "Symbol(foo)"

2.Symbol值也可以转为布尔值,但是不能转为数值。

Boolean(s2)// true        !s2  // false

5.Symbol值作为对象的属性

letsym=Symbol();

1.第一种写法

leta={};

a[sym]='Hello!';

2.第二种写法

lets=Symble();

leta={

[sym]:'Hello!',

[s](arg) {...}

       };

3.第三种写法

leta={};

Object.defineProperty(a,sym, {value:'Hello!'});

4.获取属性值,不能通过.访问或设置

a[sym]// "Hello!"

a[s](123);

6.把Symbol作为一组不重复的常量值

constlog={};

log.levels={

DEBUG:Symbol('debug'),

INFO:Symbol('info'),

WARN:Symbol('warn')

   };

console.log(log.levels.DEBUG,'debug message');

console.log(log.levels.INFO,'info message');

constCOLOR_RED=Symbol();

constCOLOR_GREEN=Symbol();

functiongetComplement(color) {

switch(color) {

caseCOLOR_RED:

......

caseCOLOR_GREEN:

......

default:

......

       }

   }

7.Symbol作为属性名时,不会被for-in、for-of循环中

1.也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回;

2.但Symbol绝不是私有属性,Object.getOwnPropertySymbols()可以获取对象的所有Symbol属性名;

3.Object.getOwnPropertySymbols()返回一个Symbol属性名的数组

constobj={};

leta=Symbol('a');letb=Symbol('b');

obj[a]='Hello';obj[b]='World';

constsyms=Object.getOwnPropertySymbols(obj);//[Symbol(a), Symbol(b)]

4.Reflect.ownKeys():可以返回所有类型的键名,包括常规键名和Symbol键名;

letobj={

[Symbol('ab')]:1,

enum:2

   };

Reflect.ownKeys(obj);//["enum", "Symbol(ab)]

5.由于Symbol作为属性名时,不会被常规方法遍历得到,可以为对象定义一些非私有的、但又希望只用于内部的方法。

8.Symbol.for(),Symbol.keyFor()

1.Symbol.for('key'):复用Symbol,如果以key作为参数的Symbol存在,则直接返回,不存在则创建;

lets1=Symbol.for('foo');//新建

lets2=Symbol.for('foo');//复用

s1===s2;// true

2.Symbol.for()会被登记在全局环境中以供搜索,如果全局环境中已经存在了同key的Symbol,则复用;

而Symbol()每次都会新建一个不同的Symbol,且不会被登记在全局环境,所以不会被搜索到;

3.Symbol.keyFor():在全局环境中搜索一个已登记的Symbol

lets1=Symbol.for("foo");

Symbol.keyFor(s1);// "foo"

lets2=Symbol("foo");//不会被登记

Symbol.keyFor(s2);// undefined

4.Symbol.for登记在全局环境中,可以在不同的iframe或serviceworker中取到同一个值。

内置的Symbol值

ES6提供了11个内置的Symbol值,指向语言内部使用的方法

1.Symbol.hasInstance:对象的Symbol.hasInstance属性,指向一个内部方法;

1.当其他对象调用instanceof时,会调用此内部方法

classTest{

[Symbol.hasInstance](foo) {

returnfooinstanceofArray;-->如果foo是数组,则返回true

       }

   }

[1,2,3]instanceofnewTest();// true

2.静态方式

classEven{

static[Symbol.hasInstance](obj) {

returnNumber(obj)%2===0;

       }

   }

// 等同于:

constEven={

[Symbol.hasInstance](obj) {

returnNumber(obj)%2===0;

       }

   };

1instanceofEven// false

2instanceofEven// true

2.Symbol.isConcatSpreadable:对象的布尔值属性,表示该对象用于Array.prototype.concat()时,是否可以展开;

3.Symbol.species,Symbol.match,Symbol.replace,Symbol.search,Symbol.split,

4.Symbol.iterator:对象的Symbol.iterator属性,指向该对象的默认遍历器方法;

1.for-of遍历对象时,会调用Symbol.iterator方法,返回该对象的默认遍历器

constmyIter={};

myIter[Symbol.iterator]=function*() {

yield1;

yield2;

   };

[...myIter]// [1, 2]

5.Symbol.toPrimitive,Symbol.toStringTag,Symbol.unscopables

Proxy

1.Proxy:代理,在目标对象之前架设的一层拦截,外界对该对象的访问,都必须先通过这层拦截;

varproxy=newProxy(target,handler);

1.target所要拦截的目标对象

2.handler也是一个对象,用来定制拦截行为

2.get()

1.用于拦截某个属性的读取操作,接受三个参数:目标对象、属性名、proxy实例本身(可选)

varperson={name:"张三"};

varproxy=newProxy(person, {

get:function(target,property) {

if(propertyintarget) {--->访问的属性存在,则返回属性值

returntarget[property];

}else{----->访问的属性不存在,则抛出一个异常

thrownewReferenceError("Property \""+property+"\" does not exist.");

               }

           }

       });

proxy.name// "张三"

proxy.age// 抛出一个错误

2.get方法可以继承,拦截操作定义在Prototype对象上面

letobj=Object.create(proxy);

obj.age//抛出一个错误

3.如果一个属性不可配置且不可写,则Proxy不能修改该属性,否则通过Proxy对象访问该属性会报错

consttarget=Object.defineProperties({}, {

foo: {

value:123,

writable:false,//不可写

configurable:false//不可配置

           },

       });

constproxy=newProxy(target, {

get(target,propKey) {

return'abc';--->修改属性值

           }

       });

proxy.foo//访问报错

2.set()

1.用来拦截某个属性的赋值操作,接受四个参数:目标对象、属性名、属性值、Proxy实例本身(可选)。

letperson=newProxy({}, {

set:function(obj,prop,value) {

if(prop==='age') {

if(!Number.isInteger(value)) {-->不是数字,抛出异常

thrownewTypeError('The age is not an integer');

                   }

if(value>200) {-->数字大于200,抛出异常

thrownewRangeError('The age seems invalid');

                   }

               }

obj[prop]=value;//设置属性

           }

       });

person.age=100;//赋值成功

person.age='young';// 报错

person.age=300;// 报错

2.在set()和get()中判断访问的属性名是否以_开头,如果是,则抛出异常,从而禁止访问"私有"属性;

3.如果目标对象自身的某个属性,不可写且不可配置,那么set()将不起作用;

4.另外,严格模式下,set代理必须显式返回true,否则就会报错

'use strict';

constproxy=newProxy({}, {

set:function(obj,prop,value,receiver) {

obj[prop]=receiver;

returnfalse;// 无论有没有下面这一行,都会报错

       }

   });

proxy.foo='bar';//TypeError

3.apply():拦截函数的调用、call()和apply()操作

1.apply()接受三个参数:目标对象、目标对象的上下文对象(this)、目标对象的参数数组;

varfn=function(left,right) {returnleft+right; };

varp=newProxy(fn, {

apply:function(target,ctx,args) {

returntarget.call(ctx,...args)*10;// Reflect.apply(...arguments)*10;

       }

   });

p(1,2);//30

p.call(null,2,2)//40

p.apply(null, [3,2]);//50

2.另外,直接调用Reflect.apply(),也会被拦截

Reflect.apply(p,null, [4,2]);// 60

4.has():拦截HasProperty操作,判断对象是否具有某个属性,典型的操作就是in运算符

1.has()接受两个参数:目标对象、需查询的属性名;

2.使用has()隐藏_开头的属性,不被in运算符发现

vartarget={_prop:'foo',prop:'foo'};

varproxy=newProxy(target, {

has(target,key) {

if(key[0]==='_') {

returnfalse;//隐藏 _ 开头的属性

           }

returnkeyintarget;

       }

   });

'_prop'inproxy// false

3.如果原对象不可配置或者禁止扩展,has()拦截会报错;

4.注意:has方法拦截的是HasProperty操作,而不是HasOwnProperty操作,

也就是说,has()不判断一个属性是对象自身的属性,还是继承的属性;

5.另外,虽然for-in循环也用到了in运算符,但是has()拦截对for-in循环不生效。

5.construct():用于拦截new命令

1.接受三个参数:目标对象、构造函数的参数对象、new命令作用的构造函数

varp=newProxy(function(){}, {

construct:function(target,args) {

return{value:args[0]*10};

       }

   });

(newp(1)).value//10

2.construct()返回的必须是一个对象,否则会报错

6.deleteProperty():拦截delete操作;

1.若返回false或抛出异常,则属性会删除失败;

2.目标对象自身的不可配置的属性,不能被删除,否则报错.

7.defineProperty():拦截Object.defineProperty()操作

1.返回false时,新属性添加无效;

2.如果目标对象不可扩展,defineProperty()不能增加目标对象上不存在属性,否则会报错;

3.如果目标对象的某个属性不可写或不可配置,defineProperty()也不得改变这两个设置。

8.ownKeys():拦截对象自身属性的读取操作

1.拦截操作

Object.getOwnPropertyNames()、Object.keys()

Object.getOwnPropertySymbols()、for-in

2.拦截Object.keys()时,会自动过滤三类属性:

目标对象上不存在的属性、属性名为Symbol值、不可遍历(enumerable)的属性

lettarget={a:1,b:2,c:3, [Symbol.for('secret')]:'4'};

Object.defineProperty(target,'key', {--->新添加一个属性,

enumerable:false,----->属性不可遍历

configurable:true,

writable:true,

value:'static'----->属性值为'static'

   });

letproxy=newProxy(target, {

ownKeys(target) {

return['a','d',Symbol.for('secret'),'key'];

       }

   });

Object.keys(proxy)// ['a'],自动过滤了

3.ownKeys()返回的只能是字符串或Symbol值的数组,否则就会报错;

4.如果目标对象自身包含不可配置的属性,则ownKeys()必须返回该属性,否则报错;

5.如果目标对象是不可扩展的,ownKeys()返回的数组之中必须包含原对象的所有属性,且不能包含多余的属性,否则报错;

varobj={a:1};

Object.preventExtensions(obj);//配置不可扩展

varp=newProxy(obj, {

ownKeys:function(target) {

return['a','b'];//返回多余属性

       }

   });

Object.getOwnPropertyNames(p);//报错Uncaught TypeError

9.getPrototypeOf():主要用来拦截获取对象原型

1.拦截操作

Object.prototype.__proto__、Object.prototype.isPrototypeOf()

Object.getPrototypeOf()、Reflect.getPrototypeOf()、instanceof

2.getPrototypeOf()的返回值必须是对象或者null,否则报错;

3.如果目标对象不可扩展,getPrototypeOf()必须返回目标对象的原型对象。

10.setPrototypeOf():主要用来拦截Object.setPrototypeOf()

1.该方法只能返回布尔值,否则会被自动转为布尔值;

2.如果目标对象不可扩展,setPrototypeOf()不得改变目标对象的原型.

11.Proxy.revocable():返回一个可取消的Proxy实例

let{proxy,revoke}=Proxy.revocable({}, {});

proxy.foo=123;

proxy.foo// 123

revoke();

proxy.foo// TypeError: Revoked

1.此方法返回一个对象,该对象的proxy属性是Proxy实例,revoke属性是一个函数,可以取消Proxy实例;

2.当执行revoke()之后,再访问Proxy实例,就会抛出一个错误;

3.使用场景:目标对象不允许直接访问,必须通过代理访问,一旦访问结束,就收回代理权,不允许再次访问。

12.this问题

1.虽然Proxy可以代理目标对象的访问,但它不是透明代理,即使不做任何拦截,也无法保证与目标对象的行为一致,

主要是因为:使用Proxy代理后,目标对象内部的this关键字会指向Proxy代理;

2.有些原生对象的内部属性,只有通过正确的this才能拿到,所以Proxy也无法代理这些原生对象的属性

consttarget=newDate();

constproxy=newProxy(target, {});

proxy.getDate();// TypeError

3.让this绑定原始对象,以访问Date的getDate()

consttarget=newDate('2015-01-01');

constproxy=newProxy(target, {

get(target,prop) {

if(prop==='getDate') {

returntarget.getDate.bind(target);

               }

returnReflect.get(target,prop);

           }

       });

proxy.getDate()// 1

13.Proxy可以拦截目标对象的任意属性,这使得它很合适用于Web服务的客户端;

14.同理,Proxy也可以用来实现数据库的ORM层。

Reflect

1.ES6设计Reflect的目的

1.将Object对象的一些明显属于语言内部的方法部署在Reflect上,如Object.defineProperty()

2.修改某些Object方法的返回结果,让其变得更合理;

Object.defineProperty(obj,name,desc)在无法定义属性时,会抛出错误;

而Reflect.defineProperty(obj,name,desc)则会返回false

3.让Object操作都变成函数形式

nameinobj--->Reflect.has(obj,name)

deleteobj[name]--->Reflect.deleteProperty(obj,name)

4.Reflect的方法与Proxy的方法一一对应,让Proxy可以调用Reflect上的方法,完成默认行为;

也就是说,不管Proxy怎么修改默认行为,总可以在Reflect上获取对应方法的默认行为。

varproxy=newProxy(obj, {

get(target,name) {

console.log('get',target,name);

returnReflect.get(target,name);

           },

deleteProperty(target,name) {

console.log('delete'+name);

returnReflect.deleteProperty(target,name);

           },

has(target,name) {

console.log('has'+name);

returnReflect.has(target,name);

           }

       });

5.Proxy对象的拦截get、delete、has操作,内部又都调用对应的Reflect方法,保证原生行为能够正常执行。

2.Reflect.get(target,name,receiver):返回target对象的name属性值,没有则返回undefined

1.第一个参数target必须是对象,否则会报错;

2.如果name属性部署了读取函数(getter),则读取函数的this绑定receiver

vartarget={

foo:1,bar:2,

getbaz() {

returnthis.foo+this.bar;

       },

   };

varreceiver={foo:4,bar:4};

Reflect.get(target,'baz');// 3

Reflect.get(target,'baz',receiver);// 8

3.Reflect.set(target,name,value,receiver):设置target对象的name属性值为value

1.如果name属性设置了赋值函数(setter),则赋值函数的this绑定receiver

vartarget={

foo:4,

setbar(value) {

returnthis.foo=value;

           },

       };

varreceiver={foo:0};

Reflect.set(target,'bar',1,receiver);

target.foo// 4,target对象不受影响

receiver.foo// 1,显式绑定了receiver,只影响receiver

Reflect.set(target,'foo',2);

target.foo// 2

2.Proxy和Reflect联合使用时,Proxy拦截赋值操作,Reflect完成赋值的默认行为,而且传入了receiver,

那么Reflect.set()会触发Proxy.defineProperty()拦截

letobj={a:'a'};

letp=newProxy(obj, {

set(target,key,value,receiver) {

console.log('set');

Reflect.set(target,key,value,receiver)

           },

defineProperty(target,key,attribute) {

console.log('defineProperty');

Reflect.defineProperty(target,key,attribute);

           }

       });

p.a='A';//触发set()、defineProperty()

1.因为Proxy.set()的receiver参数总是指向当前的Proxy实例p,

一旦Reflect.set()传入receiver,就会将属性赋值到receiver上,导致触发defineProperty拦截。

2.所以,此时不要给Reflect.set()传入receiver

4.Reflect.has(obj,name):对应nameinobj里的in运算符,存在则返回true,否则返回false

5.Reflect.deleteProperty(obj,name):等同于deleteobj[name],返回true/false

6.Reflect.construct(target,args):等同于newtarget(...args),一种不使用new来调用构造函数的方法;

7.Reflect.getPrototypeOf(obj):用于读取对象的__proto__属性,对应Object.getPrototypeOf(obj)

constmyObj=newFancyThing();

Object.getPrototypeOf(myObj)===FancyThing.prototype;

Reflect.getPrototypeOf(myObj)===FancyThing.prototype;

1.区别:如果参数不是对象,Object.getPrototypeOf会将这个参数转为对象,然后再运行;

而Reflect.getPrototypeOf会报错。

Object.getPrototypeOf(1)// Number{[[PrimitiveValue]]: 0}

Reflect.getPrototypeOf(1)// 报错

8.Reflect.setPrototypeOf(obj,newProto):设置目标对象的原型,对应Object.setPrototypeOf(obj,newProto)

1.返回一个布尔值,表示是否设置成功

constobj={};

Reflect.setPrototypeOf(obj,Array.prototype);

obj.length// 0,数组Array的原型被设置到obj对象上

2.如果目标对象禁止扩展,Reflect.setPrototypeOf()返回false

3.如果obj不是对象,Object.setPrototypeOf()会返回obj,而Reflect.setPrototypeOf会报错;

9.Reflect.apply(func,thisArg,args)

1.等同于Function.prototype.apply.call(func,thisArg,args),用于绑定this对象后执行给定函数;

2.一般来说,fn.apply(obj,args)可以绑定一个函数的this对象,但如果函数定义了自己的apply(),

就只能写成Function.prototype.apply.call(fn,obj,args),Reflect则可以简化

constages=[11,33,12,54,18,96];

// 旧写法

constyoungest=Math.min.apply(Math,ages);

constoldest=Math.max.apply(Math,ages);

consttype=Object.prototype.toString.call(youngest);

// 新写法

constyoungest=Reflect.apply(Math.min,Math,ages);

constoldest=Reflect.apply(Math.max,Math,ages);

consttype=Reflect.apply(Object.prototype.toString,youngest, []);

10.Reflect.defineProperty(target,propertyKey,attributes)

1.用于替代Object.defineProperty(),用于为对象定义属性

2.可以与Proxy.defineProperty()配合使用

constp=newProxy({}, {

defineProperty(target,prop,descriptor) {

console.log(descriptor);

returnReflect.defineProperty(target,prop,descriptor);

       }

   });

p.foo='bar';// {value: "bar", writable: true, enumerable: true, configurable: true}

p.foo// "bar"

11.Reflect.ownKeys(target):用于返回对象的所有属性名

1.基本等同于Object.getOwnPropertyNames()与Object.getOwnPropertySymbols()之和

varmyObject={

foo:1,bar:2, [Symbol.for('baz')]:3, [Symbol.for('bing')]:4

       };

Reflect.ownKeys(myObject)// ['foo', 'bar', Symbol(baz), Symbol(bing)]

12.Reflect.isExtensible(target):对应Object.isExtensible(),当前对象是否可扩展

13.Reflect.preventExtensions(target):让一个对象变为不可扩展,返回true/false,表示是否成功。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容

  • defineProperty() 学习书籍《ECMAScript 6 入门 》 Proxy Proxy 用于修改某...
    Bui_vlee阅读 648评论 0 1
  • 本人自学es6已经有一段时间了,只觉得有些时候很是枯燥无味, 时而又觉得在以后的职业生涯中会很有用,因为es6的很...
    可乐_37d3阅读 1,517评论 0 0
  • ECMAScript发展历史 (1)ECMA-262 第1版:去除了对针对浏览器的特性,支持Unicode标准(多...
    congnie116阅读 1,859评论 0 2
  • Proxy 概述 Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(met...
    pauljun阅读 3,249评论 0 1
  • 古人刘向说:“书犹药也,善读之可以医愚”;莎士比亚说:“书籍是全人类的营养品。生活里没有书籍,就好像没有阳光;智慧...
    凌云渡XKF阅读 2,392评论 12 69