详解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 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
javascript中可能用得到的全部的排序算法
Mar 05 Javascript
JavaScript基于用户照片姓名生成海报
May 29 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
利用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
php解析json数据实例
2014/08/19 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
jquery ajax例子返回值详解
2012/09/11 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
Swiper实现导航栏滚动效果
2020/10/16 Javascript
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
Python面向对象多态实现原理及代码实例
2020/09/16 Python
python各种excel写入方式的速度对比
2020/11/10 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
教导处工作制度
2014/01/18 职场文书
社区庆八一活动方案
2014/02/02 职场文书
保密普查工作实施方案
2014/02/25 职场文书
大学军训感言200字
2014/02/26 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
务虚会发言材料
2014/12/25 职场文书
保洁员岗位职责
2015/02/04 职场文书
2015年工商所工作总结
2015/05/21 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
MySQL 数据 data 基本操作
2022/05/04 MySQL