Class的基本语法(笔记)

js与es6对比

1.js中没有类(class)这个概念,通过构造函数的方式实例化对象。

function Point(x, y) {
    this.x = x;
    this.y = y;
}
Point.prototype.toString = function() {
    return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);

2.es6中,引入类这个概念。

  • constructor方法,就是构造方法。(对应上面js代码中的构造函数Point)。
  • this指向实例化对象。
  • toString是类原型对象上的方法。
  • 类不存在变量提升。
class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
 //注意定义方法的时候,这里不用function关键字哦
    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
}

实例化的时候,也是使用new。跟构造函数的用法一样。

var p = new Point(1, 2);

类的方法

1.类所有的方法都是定义在原型对象prototype上的,包括constructor也是类原型对象上的方法。

class Point {
  constructor() {
    // ...
  }
  toValue() {
    // ...
  }
}
// 等同于
Point.prototype = {
  constructor() {},
  toValue() {},
};

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

class B {}
let b = new B();
//实例化对象的constructor 是在__proto__的,不过原型链中,
//在自身上找不到的方法或者属性时,会原型上找。
//即b.constructor==b.__proto__.constructor
b.constructor === B.prototype.constructor // true

3.类的内部所有定义的方法,都是不可枚举的。
4.属性可以使用表达式,例如下面的类的方法名就叫做“sayHello”

let methodName = 'sayHello';
class Square {
  constructor() {
  }
  [methodName]() {
    // ...
  }
}

constructor 方法

1.constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。

class Point {
}

// 等同于
class Point {
  constructor() {}
}

2.constructor方法,直接指向“类”的本身。(与es5中一致)

console.log(Point===Point.prototype.constructor) //true

类的实例

1.通过new来实例化对象,不加会报错。

// 报错
var point = Point(2, 3);

// 正确
var point = new Point(2, 3);

2.实例化的时候,在类的constructor中通过this定义的属性,是实例对象自身的方法。而在类中定义的方法(例如上面的toString方法),则会挂在实例对象原型__proto__上。

image.png

get和set

get取值函数,set存值函数。(一般用不到,懒得写,知道有这么回事得了~~)

静态方法

在方法上加static关键字,就是“静态方法”。

  • 可以直接通过类调用。
  • 静态方法中的this指向的是类,而不是实例,所以不会被实例继承。
class Foo {
  static classMethod() { //静态方法
    return 'hello';
  }
}
Foo.classMethod() // 'hello'
  • 父类的静态方法,可以被子类继承。
  • 静态方法也是可以从super对象上调用的。
class Foo {
  static classMethod() {
    return 'hello';
  }
}

class Bar extends Foo {
  static classMethod() {
    return super.classMethod();
  }
}

Bar.classMethod() // "hello"

实例属性的新写法

实例属性一般在constructor的通过this定义,也可以定义在类的最顶层。

class Par{
   bb="hello"; //实例的属性可以在顶层定义,不用加this
   constructor (){
       this.aa=1;
  }
}

var p=new Par();
console.log(p.bb) // hello

静态属性

静态属性就是类自身的属性。

class Par{
    constructor (){
     //....
    }
}
Par.aa="haha"; //aa是静态属性
console.log(Par.aa) //"haha"

目前,只有这种写法可行,因为 ES6 明确规定,Class 内部只有静态方法,没有静态属性。现在有一个提案提供了类的静态属性,写法是在实例属性的前面,加上static关键字。

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

推荐阅读更多精彩内容

  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,096评论 0 21
  •   面向对象(Object-Oriented,OO)的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意...
    霜天晓阅读 2,093评论 0 6
  • Class 的基本语法 简介 JavaScript 语言中,生成实例对象的传统方法是通过构造函数。下面是一个例子。...
    huilegezai阅读 516评论 0 0
  • 基本语法 简介 JavaScript语言中,生成实例对象的传统方法是通过构造函数. ES6提供更接近传统语言的写法...
    JarvanZ阅读 874评论 0 0
  • 面向对象的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象。ECMAScr...
    DHFE阅读 960评论 0 4