本着互联网的分享精神,在本篇文章我将会把我对JavaScript  es6 class类的理解分享给大家。

JavaScript 主要是 JavaScript 现有的基于原型的继承的语法糖。 类语法不是向JavaScript引入一个新的面向对象的继承模型。JavaScript类提供了一个更简单和更清晰的语法来创建对象并处理继承。

使用es写一个类(构造函数)

在es5中大家一般都这么写一个类(构造函数)

另外需要注意,class类不会被提升。

// 创建一个User构造函数
function User(name, age) {
this.name = name;
this.age = age;
}
// User构造函数的静态方法。
User.getClassName = function () {
return 'User';
};
// User构造函数的动态方法
User.prototype.changeName = function (age) {
this.age = age
};
Object.defineProperty(User.prototype, 'info', {
get (){
return 'name: ' + this.name + '|' + 'age: ' + this.age
}
});
// 创建一个Manager 构造函数
function Manager(name, age, password) {
User.call(this, name, age); //将User函数call到Manager函数内
this.password = password
}
// 继承User的静态方法
Manager.__proto__ = User;
// 调用继承User的getClassName 方法。
console.log(Manager.getClassName());
// 继承User动态方法
Manager.prototype = User.prototype;
// 创建一个新的动态方法 changePassword
Manager.prototype.changePassword = function (pwd) {
this.password = pwd
};
//实例化Manager 构造函数。
var manager = new Manager('zhang', 22, '123');
manager.changeName('23');
console.log(manager.info);

将es5的构造函数转换为es6的类

以上方法确实没有什么问题,但是相对于es6的class来讲没有那么优雅,下面我就用es6的语法让代码优雅一点。

其实本质上都是一样的,只不过是一个语法糖。

/**
* Created by 张佳伟 on 2017/5/2.
*/
'use strict';
// function User(name, age) {
// this.name = name;
// this.age = age;
// }
class User {
// 构造函数 现在叫类 本质是一样的,其实就是一个语法糖。
constructor(name, age) {
this.name = name;
this.age = age;
} // User.getClassName = function () {
// return 'User';
// };
// 静态方法
static getClassName() {
return 'User';
} // User.prototype.changeName = function (name) {
// this.name = name;
// };
// 动态方法,相当于es中的prototype
changeName(name) {
this.name = name;
} // User.prototype.changeAge = function (age) {
// this.age = age;
// };
changeAge(age) {
this.age = age;
} // Object.defineProperty(User.prototype, 'info', {
// get (){
// return 'name: ' + this.name + '|' + 'age: ' + this.age
// }
// });
get info() {
return 'name:' + this.name + '|age:' + this.age;
}
}
;
// function Manager(name, age, password) {
// User.call(this, name, age);
// this.password = password;
// }
//继承静态方法
// Manager.__proto__ = User;
// //继承prototype原型方法
// Manager.prototype = User.prototype;
// 继承这里省事吧,一步就到位了
class Manager extends User {
constructor(name, age, password) {
super(name, age); //这个我下面会将,这里先暂时理解为call,但是注意他和call可不一样。
this.password = password;
} changePassword(password) {
return this.password = password;
} get info() {
var info = super.info; //这个是父类的info,当然你也可以重写info这个方法。那就是删掉这句代码,在写上新的就行拉~
return info
}
}
// console.log(typeof User, typeof Manager);
var manager = new Manager('leo', 22, '123');
// manager.changeName('铅笔'); console.log(manager.info);
console.log(manager.changePassword(456))

立即执行类的写法

'use strict';
// 立即执行的类
let User = new class User {
constructor(name){
this.name = name;
}
}('铅笔')
console.log(User)

super

super 关键字用于调用一个对象的父对象上的函数。

super的语法

super([arguments]); // 调用 父对象/父类 的构造函数
super.functionOnParent([arguments]); // 调用 父对象/父类 上的方法

在构造函数中使用时,super关键字单独出现,必须在可以使用this关键字之前使用。此关键字也可用于调用父对象上的函数。

class Polygon {
constructor(height, width) {
this.name = 'Polygon';
this.height = height;
this.width = width;
}
sayName() {
console.log('Hi, I am a ', this.name + '.');
}
} class Square extends Polygon {
constructor(length) {
this.height;
// ReferenceError,super 需要先被调用! /*
这里,它调用父类的构造函数的 length,
作为Polygon 的 width和 height.
*/
super(length, length); /*
注意: 在派生的类中, 在你可以使用'this'之前, 必须先调用super()。
忽略这, 这将导致引用错误。
*/
this.name = 'Square';
} get area() {
return this.height * this.width;
} set area(value) {
this.area = value;
}
}

调用父类上的静态方法

class Human {
constructor() {}
static ping() {
return 'ping';
}
} class Computer extends Human {
constructor() {}
static pingpong() {
return super.ping() + ' pong';
}
}
Computer.pingpong(); // 'ping pong'

JavaScript es6 class类的理解。的更多相关文章

  1. ES6 class 类的理解(一)

    优点 ES6 的类提供了几点明显的好处: 兼容当前大量的代码. 相对于构造器和构造器继承,类使初学者更容易入门. 子类化在语言层面支持. 可以子类化内置的构造器. 不再需要继承库:框架之间的代码变得更 ...

  2. JavaScript ES6 Symbol.hasInstance的理解。

    Symbol.hasInstance 本案例是结合阮一峰老师的ECMAScript 6 入门丛书进一步的详细介绍,和对Symbol.hasInstance的理解.本着互联网的精神,分享给大家. 对象的 ...

  3. 《深入理解ES6》笔记—— JavaScript中的类class(9)

    ES5中的近类结构 ES5以及之前的版本,没有类的概念,但是聪明的JavaScript开发者,为了实现面向对象,创建了特殊的近类结构. ES5中创建类的方法:新建一个构造函数,定义一个方法并且赋值给构 ...

  4. JavaScript ES6 promiss的理解。

    本着互联网的分享精神,我将我对promise的理解分享给大家. JavaScript ES6的promise方法主要应用在处理异步函数返回的结果,注意他不是将异步函数转换为同步函数,而是等异步函数有结 ...

  5. ES6中的class类的理解

    传统的javascript中只有对象,没有类的概念.它是基于原型的面向对象语言.原型对象特点就是将自身的属性共享给新对象.这样的写法相对于其它传统面向对象语言来讲,很有一种独树一帜的感脚!非常容易让人 ...

  6. (ES6)JavaScript中面向对象类的实现

    在ES5中,我们就知道JS是不支持面向对象的,所以用函数模拟了一个构造函数来实现类的.那么在ES6中,在ES5的原理基础上,将代码书写更为简单,明了. 一.怎样用ES6创建类?首先看一看例子: cla ...

  7. javascript类的理解和使用

    距离上次写博客已经过去好几个月了,现在手里的项目正好都结束了,闲暇之后开始理一下开发中一些问题,这次说一下javascript当中的类,可能很多人对于写惯了前台页面效果的coder来说,对于javas ...

  8. 深入理解JavaScript中的类继承

    由于写本文时全部是在编辑器中边写代码边写感想的,所以,全部思想都写在代码注释里面了 // 类继承 //todo.1 extends 关键字 class Animal { constructor(nam ...

  9. ES6入门——类的概念

    1.Class的基本用法 概述 JavaScript语言的传统方式是通过构造函数,定义并生成新对象.这种写法和传统的面向对象语言差异很大,下面是一个例子: function Point(x, y) { ...

随机推荐

  1. django drf 级联数据和RetrieveModelMixin

    1.定义View from django.shortcuts import render from rest_framework.views import APIView from rest_fram ...

  2. WPF自定义控件之列表滑动特效 PowerListBox

    列表控件是应用程序中常见的控件之一,对其做一些绚丽的视觉特效,可以让软件增色不少. 本人网上看过一个视频,是windows phone 7系统上的一个App的列表滚动效果,效果非常炫 现在在WPF上用 ...

  3. SpringBoot :docker

    Docker 是一个开源的应用容器引擎 docker官方网站:https://hub.docker.com/ $部署docker到Linux系统 1.准备一个Linux系统的虚拟机或者物理机 本例所使 ...

  4. 工作中常用Linux命令

    建立软链接  ln -s      例:ln -s b a 解释:把文件夹a和文件夹b关联起来,访问文件夹a,实际访问的是问价夹b 删除软连接  rm -rf a  直接删掉a文件夹跟a和b的软连接. ...

  5. tushare模块的应用

    一.简介以及环境安装 TuShare是一个著名的免费.开源的python财经数据接口包.其官网主页为:TuShare -财经数据接口包.该接口包如今提供了大量的金融数据,涵盖了股票.基本面.宏观.新闻 ...

  6. leetcode-54-螺旋矩阵

    题目描述: 给定一个包含 m x n 个元素的矩阵(m 行, n 列),请按照顺时针螺旋顺序,返回矩阵中的所有元素. 示例 1: 输入: [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7 ...

  7. vue封装插件并发布到npm上

    vue封装插件并发布到npm上 项目初始化 首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名称此命令创建我们的项目的目录, ...

  8. 2016级算法期末上机-I.难题·ModricWang's Fight with DDLs III

    1126 ModricWang's Fight with DDLs III 思路 由于题目中已经说明了时间经过了正无穷,因此初始位置是不重要的,并且每条边.每个点的地位是均等的.因此到达每个点的概率就 ...

  9. 嵌入式C语言自我修养 05:零长度数组

    5.1 什么是零长度数组 顾名思义,零长度数组就是长度为0的数组. ANSI C 标准规定:定义一个数组时,数组的长度必须是一个常数,即数组的长度在编译的时候是确定的.在ANSI C 中定义一个数组的 ...

  10. laravel框架图片上传

    1.建控制器方法 2.建立路由 绑定控制器方法 3.进行图片上传的配置 修改图片上传的路径 a) config/filesystems.php 修改disks->local->root(图 ...