JS快速掌握ES6的class用法

 更新时间:2021年05月06日 10:56:56   作者:浅笑·  
这篇文章主要介绍了JS快速掌握ES6的class用法,想了解ES6的同学,一定要看一下

1.如何构造?

先复习一下es5常用的构建类的方法:首先es5的写法使用原型进行对象的方法的,为什么不在构造函数里添加方法呢?因为实例化对象的时候,会重复的建立好多相同的方法,浪费资源。所以需要把对象的方法挂载到prtotype里。

关于new和this的绑定问题,可以大概简化为:

  • 首先通过new生成一个新的对象
  • 然后让这个对象绑定到构造函数的this中去
  • 然后绑定这个构造对象的原型对象上
  • 最后把这个对象返回给前面定义的对象

那么接下来看例子吧:

fuction Animal(name,age){
  this.name = name
  this.age = age
  
  // 这样是浪费资源的
  // this.eat = function(){
  //   console.log("今天我吃饭了")
  // }
}

// 正确做法
Animal.prototype.eat=function(){
  console.log("今天我吃饭了")
}

然后上ES6的class,class很明显就简化了这个操作

cosnt dog = new Animal("wangcai",2) // 会报错,ES6为了修改陋习,和let和const一样,class不会提升.

class Animal{
  constroctor(name,age){
    this.name = name 
    this.age = age 
  }
  
    eat(){
    console.log("今天我吃饭了")
  }
}

cosnt dog = new Animal("wangcai",2)  //正确位置

另外class还添加了静态方法,set,get等操作。

class Animal{
  constroctor(name,age){
    this.name = name 
    this.age = age 
  }
  
    eat(){
    console.log("今天我吃饭了")
  }
  

 set name(value){
    this.tempname ="老铁"+value
  }
  
  get name(){
    return this.tempname
  }
  
  static introuduce(){
    console.log("我现在是一个动物类")
  }
}

//set() get()
const dog = new Animal("giao",2)
dog.name="agiao" 
console.log(dog.name) // 老铁agiao

// 静态方法
Animal.introuduce() // 我现在是一个动物类

再说继承之前补充个小知识点,class的方法名可以通过计算属性的操作来命名

let tempname = "giao"
class Animal{
   constroctor(name,age){
    this.name = name 
    this.age = age 
  }
  
  [tempname](){
    console.log("一给我咧giao")
  }
}

const xiaoagiao = new Animal("giaoge",30)
xiaoagiao.giao() // 一给我咧giao

2.继承

回到继承这个问题,es5是怎么继承的呢?

function Animal( name ){
  this.name = name
}
Animal.prototype.break(){
  console.log("叫!")
}

function Dog( name, age ){
  Animal.call(this,name)
  this.age = age
}

Dog.prototype = new Animal()
Dog.prototype.constructor = Dog

那么这个叫组合继承,怎么个组合法呢?

属性方面的继承是借用继承,可以看到Animal.call(this,name)就是相当于把Animal这个函数在Dog的构造函数里调用了一遍而已。虽然属性他们没有原型链的链式联通,但是代码拿过来给Dog都跑了一遍,所以自然就继承了Animal的name属性。

Animal.call(this,name)

方法的继承是原型式继承,众所周知,一个函数会在创建的时候生成一个原型对象,这个函数的的一个protoype属性指向他的原型对象,原型对象的constructor属性指向这个函数。如果用new来新建这个函数的实例,这个实例会有一个__proto__的属性指向函数的原型对象。所以借用函数实例会指向函数原型对象这个特性,我们将被继承的函数实例化,然后将这个实例化的对象赋给继承的构造函数的prototype属性,这样就构成了一种链式结构。但同被继承的函数实例化是不具备constructor这个属性的,我们需要将他的constructor指向继承的构造函数。

Dog.prototype = new Animal()
Dog.prototype.constructor = Dog

所以按照这个套路,我们用es5的语法,将dog函数继承了Animal函数的name和break方法.

那么ES6是怎么做的呢?

class Animal{
  constructor( name ){
    this.name = name 
  }
  
  break(){
    console.log("叫!")
    }
}

class Dog extends Animal {
  constructor( name, age ){
    super(name)
    this.age=age
  }
}

现在只需要在声明Dog类的时候加一个extends Animal,然后再在constructor构造函数里加一个super就好了。

这个super(name)就相当于Animal.call(this,name)了。然后关于方法的问题,自然就不用担心了,extends自动就处理好了,就不用再去用prototype乱指了.

以上就是JS快速掌握ES6的class用法的详细内容,更多关于JS ES6的class用法的资料请关注脚本之家其它相关文章!

相关文章

  • javascript组合使用构造函数模式和原型模式实例

    javascript组合使用构造函数模式和原型模式实例

    这篇文章主要介绍了javascript组合使用构造函数模式和原型模式的方法,通过一个简单实例分析了javascript构造函数模式与原型模式的使用方法,需要的朋友可以参考下
    2015-06-06
  • JavaScript 五大常见函数

    JavaScript 五大常见函数

    在javascript前端开发中js函数问题经常会被讨论,这个问题仁者见仁智者见智,下面通过示例代码给大家介绍js五大常见函数,感兴趣的朋友一起看看吧
    2018-03-03
  • JS查找字符串中出现次数最多的字符

    JS查找字符串中出现次数最多的字符

    本文给大家带来两种js中查找字符串中出现次数最多的字符,在这两种方法中小编推荐使用第二种,对js查找字符串出现次数的相关知识感兴趣的朋友一起看看吧
    2016-09-09
  • JavaScript 函数惰性载入的实现及其优点介绍

    JavaScript 函数惰性载入的实现及其优点介绍

    惰性载入表示函数执行的分支只会在函数第一次掉用的时候执行,在第一次调用过程中,该函数会被覆盖为另一个按照合适方式执行的函数,这样任何对原函数的调用就不用再经过执行的分支了
    2013-08-08
  • js加减乘除精确运算方法实例代码

    js加减乘除精确运算方法实例代码

    这篇文章主要给大家介绍了关于js加减乘除精确运算方法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 基于JS实现接粽子小游戏的示例代码

    基于JS实现接粽子小游戏的示例代码

    端午节马上就到了,听说你们公司没发粽子大礼包?没关系,这里用 JS实现了一个简单的接粽子小游戏,能接到多少粽子,完全看你手速,快跟随小编一起来学习学习吧
    2022-05-05
  • javascript操作excel生成报表全攻略

    javascript操作excel生成报表全攻略

    这篇文章主要介绍了如何使用javascript操作excel生成报表,需要的朋友可以参考下
    2014-05-05
  • JS实现网页自动刷新脚本的方法

    JS实现网页自动刷新脚本的方法

    要自动刷新网页,你可以使用JavaScript脚本来实现,下面这篇文章主要给大家介绍了关于JS实现网页自动刷新脚本的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • 微信JS-SDK坐标位置如何转换为百度地图坐标

    微信JS-SDK坐标位置如何转换为百度地图坐标

    这篇文章主要介绍了微信JS-SDK坐标位置如何转换为百度地图坐标 的相关资料,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 两种常用的javascript数组去重方法思路及代码

    两种常用的javascript数组去重方法思路及代码

    第一种是常规的方法:建一个新的数组存放结果,for循环中每次从原数组中取出一个元素,用indexOf查找新数组中是否有该元素,至于第二种详细的看下本文哦
    2013-03-03

最新评论