前段时间复习了面向对象这一部分,其中提到在es6之前,Javasript是没有类的概念的,只从es6之后出现了类的概念和继承。于是乎,花时间学习一下class。

简介

JavaScript 语言中,生成实例对象的传统方法是通过构造函数来创建的。

function Person (name,age){
this.name = name;
this.age = age;
}
Person.prototype.say=function(){ // 不能使用箭头函数(我差点忘记),因为 箭头函数没有prototype属性
alert(this.name);
}
var peter = new Person('peter',25);

es6提出了一个关键字class,把上述例子中简化成了传统的面向对象语言java,c++等创建类的形式。 ps:Javascript 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Javascript 以后扩展使用。

class定义类简单方式:
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
say(){
alert(this.name)
}
}
var peter = new Person('peter',25);
这几步骤中:
1. Person 这是类名,对应就是es5中构造函数名。
2. 里面创建的都是方法。
3. 其中有constructor方法,就叫构造方法,this关键字则代表实例对象,这个方法对应的就是es5的构造函数。
4. 还有个除了constructor方法的其他方法,say方法,对应的就是es5中挂载到其构造函数的prototype属性上的方法。

ps:1 定义“类”的方法的时候,前面不需要加上function这个关键字,直接把函数定义放进去就行,否则报错。 2 方法之间不需要逗号分隔,加了会报错。 3 class定义类名,虽然是对象形式,但不是对象,而是函数。

typeof Person  // "function"
Person.prototype.constructor == Person // true

这说明了类的数据类型就是函数,类本身就指向构造函数。

  类和普通的构造函数的区别:

    * 类的调用必须用new来实例化。

    * 类的内部所有定义的方法是不可枚举的。

    * 类的内部已经采用的是严格模式。

    * 类的内部不存在变量提升。

class表达式

与函数一样,类也可以使用表达式的形式定义。

    const Person = class {
constructor(){}
}

也可以用这样的方式定义。

    const MyClass = class Me {
getClassName() {
return Me.name;
}
};

需要注意的是,这个类的名字是MyClass而不是Me,Me只在 Class 的内部代码可用,指代当前类。

    let inst = new MyClass();
inst.getClassName() // 'Me'
console.log(Me.name) // Uncaught ReferenceError: Me is not defined
tip:
name 属性
由于本质上,ES6 的类只是 ES5 的构造函数的一层包装,所以函数的许多特性都被Class继承,包括name属性,name属性总是返回紧跟在class关键字后面的类名。
class Point {}
Point.name // "Point"
constuctor方法:

每个类中都有默认的construtor方法,通过new命令生成对象实例时,自动调用该方法。即使没有显式定义constructor方法,也会有默认的construtor方法。 constructor方法默认返回实例对象(即this),也可以指定返回另外一个对象。

class Person{
constructor(name,age){
this.name = name;
this.age = age
}
}
var peter = new Person('peter',25);
peter instanceof Person // true;
class Person{
constructor(){
var child = {
name:'jerry',
age:10
}
return child
}
}
var peter = new Person();
peter instanceof Person // false;

上面两个例子说明了,在没有指定返回的对象情况下,默认返回实例对象,有指定返回的对象,则返回该对象,但返回的对象就不是类的实例了。

另外:实例属性的新写法: // error

实例属性除了在constructor()方法里面定义,也可以直接写在类的最顶层。

class Person{
name = 'peter';
say(name){
console.log(name)
}
}
类的实例对象:

同es5的构造函数的实例一样:实例的属性除非显式定义在其本身(即定义在this对象上),否则都是定义在原型上(即定义在class上)。 大白话就是:实例的属性如果没有显式定义到constructor上,那么就是定义在除了constructor以外的方法中。

class Person{
constructor(name,age){
this.name = name;
this.age = age;
this.skill = function(){
alert('running')
}
}
say(){
alert(this.name)
}
}
var peter = new Person('peter',25);
console.log(peter.hasOwnProperty('name')); // true
console.log(peter.hasOwnProperty('age')); // true
console.log(peter.hasOwnProperty('skill')); // true
console.log(peter.hasOwnProperty('say')); // false
console.log(peter.__proto__.hasOwnProperty('say')) // true

从上述可知:凡是在constructor方法里的属性都是实例对象中的都返回为true,不在constructor方法里的都是类的原型上的属性。

tip:

      object.hasOwnProperty(proName) 确定某个对象是否具有带指定名称的属性。

        参数解释:

        object

          必需。对象的实例。

        proName

          必需。一个属性名称的字符串值。(是个字符串!)

      说明:

        如果 object 具有带指定名称的属性,则 hasOwnProperty 方法返回 true,否则返回 false。

        此方法不会检查对象原型链中的属性;该属性必须是对象本身的一个成员。

同es5一样,类的所有实例共享一个原型对象

var peter = new Person('peter',25);
var tom = new Person('tom',18);
console.log(tom.__proto__ == peter.__proto__) // true

这说明了,peter,tom都是一个类的实例化对象,共享这一个类的所有属性和方法。

根据原型共享,如果在一个实例对象上更改原型上的值,会直接影响到其他实例,所以一般不建议使用这种方式更改原型的值。

tom.\__proto\__.skill = function(){
alert('running');
}
tom.skill(); // running
peter.skill(); // running

因此最好不要通过实例去更改类的值

this的指向 (不懂)

类的方法内部如果含有this,它默认指向类的实例,如果单独提取该方法调用this会报错

class Print{
printName(name){
this.print(name);
}
print(text){
alert(text);
}
}
var hello = new Print();
var {printName} = hello; //对象的解构,printName == hello.printName,为何找不到this的指向?
printName('peter'); // Cannot read property 'print' of undefined

解决办法:

1 在constructor方法中绑定this。

  constructor(){
this.printName = this.printName.bind(this);
}

2 使用箭头函数。

printName(name)=>{this.print(name)};

3 使用proxy(待学习)

私有属性和私有方法

所谓的私有方法和私有属性,只能在类中供其他方法使用。 有两种方式可以声明私有方法和私有属性

1 将要调用的方法放到类的外部,在类的内部,通过call,apply进行调用。

class Print{
printName(name){
print.call(this,name);
}
}
function print(text){alert(text)}
var hello = new Print();
hello.printName('peter'); // peter

这种方式是把私有方法放到外部,不能被调用,这意思是说的在类的内部是访问不到print方法的。

2 使用sybmol类型。

var print = Symbol('print');
class Print{
printName(name){
this[print](name);
}
[print] (text){
alert(text);
}
}
var hello = new Print();
hello.printName('peter'); // peter

symbol类型保证了是独一无二的,导致第三方获取不到,达到了私有的效果。

class的取值函数和存值函数

与 ES5 一样,在“类”的内部可以使用get和set关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。

class Person{
constructor(){ }
get height(){
return this._height
}
set height(value){
this._height = value
}
}
var peter = new Person();
peter.height = 12344; // 设置身高
console.log(perter.height) // 12344

当一个属性只有get没有set的时候,我们是无法进行赋值操作的,第一次初始化也不行。 如果把变量定义为私有的(定义在类的外面),就可以只使用get不使用set。

Class 的 Generator

在类的某个方法的前面加上星号,可以代表这是个generator函数。可以用generator的方式去运用这个方法。

class Person{
*sum(x,y,z){
yield x + y;
yield y + z;
yield x + y +z;
}
}
var a = new Person();
for(let i of a.sum(1,2,3)){
console.log(i);
} // 3 5 6
class的静态方法

类相当于实例的原型,所有在类中定义的方法,都会被实例继承。 如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。

class Person{
static print(text){
alert(text);
}
printName(name){
this.print(name);
}
}
Person.print('peter') // peter
var peter = new Person();
peter.print('peter'); // peter.print is not a function

上面的代码表示:可以直接在Person类上调用(Person.print('peter')),而不是在Person类的实例上调用。如果在实例上调用静态方法,会抛出一个错误,表示不存在该方法。

  如果静态方法包含this关键字,这个this指的是类,而不是实例。

  静态方法可以与非静态方法重名。(就是static的方法是一个,非static的方法是一个,两者无关联)。

  父类的静态方法,可以被子类继承。

new.target属性

new是从构造函数生成实例对象的命令 ES6 为new命令引入了一个new.target属性,该属性一般用在构造函数之中,返回new命令作用于的那个构造函数。如果构造函数不是通过new命令调用的,new.target会返回undefined,因此这个属性可以用来确定构造函数是怎么调用的。

function Person(name) {
if (new.target === Person) {
this.name = name;
} else {
throw new Error('必须使用 new 命令生成实例');
}
}
var peter = new Person('peter');
var notAPerson = Person.call(peter, 'peter'); // 报错 必须使用 new 命令生成实例

Class 内部调用new.target,返回当前 Class。

子类继承父类时,new.target会返回子类。

用处:可以写出不能独立使用、必须继承后才能使用的类。

继承

因篇幅过长,放到下一篇文章es6学习笔记-class之继承

es6学习笔记-class之一概念的更多相关文章

  1. ES6学习笔记<三> 生成器函数与yield

    为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...

  2. ES6学习笔记之块级作用域

    ES6学习笔记:块级作用域 作用域分类 全局作用域 局部作用域 块级作用域 全局作用域示例 var i=2; for (var i = 0; i < 10; i++) { } console.l ...

  3. ES6学习笔记&lt;五&gt; Module的操作——import、export、as

    import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...

  4. ES6学习笔记&lt;四&gt; default、rest、Multi-line Strings

    default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...

  5. ES6学习笔记&lt;二&gt;arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  6. ES6学习笔记&lt;一&gt; let const class extends super

    学习参考地址1  学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...

  7. JavaScript:学习笔记(2)——基本概念与数据类型

    JavaScript:学习笔记(2)——基本概念与数据类型 语法 1.区分大小写.Test 和 test 是完全不同的两个变量. 2.语句最好以分号结束,也就是说不以分号结束也可以. 变量 1.JS的 ...

  8. ES6学习笔记之变量的解构赋值

    变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...

  9. ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能

    前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...

随机推荐

  1. C标准I/O库函数与Unbuffered I/O函数

    一.C标准I/O库函数.Unbuffered I/O函数 1. C标准I/O库函数是如何用系统调用的 fopen(3) 调用open(2)打开制定的文件,返回一个文件描述符(一个int类型的编号),分 ...

  2. zoj2589Circles(平面图的欧拉定理)

    链接 连通图中: 设一个平面图形的顶点数为n,划分区域数为r,一笔画笔数为也就是边数m,则有: n+r-m=2 那么不算外面的那个大区域的话 就可以写为 n+r-m = 1 那么这个题就可以依次求出每 ...

  3. Codeforces 588E. A Simple Task (线段树+计数排序思想)

    题目链接:http://codeforces.com/contest/558/problem/E 题意:有一串字符串,有两个操作:1操作是将l到r的字符串升序排序,0操作是降序排序. 题解:建立26棵 ...

  4. C++ multimap容器访问同一键值元素的不同方法

    multimap是一种多元map容器,允许一个键对应多个值. 本文介绍了 multimap访问同一键值元素的三种不同方法,详细看下面代码: typedef multimap<string,int ...

  5. Flex上传文件报“Error #2038”

    1.错误描述 ioerror: [IOErrorEvent type="ioError" bubbles=false cancelable=false eventPhase=2 t ...

  6. 委托的多线程方法BeginInvoke

    同步方法和异步方法: 同步方法调用在程序继续执行之前需要等待同步方法执行完毕返回结果.(比如烧水泡茶,需要等水烧开了才能继续泡茶) 异步方法则在被调用之后立即返回以便程序在被调用方法完成其任务的同时执 ...

  7. ArcGIS坐标系转换出错:Error 999999执行函数出错 invalid extent for output coordinate system

    本文主要介绍在用ArcGIS做坐标系转换过程中可能会遇到的一个问题,并分析其原因和解决方案. 如下图,对一份数据做坐标系转换: 过了一会儿,转换失败了.错误消息如下: “消息”中提示,“执行函数出错 ...

  8. PAT Basic 1007

    1007 素数对猜想 (20 分) 让我们定义d​n​​为:d​n​​=p​n+1​​−p​n​​,其中p​i​​是第i个素数.显然有d​1​​=1,且对于n>1有d​n​​是偶数.“素数对猜想 ...

  9. 【H5动画】谈谈canvas动画的闪烁问题

    一般来说,在H5开发中,使用canvas往往只是为了展示一些简单的图表或者简单短小的动画,很少考虑到有闪烁的问题. 最近,在手机QQ魔法表情的项目中,就遇到了奇葩的闪烁问题. 这里说的闪烁,是指动画刚 ...

  10. sendmail 发送邮件 zabbix 自定义报警

    配合zabbix 触发脚本 达到自定义报警目的 #!/bin/bash # Created : 2015.12.08 # Updated : 2015.12.08 # Author : sanmuya ...