es6从零学习(三):Class的基本用法

es6从零学习(三):Class的基本用法

一:定义一个类

//定义类
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return ‘(‘ + this.x + ‘, ‘ + this.y + ‘)‘;
  }
}

上面代码定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象

Point类除了构造方法,还定义了一个toString方法。注意,定义“类”的方法的时候,前面不需要加上function这个关键字

注意:类里面不可以添加属性,只能用object.assgin添加

二:使用

使用的时候,也是直接对类使用new命令,跟构造函数的用法完全一致。

class Bar {
  doStuff() {
    console.log(‘stuff‘);
  }
}

var b = new Bar();
b.doStuff() // "stuff"

  

三:类的prototype属性

1、类的所有方法都定义在类的prototype属性上面。

class Point {
  constructor() {
    // ...
  }

  toString() {
    // ...
  }

  toValue() {
    // ...
  }
}

// 等同于

Point.prototype = {
  constructor() {},
  toString() {},
  toValue() {},
};

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

class B {}
let b = new B();

b.constructor === B.prototype.constructor // true

3、类的方法都定义在prototype对象上面,所以类的新方法可以添加在prototype对象上面。Object.assign方法可以很方便地一次向类添加多个方法和属性值。

class Point {
  constructor(){
    // ...
  }
}

Object.assign(Point.prototype, {
  toString(){},
  toValue(){},  aa:123
});

注意:这里直接用Object.assign方法对Point进行操作会报错。

4、类的方法名,可以采用表达式。

let methodName = ‘getArea‘;

class Square {
  constructor(length) {
    // ...
  }

  [methodName]() {
    // ...
  }
}

注意:这里不可以对属性的名字用表达式,会报错。

5、类必须使用new调用,否则会报错

class Foo {
  constructor() {
    return Object.create(null);
  }
}

Foo()
// TypeError: Class constructor Foo cannot be invoked without ‘new‘

  

四:类的constructor方法

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

class Point {
}

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

  

五:类的实例对象

1、实例的属性除非显式定义在其本身(即定义在this对象上),否则都是定义在原型上(即定义在class上)。

//定义类
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.__proto__.hasOwnProperty(‘toString‘) // true
Point.property.hasOwnProperty(‘toString‘) // true

上面代码中,xy都是实例对象point自身的属性(因为定义在this变量上),所以hasOwnProperty方法返回true,而toString是原型对象的属性(因为定义在Point类上),所以hasOwnProperty方法返回false。这些都与 ES5 的行为保持一致。

2、类的所有实例共享一个原型对象。

var p1 = new Point(2,3);
var p2 = new Point(3,2);

p1.__proto__ === p2.__proto__
//true

上面代码中,p1p2都是Point的实例,它们的原型都是Point.prototype,所以__proto__属性是相等的。

注意:这里的__proto__是两段下划线

3、可以通过实例的__proto__属性为“类”添加方法。

var p1 = new Point(2,3);
var p2 = new Point(3,2);

p1.__proto__.printName = function () { return ‘Oops‘ };

p1.printName() // "Oops"
p2.printName() // "Oops"

var p3 = new Point(4,2);
p3.printName() // "Oops"

使用实例的__proto__属性改写原型,必须相当谨慎,不推荐使用,因为这会改变“类”的原始定义,影响到所有实例。

原文地址:https://www.cnblogs.com/momozjm/p/8290202.html

时间: 2024-10-09 08:15:33

es6从零学习(三):Class的基本用法的相关文章

es6从零学习(四):Class的继承

es6从零学习(四):Class的继承 一:继承的方式 1.Class 可以通过extends关键字实现继承 class Point { } class ColorPoint extends Point { constructor(x, y, color) { super(x, y); // 调用父类的constructor(x, y) this.color = color; } toString() { return this.color + ' ' + super.toString(); /

angular学习(三):ng渲染案例用法总结

前两篇把基本的架子都搭好了,在单独的Controller中处理独立的业务,这时候渲染相应的页面就要用到ng提供的相应组件和事件,下面我采用一一列举的方式,将这些知识都总结于此: ng-click: 案例 <button type="button"class="btn btn-primary" ng-click="showUploadView()">点击上传</button> 说明 声明了一个btn的click事件,对应的c

cocos2dx 3.1从零学习(三)——Touch事件(回调,反向传值)

第三讲 Touch 前面两篇我们学习的内容,足够我们做一款简单的小游戏.也可以说,我们已经入门了,可以蹒跚的走路了. 本篇将讲解cocos2dx中很重要的touch回调机制.你肯定记得第一章做定时器时间的时候用过CC_CALLBACK_1宏定义,它让我们回调一个只有一个形参的函数来执行定时操作. 回调函数的实现(Lambda表达式) 学习本篇前请仔细学习一下C++11的特性,std::function和lambda表达式.C++11还引入了很多boost库的优秀代码,使我们在使用的时候不必再加b

【从零学习openCV】IOS7人脸识别实战

前言 接着上篇<IOS7下的人脸检測>,我们顺藤摸瓜的学习怎样在IOS7下用openCV的进行人脸识别,实际上非常easy,因为人脸检測部分已经完毕,剩下的无非调用openCV的方法对採集到的人脸样本进行训练,终于得到一个能够预測人脸的模型.可是当中的原理可谓是博大精深,因为快临最近末考试了,没时间去琢磨当中详细的细节,这次就先写个大概的demo,下次更新文章就得到6月20号之后了. 原理: 从OpenCV2.4之后,openCV增加了新的类FaceRecognizer,我们能够使用它便捷地进

Oracle学习(三):单行函数

1.知识点:可以对照下面的录屏进行阅读 SQL> --字符函数 SQL> --字符串的转换 SQL> select lower('hellO WORld') 转小写,upper('hellO WORld') 转大写,initcap('hello world') 首字母大写 2 from dual; SQL> --substr(a,b) 从a中,第b位开始取,取右边所有的字符 SQL> select substr('Hello World',4) from dual; SQL&

cocos2dx 3.1从零学习(一)——入门篇(一天学会打飞机)

我们有C++基础,学习引擎总是急于求成,想立马做出一款简单的游戏给朋友玩.但是我们往往看了很多资料却一直不知道如何下手去写,有时候只要能走出第一步我们就会游刃有余,但是眼高手低的我们不是大神,需要有人指引一下.这里我就写一下我是如何入门学习cocos2dx3.1的,给大家参考一下. 如果你想第一天就写出微信打飞机,请耐心去阅读.我也是一个菜鸟,博客难免粗糙和出错,请大家谅解.加油吧! 我们创建工程后总会自带一个HelloWorld类,短短的几行代码就出来了一个游戏的雏形,请问我们真的理解它了吗?

关于我的网站(八零家园三周年)

三年转瞬即逝,2011年8月6日注册了www80.org这个域名,并给这个网站起名叫“八零家园”,当时计划的是在做成一个怀念八零后的旧时光的网站,还有第二步计划是如果做大了还要开通八零后交流的论坛——“八零家园”.但是,事实上,这三年,这个网站并没有做成,原因有很多,总之是失败了.2011年的8月6日,我还没有到山东大学读研,2014年的8月6日,我已经从山东大学毕业,来到了浪潮集团工作.以后,要工作,还要不断学习,还有很多目标要去实现,所以这个网站估计也就荒废了,但是我会一直留着的.与网站还有

cocos2dx 3.1从零学习(二)——菜单、场景切换、场景传值

回顾一下上一篇的内容,我们已经学会了创建一个新的场景scene,添加sprite和label到层中,掌握了定时事件schedule.我们可以顺利的写出打飞机的主场景框架. 上一篇的内容我练习了七个新场景,每一个场景都展示不同的东西,像背景定时切换.各种字体的随机颜色和位置等.每次要切换一个场景都要修改AppDelegate中的调用代码,非常的不方便查看,这一篇我们写场景的切换.每当我们创建一个新的场景的时候只要添加对应按钮到主界面,点击即可以切换过去查看对应的效果.这个有点类似官方提供的cppt

cocos2dx 3.1从零学习(五)——动画

动画是游戏中最重要的表现部分,本篇只是初步学习大部分动画的使用方法,没有什么原理性的东西,但是例子有很多,如果有不熟的地方要练一下. 特别是Spawn和Sequence的组合使用,什么时候使用Spawn,什么使用使用Sequence,怎么在它们之间相互嵌套对方.用光你的脑细胞尽力的去折磨这几个函数吧!做出尽可能多的绚丽的组合! 动画方法 动画的方法都在Node中,它的子类包括Layer.Sprite.MenuItem等. runAction 启动动画 stopAction 停止动画 stopAc