详解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 相关文章推荐
让插入到 innerHTML 中的 script 跑起来的实现代码
Jul 01 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
javascript html5移动端轻松实现文件上传
Mar 27 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 Javascript
javascript实现倒计时提示框
Mar 02 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
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
javascript 闭包详解
2015/07/02 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
用JS实现选项卡
2020/03/23 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
requests和lxml实现爬虫的方法
2017/06/11 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
简单了解django orm中介模型
2019/07/30 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
德国高性价比网上药店:medpex
2017/07/09 全球购物
创建索引时需要注意的事项
2013/05/13 面试题
高分子材料与工程专业推荐信
2013/12/01 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
Python实现生成bmp图像的方法
2021/06/13 Python
详解nginx进程锁的实现
2021/06/14 Servers
vue项目支付功能代码详解
2022/02/18 Vue.js