快速掌握ES6的class用法

更新日期: 2019-12-04阅读: 2k标签: class

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乱指了.


链接: https://www.fly63.com/article/detial/8111

ES6 class创建对象和传统方法生成对象的区别

JS语言传统创建对象的方法一般是通过构造函数,来定义生成的,下面是一个使用function生成的例子。ES5是先新建子类的实例对象this,再将父类的属性添加到子类上,由于父类的内部属性无法获取,导致无法继承原生的构造函数

es6新特性之 class 基本用法

ES6 提供了更接近传统语言的写法,引入了 class(类)这个概念,作为对象的模板。通过class关键字,可以定义类

mixin配合class实现多继承的绝佳妙用

mixin一般翻译为“混入”、“混合”, 早期一般解释为:把一个对象的方法和属性拷贝到另一个对象上;Mixin是一种思想,用来实现代码高度可复用性,又可以用来解决多继承的问题,是一种非常灵活的设计模式

Class:向传统类模式转变的构造函数

JS基于原型的类,一直被转行前端的码僚们大呼惊奇,但接近传统模式使用class关键字定义的出现,ES6的class只是个语法糖,其定义生成的对象依然构造函数。不过为了与构造函数模式区分开,我们称其为类模式。

JS 总结之class

class 是 ES6 的新特性,可以用来定义一个类,实际上,class 只是一种语法糖,它是构造函数的另一种写法。用法和使用构造函数一样,通过 new 来生成对象实例

class 类 this指向的问题

ES6中的 class定义一个类, 其内部包含 constructor构造函数, 除了在构造函数显示的定义一些属性, 其余的默认都添加到这个类的原型对象上。以上代码 classProxy(prosen2) 返回的是包含一层拦截器的实例对象, 当读取 sayName这个函数的是和会出发 get拦截等操作。

classList介绍和原生JavaScript实现addClass、removeClass等

使用jQuery可以给元素很方便的添加class和删除class等操作,现在原生的JavaScript也可以实现这个方法了。使用classList可以方便的添加class、删除class、查询class等。elementClasses 是一个 DOMTokenList 表示 element 的类属性 。

Class 的私有属性与私有方法

proposal-class-fields与proposal-private-methods定义了 Class 的私有属性以及私有方法,这 2 个提案已经处于 Stage 3,这就意味着它们已经基本确定下来了,等待被加入到新的 ECMAScript 版本中。

ES6 static

ES6中新增了class这个语法糖。此class并非java中的class,ES6中的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。其中有static关键字。

vue.js 动态绑定class

vue 指令以 v- 前缀标示,数据绑定的指令 v-bind:属性名, 简写为 :属性名, 简单的数据绑定例子如下;vue 的分隔符默认是 {{ }}, 在分隔符里面的字符串会被认为是数据变量,可以通过 方式设置class

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!