美文网首页
ES6: Class类

ES6: Class类

作者: 打不过就加入他 | 来源:发表于2016-09-09 00:04 被阅读83次

Es6提供了新的构造函数写法,引入了Class这个关键字来声明一个构造函数

  • old type
function Person(x,y){
  this.x = x;
  this.y = y;
}
Person.prototype.init = function(){}
//实例
new Person(1,2)
  • now
class Person(){
  constructor(x,y){
  this.x = x;
  this.y = y;
  }
  init(){}
}
//实例
new Person(1,2)

注意方法间不要加“,”

  • 私有方法
    私有方法,顾名思义,只在对象内部调用,是常用的需求
class List(){
  _get(){
  }
  init(){}
}
//_get方法我用"_"做标示,证明他只在内部使用,是私有方法
  • 继承
    子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。
class Person(){
  constructor(x,y){
  }
}
class students extends Person(){
  constructor(x,y,z){
    super(x,y);
    this.z = z;
}
}
  • set get
    在Class内部可以使用getset关键字,对某个属性设置存值函数和取值函数。

看到这里,其实是可以实现一个很简单的双向绑定

class bind(){
  constructor(ele){
    this.ele = document.getElementBy(ele)
  }
  get html() { 
    return this.element.innerHTML;
   } 
  set html(value) 
  { 
    this.element.innerHTML = value; 
  }
}
  • 静态方法
    static修饰的方法,不能被实例继承,直接在类上调用
class Person(){
  static age(){ return 'hh'}
}
Person.age()  ==> hh

相关文章

  • ES6 class与继承

    class是什么 class是定义类的方法。ES6之前用构造函数的方式定义类,ES6引入了class。 class...

  • 深入理解JS面向对象 - JavaScript实现继承的五种方式

    一、类与实例 1. 类的声明 传统function类的声明 ES6中的class声明 1.1 ES6 class与...

  • 2JavaScript设计模式--class/extends

    ES6语法 类 class ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板...

  • react组件

    es6 的class类的继承 运用es6 class继承 通过继承React.Component类来定义一个组件

  • 第三十二节: ES6 Class类

    1. ES6 Class 类 ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板...

  • 第三十二节: ES6 Class类

    1. ES6 Class 类 ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板...

  • 深入理解ES6中class的this指向

    在ES6中,引入了类似其他语言的类的写法:即class(类),作为类对象模板。ES6 的class可以看作一个语法...

  • ES6 class类

    在ES6以前,没有类的概念,所有的面向对象都是基于原型实现的。ES6中可以通过class定义类,但是class的本...

  • ES6 class类

    ES6 class类知识点梳理 大概从几个方面来讲解ES6 class类和传统的构造函数的区别。 必须要有cons...

  • class to es5

    1.Class 众所周知js是没有class的,但是es6却给了我们“类”的概念;我们先写一个es6的类: 查看其...

网友评论

      本文标题:ES6: Class类

      本文链接:https://www.haomeiwen.com/subject/grheettx.html