本着互联网的分享精神,在本篇文章我将会把我对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. @Configurable

    spring的一个注解,用来自动注入bean的注解,不需要通过BeanFactory去获取    

  2. [翻译]pytest测试框架(一)

    此文已由作者吴琪惠授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 纯官网译文而已... pytest是一个成熟的.全功能的python测试工具. pytest框架编写测试用例 ...

  3. ajax1—php(27)

    一 简介 web程序工作原理图: 传统的web程序工作原理图: Ajax工作原理图: 1.  关于Ajax l  Asynchronous 异步 l  JavaScript l  And l  XML ...

  4. long int double float

    参考:https://blog.csdn.net/ideality_hunter/article/details/78432486 long是长整型,64位 int是短整型,32位 double是双精 ...

  5. webshell在php方向的研究(精华篇)

    文章主旨:准备学习c语言,你喜欢的所有干货在文末附件里 作者宗旨:没有不想当将军的兵,没有不想提高技术的person,今天带你打开php的研究之路. 本文作者:Laimooc(原名xoanHn),个人 ...

  6. bad interpreter: Text file busy

    刚才运行test_mysql.py文件的时候 报了个这样的错.上网查了下,链接在这里:http://www.cnblogs.com/kerrycode/p/4038934.html 于是我就把第一行的 ...

  7. 10分钟教你用Python打造天气机器人+关键字自动回复+定时发送

    01 前言 Hello,各位小伙伴.自上次我们介绍了Python实现天气预报的功能以后,那个小程序还有诸多不完善的地方,今天,我们再次来完善一下我们的小程序.比如我们想给机器人发“天气”等关键字,它就 ...

  8. Linux和Windows数据同步

    正在做一个小项目,关于Linux和Windows数据同步,新知识很兴奋,比赛很有信心,加油吧少年 项目进行中:今晚实验室包宿开整.

  9. 队列的理解和实现(一) ----- 循环队列(java实现)

    什么是队列 我们都知道栈是先进后出的一种线性表,与之相反的是,队列是一种先进先出的线性表.它只允许在表的一端进行插入,而在另一端进行删除.举个例子来说,在生活中我们买东西需要进行排队,最先排队的可以最 ...

  10. javascript举例介绍事件委托的典型使用场景

    在了解什么是DOM事件以及给DOM事件绑定监听器的几种方法后,我们来谈谈事件委托. 1. e.target 和 e.currentTarget 当我们给目标元素target 绑定一个事件监听器targ ...