ES6中的Class

ES6中的class

简介

JS语法中起始是原生不怎么支持面向对象的,所有的面向对象起源均通过一个构造函数,这一点和JAVA等语言原生支持面向对象的语言有很大的不同。

通常生成一个对象的传统方式就是通过构造函数,这也是JS唯一面向的对象唯一起点。

function Point(x, y){
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function(){
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1,3);

注意 这时ES5的原生写法, 在接下来的篇幅我们会详细接受ES6中 关键字CLASS的使用方法。

在ES6中使用class和 es6其实再本质上没有任何的区别,都是通过构造函数来做文章,只不过class的使用更符合类似向我这种通过JAVA转过来的使用习惯。

class Point{
  constructor(x, y){
    this.x = x;
    this.y = y;
  }
  
  toString(){
    return '(' + this.x + ', ' + this.y + ')';
  }
}

基本上来讲 class已经是构造函数的另外一种写法,有几点不同之处在于

  • class中的函数 基本不用逗号来区别
  • Constructor toString 等方法都不需要加上function 直接起一个函数名并 定义其中方法即可
class Point{
}

typeof Point  // function
Point === Point.prototype.constructor   // true

在构造函数的prototype属性,在ES6的类上面继续存在,实际上所有定义再类的方法都是定义再类的prototype熟悉上面。

调用类的实例上面的方法其实就是调用原型的方法。

除非是显式的指名了this对象的属性,否则所有都是类的prototype上面

ES6与ES5不同之处在于 所有定义在class的方法都是不可枚举的,但是所有ES5 prototype上的方法都是可枚举的。

2. 严格模式

类和模块的内部,默认都是严格模式,所以不需要 use strict来指定运行模式。起始ES6已经慢慢的将整个语言提升为严格模式了

3. 类的实例对象

与ES5一样,实例的属性除非显示定义再其本身(this对象上),否则都是定义在原型上。

class Point{
  constructor(x, y){
    this.x = x;
    this.y = y;
  }
  
  toString(){
    return '(' + this.x + ',' + this.y + ')';
  }
}

var point = new Point(2, 3);
point.toString(); /// (2, 3);

point.hasOwnProperty('x'); // true
point.hasOwnProperty('y'); // true
point.hasOwnProperty('toString'); // false 定义再Point的原型对象上
point.__proto__.hasOwnProperty('toString'); // true  对象的原型对象 __proto__

所有的类的实例共享一个原型对象 这意味可以通过实例的 proto 属性添加方法

4. 私有方法与私有属性

私有方法

在原生的ES6的语法中没有支持私有方法的,所以我们只能绕开的来是使用 _开头的方法名来表示这个方法是私有方法

  class Demo{
     _printPrivate(name)
  } 

私有属性

5. this的指向

js最让人头疼的便是this的指向, 在类的方法内部如果含有this,它默认指向类的实例。但是,一旦单独来使用该方法,this很可能会改变

class Logger{
  printName(name = 'there'){
    this.print(`Hello ${name}`);// 1. 默认this指向的是Logger的实例
  }
  
  print(text){
    console.log(text); 
  }
}

const logger = new Logger();
const {printName} = logger();
printName();// 2. 因为在调用函数 导致this 丢失了

因为语言设计的缘故导致this会指向该方法运行的所在的环境,

解决方案一般有两种:

  1. 讲方法绑定 再构造方法中绑定this ,这样就不会找不到print方法
  2. 第二种解决方法是使用箭头函数

6. Class的getter setter方法

通过使用类 可以使用get和set关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为

7. Class的静态方法

  • 类的静态方法只能通过类来调用
  • 父类的静态方法,可以被子类继承
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,064评论 5 466
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,606评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,011评论 0 328
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,550评论 1 269
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,465评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,919评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,428评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,075评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,208评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,185评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,191评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,914评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,482评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,585评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,825评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,194评论 2 344
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,703评论 2 339

推荐阅读更多精彩内容

  • ES6发布以来,给前端开发人员带了不少的惊喜,它包含了一些很赞的特性,极大的方便了开发,class便是其中之一。在...
    离尤尤阅读 4,838评论 2 10
  • JS语法中起始是原生不怎么支持面向对象的,所有的面向对象起源均通过一个构造函数,这一点和JAVA等语言原生支持面向...
    gtt21阅读 400评论 0 0
  • class是创建类对象与实现类继承的语法糖,旨在让ES5中对象原型的写法更加清晰,易读。 基本使用: clas...
    二狗的小仙女阅读 384评论 1 0
  • class的基本用法 概述 JavaScript语言的传统方法是通过构造函数,定义并生成新对象。下面是一个例子: ...
    呼呼哥阅读 4,062评论 3 11
  • 毋庸置疑,好的事情总会到来。而当它来晚的时候不失为一种惊喜。 一个名字,就能让方圆不顾一切的寻找那个命中注定的素未...
    向往北极的熊阅读 167评论 0 0