ECMAScript6入门--Class对象
面向对象的语言有一个标志,那就是他们都有类的概念,通过类可以创建任意多个具有相同属性和方法的对象。
ECMAScript5中没有类的概念,因此它的对象和基于类的语言中的对象有所不同。
Javascript生成对象的传统方法是通过构造函数来实现的
function Person(name, age){this.name = name;this.age = age;this.sayHello = function(){return "Hello "+ this.name;}
}var person = new Person("dahan",18);
person.sayHello();
//Hello dahan
上述这种方式因为和Javascript中声明方法的形式一样,所以对象和方法的区分并不明显,很容易造成混淆。
ES6引入了Class
(类)的概念,我们通过ES6的语法进行创建对象的时候,可以像Java语法一样,使用关键字class
,用来定义类。当然,这种语法的功能,通过ES5也都可以实现,它只是让类的定义更加清晰,更容易理解。
//类的定义
class Person {//ES6中新型构造器constructor(name) {this.name = name;}//实例方法sayName() {console.log("我的名字叫"+ this.name);}
}
//类的继承
class Programmer extends Person {constructor(name) {//直接调用父类构造器进行初始化super(name);}program() {cosnole.log("这是我的地盘");}
}
//运行测试
var person = new Person('lingxiao');
var coder = new Programmer('coder');person.sayName();
//我的名字叫lingxiao
coder.sayName();
//我的名字叫coder
coder.program();
//这是我的地盘
下面来注意讲述一下上述代码中出现的语法。
constructor
constructor
是类的默认方法,就像Java中的main方法一样,每个类都必须有constructor
方法。
在通过new
实例化对象的时候,就会自动调用constructor
方法,得到的也就是constructor
返回的值。constructor
默认返回当前类的实例对象(this)
,但是我们也可以指定另外一个对象,当然,这样就会导致实例化出来的对象,并不是当前类的实例。
class Person {constructor(){var ob = new Object();return Ob;}sayHello(){return "Hello World"}
}
var person = new Person();
person.sayHello();
//Uncaught TypeError: person.sayHello is not a function
我们在实例化对象的时候,ES6规定我使用new
关键字,如果直接调用,会当成函数来调用。
class Person {constructor(name){this.name = name;}
};
var person = Person("dahan");
//Uncaught TypeError: Class constructor Person4 cannot be invoked without 'new'
this
在最开始的代码中,我们看到了this,this在类中指向的就是实例本身,但是如果我们在类的方法中使用了this,单独调用此方法的时候,就会出现错误。
class Person{constructor(name){this.name = name;}sayHello() {return "Hello "+this.name}
}
var person = new Person("dahan");
var sayHello = person.sayHello;
sayHello();
//Uncaught TypeError: Cannot read property 'name' of undefined
针对这个我们可以很简单的在构造方法中绑定this
class Person{constructor(name){this.name = name;this.sayHello = this.sayHello.call(this);}sayHello() {return "Hello "+this.name}
}
继承extend
我们想要在一个类上扩展一些属性,但又不想修改原类,就用到了继承。
//类的继承
class Programmer extends Person {constructor(name,age) {this.age = age;//报错//直接调用父类构造器进行初始化super(name);}program() {cosnole.log("这是我的地盘");}
}
使用继承的时候,需要用super
关键字来调用父类,super(name)
就呆逼啊调用父类的constructor
方法。
另外,我们使用的继承的时候,super
关键字也帮我们改变了this
的指向,所以我们必须要先调用super
方法,然后才能使用this
。ES6要求,子类的构造函数必须执行一次super
函数,否则就会报错。
最后
class
关键字的出现,也让Javascript看上去更加像一个面向对象语言,愿Javascript越变越好越易用。
ECMAScript6入门--Class对象相关推荐
- ECMAScript6入门教程(二)
ECMAScript入门教程(一) 2.11 生成器 生成器函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同 function * gen(){yield '一只没有耳朵';yi ...
- ECMAScript6入门教程(一)
1.什么是ECMA 1.1 什么是ECMA ECMA(European Computer Manufacturers Association)中文名称为欧洲计算机制造商协会,这个组织的目标是评估.开发 ...
- JavaScript入门(part11)--对象
学习笔记,仅供参考,有错必纠 参考自:pink老师教案 文章目录 JavaScript入门 对象 创建对象的三种方式 利用字面量创建对象 利用 new Object 创建对象 利用构造函数创建对象 n ...
- ES6入门之对象的扩展
1. 属性的简洁表示法 在ES6中 允许直接写入变量和函数,作为对象的属性和方法,使得代码的书写更为简洁. const f = 'a' const b = {f} b // {f: 'a'}等同于 c ...
- Pandas包(一):Pandas入门与对象的创建查看
Pandas 概览 Pandas 是 Python 的核心数据分析支持库,提供了快速.灵活.明确的数据结构,旨在简单.直观地处理关系型.标记型数据 注:Pandas适合处理结构化数据,即适合处理的维度 ...
- ES6入门之对象扩展
ES5对象(超类)原有: 属性:construct构造函数 方法: object.hasOwnProperty( propertyName ) //检测是否有一个本地的属性而不是继承的,返回boole ...
- ECMAScript6入门简介篇
ECMAScript 6 ECMAScript 6(简称ES6)是于2015年6月正式发布的JavaScript语言的标准,正式名为ECMAScript 2015(ES2015).它的目标是使得Jav ...
- Java基础入门笔记-对象的销毁
在Java语言,程序员只管创建对象,不管销毁对象.对象的销毁由系统自动完成. Student stu=new Student(); 当对象不再被使用时,由垃圾回收机制GC自动回收.(GC:Garbag ...
- Java基础入门笔记-对象与引用
代码如下: package my;public class HelloWorld {public static void main(String[] args){ int[] a= {1,1,1,1, ...
最新文章
- XAF 官方问题笔记
- python中单引号,双引号,多引号区别
- Oracle入门(一)之入门级知识详解
- 二次扩增产物条带弥散_PCR实验操作常见解决方法
- gitlab去掉邮箱验证功能
- 年会尽头是闲鱼!超11万人在闲鱼转卖年会奖品
- Java常用的几个Json库
- ACL在QinQ port 中的应用
- 即席查询—— Kylin使用
- 比对软件Blast,Blast+,Diamond如何选
- [POI2008]Mirror Trap
- 计算机跳转到用户选择,win7系统开机要选择用户才能进入系统怎么办
- Apache Flink 1.14.4 on yarn ha环境搭建
- Latex提取与合并pdf文档(超实用)
- java pos打印机_Java实现POS打印机自定义无驱打印
- MATLAB画带延时系统的伯德图
- SpringBoot整合knif4j Api文档
- java 线程间变量共享_多线程:(五)多个线程之间共享数据
- less和more的区别
- 计算机窗口移动不了怎么办,电脑鼠标拖不动文件怎么办 电脑鼠标拖动不灵敏如何解决...
热门文章
- 程序员正在消失!90%的人都不知道,写不出好代码,是输在了这点上!
- 01背包和完全背包问题
- Docker 学习6 Docker存储卷
- Selenium八种基本定位方式---基于python
- PHP和js判断访问设备是否是微信浏览器实例
- 点击按钮的时候,切换搜索框的显示与隐藏(动画)
- Spring 源码分析(四) ——MVC(一)Web 基础
- MySQL登陆时加-U选项
- 使用Hexo在Github搭建静态博客
- [通用技术]在不同语言中用协程实现全排列算法(C++/Lua/Python/C#)