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
分析以上示例：prinName 的方法中this,默认指向 类Logger，但是将改方法单独调用，就会报错，this会指向所在运行的环境，所以因为找不到this.print()方法而报错。
针对以上解决this指向的方法：
（1）. 使用bind(this)
（2）. 使用es6 的箭头函数 （）=>{}
（3）.使用Proxy 代理
//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() .................
7.class 的get() 和set() 方法
与 ES5 一样，在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。
class MyClass { constructor() { // ... } get prop() {// 使用 get 拦截了该方法的返回值 return 'getter'; } set prop(value) {//当对该方法赋值时能获取到该赋值 console.log('setter: '+value); } } let obj = new MyClass(); obj.prop = 123; // setter: 123 inst.prop // 'getter'
8.继承
Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。
//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")
8.1:super关键字：在子类中不同情况用法不同,既可以当作函数使用，也可以当作对象使用。
(1)：super作为函数，只能在constructor中使用:代表父类，返回子类的this
(2)：super作为对象，在普通函数中，cuper指向父类的原型对象，可以访问原型对象的属性和方法,注意，父类的实例的属性和方法是访问不了的
(3)：super作为对象，在静态方法中，cuper指向的是父类，不是父类的原型对象
示例分析如下：
//父类 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
8.2.原生构造函数的继承，ES5不支持，ES6利用extend可以继承原生构造函数
//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
总结
以上所述是小编给大家介绍的es6新特性之 class 基本用法解析，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
您可能感兴趣的文章: