es6新特性之 class 基本用法解析

//一.ES5写法：function Animate(name){  this.name = name;}Animate.prototype.getname = function(){  console.log(this.name)}var p =new Animate("lity");p.getname();//二.ES6,面向对象的写法,calss,class Person{  //constructor()：构造方法是默认方法，new的时候回自动调用，如果没有显式定义，会自动添加  //1.适合做初始化数据  //2.constructor可以指定返回的对象  constructor(name,age){  　　 this.name = name;  　　 this.age = age;　　}  getval(){    console.log(`你是${this.name},${this.age}岁`);  }}      var c1 = new Person("lity",20); c1.getval();   

typeof Person  //functionPerson === Person.prototype.constructor // true

//1.查看实例对象c1的__proto__是否指向Person的原型(Person.prototype) console.log(c1.__proto__==Person.prototype)//true console.log(c1.__proto__)//原型对象的所有方法 //2.isPrototypeOf:检测实例对象是否是某个函数的原型  console.log(Person.prototype.isPrototypeOf(c1));//true//3.constructor:查看某个对象的构造函数   console.log(c1.constructor); //4.hasOwnProperty:检测某个属性是否是自己的属性；不是原型对象上的属性和方法   console.log(c1.hasOwnProperty("name"))//true; //5.in：通过in可以检测属性是否在自己中(this)或者是原型中存在    console.log("getval" in c1)//原型上存在，true    console.log("name" in c1)//constructor(自己上存在)，true //6.自定义检测属性是否是存在    function hasproperty(attr,obj){       return obj.hasOwnProperty(attr)&&(attr in obj);    }    console.log(hasproperty("name",c1));//true;

//class表达式const Myclass = class Me{//这里的Me是没有作用的  constructor(name,jog){    this.name = name;    this.jog = jog;  }  getval(){    console.log(`name is ${this.name},job is a ${this.jog}`);  }} var obj1 = new Myclass("lylt","teacher"); obj1.getval();

class Foo {   static classMethod() {      return 'lity';    } } console.log(Foo.classMethod()) // 'hello'

//ES5：原始写法对象function objtarge(name){  if(new.target==undefined){    throw new Error("必须实例化对象");  }else{    this.name = name  }}var targets = new objtarge("litys");console.log(targets.name);//litys//es6写法:class内部使用new.target，返回当前的calssclass caltartget{  constructor(name){    console.log(new.target==caltartget);//true    if(new.target!==caltartget){      throw new Error("实例化对象不是caltrget");    }else{      this.name = name;    }  }}var caltart = new caltartget("lity");console.log(caltart.name);//lity

class Logger { printName(name = 'there') {  this.print(`Hello ${name}`); } print(text) {  console.log(text); }}const logger = new Logger();const { printName } = logger;printName(); // TypeError: Cannot read property 'print' of undefined

//1.bind()方法class Logger { constructor() {  this.printName = this.printName.bind(this); } // ...}//2.箭头函数 （）=>{}class Logger { constructor() {  this.printName = (name = 'there') => {   this.print(`Hello ${name}`);  }; } // ...}//3. Porxy().................

class MyClass { constructor() {  // ... } get prop() {// 使用 get 拦截了该方法的返回值  return 'getter'; } set prop(value) {//当对该方法赋值时能获取到该赋值  console.log('setter: '+value); }}let obj = new MyClass();obj.prop = 123;// setter: 123inst.prop// 'getter'

//es5 的继承//父类function Person(name,sex){  this.name = name;//属性  this.sex = sex;//属性       }//定义一个原型方法Person.prototype.show = function(){  console.log("我的姓名是"+this.name+"==="+"我的性别是"+this.sex)}//子类function Worker(name,sex,job){        //构成函数伪装：使用call()方法绑定this，伪装继承父级的属性  Person.call(this,name,sex);  this.job = job;}//继承父类的原型方法：（介绍三种方法）//写法一：通过遍历父级的原型一个个赋给子级的原型(es5 的原型是可枚举的，es6的不可以枚举)(var i in Person.prototype){  Worker.prototype[i] = Person.prototype[i];}//写法：重新new一个父级对象赋给子级的原型Worker.prototype = new Person();Worker.prototype.constructor = Worker;//写法三：创建一个原型对象赋给子级的原型；(es5 推荐)Worker.prototype = Object.create(Person.prototype);Worker.prototype.constructor = Worker;var workers = new Worker("小明","男","job")//es6 的继承class Person{  constructor(name,sex){    this.name = name;//属性  　　 this.sex = sex;//属性   }}class Worker extends Person{   constructor(name,sex,job){     super();     this.job =job;   }}var workers = new Worker("小明","男","job")

//父类class Aniamte{  constructor(){    if(new.target == Aniamte){      throw new Error("本类不能实例化，只能有子类继承");    }  }  //静态方法  static getval(mgs){    console.log("父类的static",mgs)  }  //普通方法        setname(){    console.log("该方法有子类重写")  }      }//子类class Dog extends Aniamte{  constructor(){    super();//调用此方法,this才用可以用,代表父类的构造函数，返回的却是子类    //super() ==父类.prototype.constructor.call(子类/this)    console.log(this)//Dog {}    this.age = 20;    }  //静态方法,super在静态方法中作为对象使用，指向父类；  static getval(mgs){    super.getval(mgs)//父类的static niceday    console.log("子类的static",mgs)//子类的static niceday  }  setname(name){    //普通方法，super作为对象使用，指向父类的原型对象，父类.prototype;    super.setname();//该方法有子类重写    this.name = name;    return this.name  }};Dog.getval("niceday");//静态方法，直接调用//var parAni = new Aniamte();//报错var dogs = new Dog();//new 一个示例对象dogs.setname("DOYS");////DOYS

//ESMAScript的构造函数有以下几种/* Boolean()* Unmber()* String()* Array()* Date()* Function()* RegExp()* Error()* Object()*///实例一：自定义类Myarray 继承了原生的数组的构造函数，拥有原生数组的属性和方法了class Myarray extends Array{  constructor(){  super();  console.log(this.constructor.name)//Myarray  }}var myarr = new Myarray();console.log(Object.prototype.toString.call(myarr));//[object Array]myarr.push(1,2,1);console.log(myarr.length)//3