详解ECMAScript6入门--Class对象


Posted in Javascript onApril 27, 2017

面向对象的语言有一个标志,那就是他们都有类的概念,通过类可以创建任意多个具有相同属性和方法的对象。

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越变越好越易用。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过JS 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
Javascript 两个窗体之间传值实现代码
Sep 25 Javascript
JQuery的Alert消息框插件使用介绍
Oct 09 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
javascript处理表单示例(javascript提交表单)
Apr 28 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
JS不要再到处使用绝对等于运算符了
Apr 30 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 #Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 #Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 #Javascript
微信小程序 request接口的封装实例代码
Apr 26 #Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 #Javascript
微信小程序 flex实现导航实例详解
Apr 26 #Javascript
微信扫码支付零云插件版实例详解
Apr 26 #Javascript
You might like
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
javascript IFrame 强制刷新代码
2009/07/23 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
详解Vue Elememt-UI构建管理后台
2018/02/27 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
python 切片和range()用法说明
2013/03/24 Python
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
Python中itertools模块用法详解
2014/09/25 Python
利用Python演示数型数据结构的教程
2015/04/03 Python
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
接受捐赠答谢词
2014/01/27 职场文书
出生医学证明书
2014/09/15 职场文书
第一节英语课开场白
2015/06/01 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android