es5 之前定义构造函数的方法

// 先定义一个函数,强行叫它构造函数,大写的P也不是必须的,只是约定俗成
function Point(x, y) {
this.x = x; // 构造函数的属性都定义在函数内部
this.y = y; // this指向实例对象
} // 构造函数的方法都定义在构造函数的原型上
Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
}; // new 一个对象,就OK了
var p = new Point(, );

es6 定义类常见方法

//定义类
class Point {
constructor(x, y) { // 定义构造方法
this.x = x; // this指向实例对象
this.y = y;
}
toString() { // 定义一个方法,注意这里没有function关键字
return '(' + this.x + ', ' + this.y + ')'; // this指向实例对象
}
}
var test = new Point(,);//实例化
console.log(test.toString());//(2, 3)

基本上,ES6的class可以看做知识一个语法糖,它的绝大部分功能,ES5都可以看到,新的class写法只是让对象原型的写法更加清晰,更像面向对象编程语法而已

定义了一个Point类,他里面有个constructor方法,这就是构造方法;而this关键字则代表实例对象,也就是说,ES5的构造函数Point,对应ES6的Point类的构造方法;

 Point类除了构造方法,还定义了一个toString方法,定义类的方法的时候,前面不需要加function这个关键字,直接将函数定义放进去就行了 ,另外,方法之间不需要逗号分隔;

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

constructor方法
constructor方法是类的默认方法,通过new生产对象实例时,自动调用该方法,一个类必须有constructor方法,如果没有定义,则默认添加空的constructor方法
class Point{
}
//等同于
class Point {
constructor () { }
}
constructor方法默认返回实例对象(即this),完全可以指定返回另外一个对象
class Person {
constructor () {
return {};
}
}

类就是function 的另一种写法,本身还是function

class Point {
}
console.log(typeof Point);// "function" 类的数据类型就是函数
console.log(Point === Point.prototype.constructor);// true 类本身就指向构造函数

this指向

class Logger {
printName(name = 'there') {
this.print(`Hello ${name}`);
}
print(text) {
console.log(text);
}
}
const logger = new Logger();
const printName = logger.printName;
logger.printName(); 这样不会报错
printName();//报错
printName方法中的this,默认指向Logger类的实例。但是,如果将这个方法提取出来单独使用,this会指向该方法运行时所在的环境,因为找不到print方法而导致报错。

 get与set

getter可以用来得获取属性,setter可以去设置属性

class Person {
constructor(){
this.hobbies = [];
}
set hobby(hobby){
this.hobbies.push(hobby);
}
get hobby(){
return this.hobbies;
}
}
let person = new Person();
person.hobby = 'basketball';
person.hobby = 'football';
console.log(person.hobby);//["basketball", "football"]

class 的静态方法

类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。
class Point{
static classMethod(){
return 'hello';
}
}
Point.classMethod();//hello
如果在实例上调用静态方法,会抛出一个错误,表示不存在该方法。注意,如果静态方法包含this关键字,这个this指的是类,而不是实例。
class Point{
static classMethod(){
return this.getName();
}
static getName(){
return 'zs';
}
getName(){
return 'ls';
}
}
console.log(Point.classMethod());//zs

class 的静态属性和实例属性

静态属性指的是 Class 本身的属性,即Class.propName,而不是定义在实例对象(this)上的属性。
class Foo {
}
Foo.prop = ;
Foo.prop // 1
//Foo类定义了一个静态属性prop,只有这种写法可行,因为 ES6 明确规定,Class 内部只有静态方法,没有静态属性。
类的实例属性-->类的实例属性可以用等式,写入类的定义之中
class Point{
num = ;
constructor(){
console.log(this.num);//
}
}
//num就是Point的实例属性。在Point的实例上,可以读取这个属性。
var test = new Point();
console.log(test.num);//

class的继承

父类的静态方法,可以被子类继承。
class parent{
static getName(){
return 'parent';
}
}
class child extends parent{
}
console.log(child.getName());//parent

(1)子类没constructor时

子类American继承父类Person,子类没用定义constrcutor,则默认添加一个,并且在constrcutor中调用super函数,相当于调用父类的构造函数。调用super函数是为了在子类中获得父类的this,调用之后this指向子类。

class parent{
foo(){
return 'foo';
}
}
class child extends parent{
get(){
return this.foo()
}
}
var test = new child();
console.log(test.foo());//foo
console.log(test.get());//foo

(2)子类有constructor

子类必须在constructor方法中调用super方法,否则new实例时会报错。因为子类没有自己的this对象,而是继承父类的this对象, 相当于 parent.prototype.constructor.call(this)
如果不调用super函数,子类就得不到this对象。super()作为父类的构造函数,只能出现在子类的constructor()中,但是super指向父类的原型对象,可以调用父类的属性和方法。
class parent{
foo(){
return 'foo';
}
}
class child extends parent{
constructor(){
super()
}
get(){
return this.foo()
}
}
var test = new child();
console.log(test.foo());//foo
console.log(test.get());//foo


ES6原生Class的更多相关文章

  1. 浅谈ES6原生Promise

    浅谈ES6原生Promise 转载 作者:samchowgo 链接:https://segmentfault.com/a/1190000006708151 ES6标准出炉之前,一个幽灵,回调的幽灵,游 ...

  2. ES6原生Promise的所有方法介绍(附一道应用场景题目)

    JS的ES6已经出来很久了,作为前端工程师如果对此还不熟悉有点说不过去.不过如果要问,Promise原生的api一共有哪几个?好像真的可以难倒一票人,包括我自己也忽略了其中一个不常用的API Prom ...

  3. Node.js用ES6原生Promise对异步函数进行封装

    Promise的概念 Promise 对象用于异步(asynchronous)计算..一个Promise对象代表着一个还未完成,但预期将来会完成的操作. Promise的几种状态: pending:初 ...

  4. [Es6]原生Promise的使用方法

    参考:https://www.cnblogs.com/imwtr/p/5916793.html 1.new Promise(func) 通过实例化构造函数成一个promise对象,构造函数中有个函数参 ...

  5. 转译es6原生原生对象及方法,如Object.assign,Object.keys等,及promise

    下面主要为兼容恶心的ie 1,首先引入‘babel-polyfill’,可写在webpack.dev.js的entry.vendors数组里面 2,在入口文件如app.js里面import 'babe ...

  6. 用vue.js学习es6(六):Iterator和for...of循环

    一.Iterator (遍历器)的概念: 遍历器(Iterator)就是这样一种机制.它是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只 要部署Iterator接口,就可以完成遍历操 ...

  7. ES6的promise对象应该这样用

    ES6修补了一位Js修真者诸多的遗憾. 曾几何时,我这个小白从js非阻塞特性的坑中爬出来,当我经历了一些回调丑陋的写法和优化的尝试之后,我深深觉得js对于多线程阻塞式的开发语言而言,可能有着其太明显的 ...

  8. ES6笔记(7)-- Promise异步编程

    系列文章 -- ES6笔记系列 很久很久以前,在做Node.js聊天室,使用MongoDB数据服务的时候就遇到了多重回调嵌套导致代码混乱的问题. JS异步编程有利有弊,Promise的出现,改善了这一 ...

  9. ES6新增Promise

    1.promise概念 ES6 原生提供了 Promise 对象. 所谓 Promise,就是一个对象,用来传递异步操作的消息.它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提 ...

随机推荐

  1. Master-Worker设计模式介绍

    Master-Worker模式是常用的并行设计模式.核心思想是,系统由两个角色组成,Master和Worker,Master负责接收和分配任务,Worker负责处理子任务.任务处理过程中,Master ...

  2. L2-005. 集合相似度(STL)*

    L2-005. 集合相似度 参考博客 #include<cstdio> #include<set> #include<cstdlib> using namespac ...

  3. sqlserver2008数据库自动备份的sql脚本及使用bat命令执行脚本

    -----sql脚本 declare @fileName varchar(255) ,--定义备份文件名变量         @dbname varchar(255)--定义备份数据库名变量decla ...

  4. C# 实现CRC16校验

    前言 本文将使用一个NuGet公开的组件技术来实现CRC16校验功能,提供了一些简单的API,来方便的实现. 在Visual Studio 中的NuGet管理器中可以下载安装,也可以直接在NuGet控 ...

  5. Linux安装软件出现 “Unable to locate package xxx”错误

    使用新购入的阿里云服务器ECS,预装的Ubuntu,然后想要利用 xrdp 进行远程登陆,但是在输入命令: apt-get install xrdp 出现了 E;Unable to locate pa ...

  6. 3.1 unittest简介

    3.1 unittest简介 前言 熟悉java的应该都清楚常见的单元测试框架Junit和TestNG.python里面也有单元测试框架-unittest,相当于是一个python版的junit.py ...

  7. Python 实现累加计数的几种方法

    #要实现累加,关键在于数据存在哪儿,怎么使每次累加的都是同一个变量 行为像静态变量 #前两种都是数据存到类的成员变量, # 类利用__call__ class foo: def __init__(se ...

  8. Spring 自动装配及其注解

    一.属性自动装配 首先,准备三个类,分别是User,Cat,Dog.其中User属性拥有Cat和Dog对象. package com.hdu.autowire; public class User { ...

  9. jmeter 关联

    (1)正则表达式提取器 注:正则表达式部分配置说明 案例: 动态值:name=userSession value=119828.306682868zVzDzzipfcfDzQicpAVVVf> ...

  10. ILBC 规范 2

    接上篇 <ILBC 规范>  https://www.cnblogs.com/KSongKing/p/10354824.html  , ILBC    的 目标 是    跨平台  跨设备 ...