ECMAScript之Class

个人理解:Class就是一个构造函数通用模板

js中没有类这个概念一直是js引以为耻的事情,市场听到java和C++同事说:“还特么面向对象编程,连特么类是什么都不知道,搞笑。”……前端出身的纯前端人员只能脸红脖子粗,然后悻悻然(吐槽一下搜狗拼音输入法,居然打不出‘悻悻然’这个词!)离去!然而作者怎么会自甘落后,让自己的门徒不能类似拍黄片的屌丝仔们大喊“php是全世界最好的语言!”于是,Class应声而出,我们再也不用被嘲笑连类都没有了!大可以喊出“JavaScript是世界上最好的语言!”

什么是类,其实不管是java也好还是c++也好,通通定义不过一句总结,类是模板,对象是一个具象的实例。

// es5的构造函数
function obj(x,y){
  this.x = x;
  this.y = y;
}
obj.prototype.total = function(){
  return this.x+this.y
}

var newObj = new obj(125,125)

console.log(newObj.total())  // => 250

来来来,为啥结果是250呢,我来告诉你们吧!因为作者脑子有坑,且是个二百五。
ps: 关键点记住了,new和prototype。这我就不详细讲了,不懂的都是二百五。

Class实现上例构造函数

// Class
class obj1 {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  total(){
    return this.x+this.y
  }
}


var newObj = new obj1(125,125)

console.log(newObj.total())  // => 250

用法和构造函数完全一致,只是更简单明了,没有了prototype而已。其实打印出来obj1的类型,还是一个函数!
ps:total方法不用函数命名,不用逗号隔开。

Class的继承

// extends
class obj1 {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  total(){
    return this.x+this.y
  }
}
class extendsObj extends obj1 {
  constructor(x, y , name){
    super(x, y)
    this.name = name
  }
  total(){
    return this.name + super.total();
  }
}

var newObj = new extendsObj(125,125, '你是个')

console.log(newObj.total())  // => 你是个250

super就是被继承对象。

你可能感兴趣的:(ECMAScript之Class)