Es6对象的扩展和Class类的基础知识笔记

/*---------------------对象的扩展---------------------*/
//属性简写 ,属性名为变量名, 属性值为变量的值
export default function(){
const a='aaa';
const b={a};
console.info(b);//b==={a: "aaa"} function d(x,y){
//相当于 return {x:x,y:y} //属性的简写
return console.info({x,y})
}
d(1,2); //{x: 1, y: 2} const name='leyi',petName='jiucaiqiezi';
const e={
name,
petName, //属性简写 petName:petName
sayHello(){console.info({name,petName})} //函数简写
};
e.sayHello(); //{name: "leyi", petName: "jiucaiqiezi"}
} //属性名表达式
const f={};
f.name='leyi';
f['pet'+'name']='jiucaiqieizi';
console.info(f); //{name: "leyi", petName: "jiucaiqiezi"} const fname='name';
const g={
[fname]:'leyi',
['pet'+'name']:'jiucaiqieizi',
['say'+'Hello'](){
console.info(this.fname);
},
};
console.info(g);//{name: "leyi", petName: "jiucaiqiezi"}
g.sayHello();//表达式可以用于定义方法名 //属性名表达式如果是一个对象,默认情况下会自动将对象转为字符串[object Object]
const h={'name':'leyi'};
const i={
[h]:'jiucaiqiezi',
};
console.info(i); //{[object Object]: "jiucaiqiezi"} //Object.is 用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致
console.info(Object.is(+0,-0)); //false 不会转换数据类型 //Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target) 跟$.extend()差不多
//如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性 const j={"name":"hello"};
const k={"petName":"jiucaiqiezi",obj:{'color':'red'}};
//不是对象的参数会转成对象
const l=Object.assign({"name":"leyi"},j,k,undefined,null,'wo'); //undefined和null无法转成对象,非首参数就会跳过
console.info(l);
//Object.assign方法实行的是浅拷贝,而不是深拷贝。如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用
k.obj.color='green';
console.info(l);//{0: "w", 1: "o", name: "hello", petName: "jiucaiqiezi", obj: Object} obj{"color:green}
//Object.assign可以用来处理数组,但是会把数组视为对象。
console.info(Object.assign([1,2,3])); //{0:1,1:2,2:3}
console.info(Object.assign([1,2,3],[4,5,6])); //[4, 5, 6] //属性的遍历
//for...in循环遍历对象自身的和继承的可枚举属性
//Object.keys(obj) 返回一个数组,包括对象自身的(不含继承的)所有可枚举属性 所以一般用Object.keys()代替for...in循环
const m={'name':'leyi',"petName":'jiucaiqiezi'};
console.info("Object.keys",Object.keys(m)); //["name", "petName"]
//Object.getOwnPropertyNames 返回一个数组,包含其自身的可枚举和不可枚举属性的名称
const n=[1,2,3,4,5];
console.info("Object.getOwnPropertyNames",Object.getOwnPropertyNames(n)); //["0", "1", "2", "3", "4", "length"] function OParent(){
this.pAttr=0;
}
function OChild(){
this.cttr1=1;
this.cttr2=2
}
OChild.prototype=new OParent();
//该方法不会获取到原型链上的属性
console.info(Object.getOwnPropertyNames(new OChild())); //["cttr1", "cttr2"] //Object.setPrototypeOf方法用来设置一个对象的prototype对象并返回该对象 prototype
const proto={'petName':'jiucaiqiezi'};
const obj={"name":'leyi'};
Object.setPrototypeOf(obj,proto);
console.info(obj.__proto__); //{petName: "jiucaiqiezi"}
//getPrototypeOf用于读取一个对象的原型对象
console.info(Object.getPrototypeOf(new OChild())); //{pAttr: 0} //Object.keys Object.values Object.entries
console.info(Object.keys(obj)); //["name"]
console.info(Object.values(obj));//["leyi"]
console.info(Object.entries(obj)); //[['name','leyi']]; //通过Object.entries将对象转为map结构
const p={'name':'leyi','petName':'jiucaiqiezi'};
const pMap=new Map(Object.entries(p));
console.info(pMap.size);
const q = { one: 1, two: 2 };
for (let [k, v] of new Map(Object.entries(q))) {
console.info(`${k}------${v}`);
} /*---------------------class基本语法---------------------*/
//定义类
//定义“类”的方法的时候,前面不需要加上function这个关键字,直接把函数定义放进去了就可以了。另外,方法之间不需要逗号分隔,加了会报错。
class R{
constructor(ag1,ag2){
this.ag1=ag1;
this.ag2=ag2;
}
hello(){
return `
${this.ag1}
${this.ag2}
`
}
}
const s=new R(1,2);
console.info(s.hello()); //1 2 //类的所有方法都定义在类的prototype属性上面
class T{
tt(){}
ttt(){}
}
//上面等同于
T.prototype={
tt(){},
ttt(){},
}; //类的方法都定义在prototype对象上面,所以类的新方法可以添加在prototype对象上面。Object.assign方法可以很方便地一次向类添加多个方法
Object.assign(T.prototype,{
tttt(){},
ttttt(){},
});
console.info(Object.getPrototypeOf(new T()));//{tt: function, ttt: function, tttt: function, ttttt: function} //constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,
// 如果没有显式定义,一个空的constructor方法会被默认添加。
//constructor方法默认返回实例对象
//类的所有实例共享一个原型对象
//可以通过实例的__proto__属性为Class添加方法
new T().__proto__.tttttt=function(){};
console.info(Object.getPrototypeOf(new T()));//{tt: function, ttt: function, tttt: function, ttttt: function, tttttt: function} //class的继承
//Class之间可以通过extends关键字实现继承
class U extends R{
constructor(ag1,ag2,name){
super(ag1,ag2); //super关键字,它在这里表示父类的构造函数,用来新建父类的this对象
//this 指向当前类 super(ag1,ag2).call(this)
this.name='leyi';
}
hi(){
return this.name+'-----'+this.ag1+'-----'+this.ag2
}
}
const v=new U(1,2);
v.hi();
console.info(v,v instanceof U,v instanceof R);//{ag1: 1, ag2: 2, name: "leyi"} true true //super作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类。
class S1{
constructor(){
}
static sayhi(){
console.info('sayhi');
}
sayhello(){
console.info('sayhello');
}
}
S1.attr1='attr1'; class S2 extends S1{
constructor(){
super();
}
static hi(){
super.sayhi();//super作为对象时,在静态方法中,指向父类
console.info( super.attr1);//attr1
}
hello(){
super.say1; //super作为对象时,在普通方法中,指向父类的原型对象
}
} new S2().hello();
S2.hi(); //Class作为构造函数的语法糖,同时有prototype属性和__proto__属性
//子类的__proto__属性,表示构造函数的继承,总是指向父类
//子类prototype属性的__proto__属性,表示方法的继承,总是指向父类的prototype属性。
class W{
}
class X extends W{
constructor(){
super();
}
}
console.info(X.__proto__==W,X.prototype.__proto__= W.prototype);// true true //Object.getPrototypeOf方法可以用来从子类上获取父类,也可以用来判断一个类是否继承了另一个类
console.info(Object.getPrototypeOf(X)===W);//true X.__proto__==W //类的静态方法
//该方法不会被实例继承,而是直接通过类来调用
class Y{
static method1(){
return 'hello static!'
}
}
console.info("Y.method1()------------->",Y.method1()); //父类的静态方法,可以被子类继承
class YY extends Y{
static method2(){
return super.method1(); //静态方法也是可以从super对象上调用
}
}
console.info("YY.method1()------------->",YY.method1());
console.info("YY.method2()------------->",YY.method2()); //ES6规定Class内部只有静态方法,没有静态属性
//class 的静态属性 静态属性指的是Class本身的属性 和实例属性
class Z{
//static attr0='attr0'; //Es7的提案 定义类的静态属性,目前不支持
//attr0='attr0'; //定义类的实例属性 不支持
constructor(){
this.attr0='attr0';
console.info(this.attr0);
}
}
Z.attr1='attr1'; //定义类的静态属性
console.info("new Z().attr0---->",new Z().attr0);//attr0 //new.atrget 属性 返回new命令作用于的那个构造函数。如果构造函数不是通过new命令调用的,new.target会返回undefined class AA{
constructor(){
console.info("new.target----->",new.target===AA); //new.target-----> true
}
}
new AA(); //子类继承父类时,new.target会返回子类
class AAA extends AA{
constructor(){
super(); //new.target-----> false
console.info("new.target----->",new.target===AAA);//new.target-----> true
}
}
new AAA(); //利用这个特点,可以写出不能独立使用、必须继承后才能使用的类
class BB{
constructor(){
if(new.target===BB){
throw new Error('此类不能被实例化!');
}
}
}
class BBB extends BB{
constructor(){
super();
this.name='leyi';
}
hello(){
console.info("this.name----->",this.name);
}
} new BB(); //此类不能被实例化!
new BBB().hello(); //this.name-----> leyi

  

上一篇:UVa 1395 Slim Span


下一篇:IdentityServer4 错误解决方案