详解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 相关文章推荐
Jquery中显示隐藏的实现代码分析
Jul 26 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
初识Node.js
Sep 03 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
jquery validate demo 基础
Oct 29 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 Javascript
js微信分享实现代码
Oct 11 Javascript
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
react-native使用leanclound消息推送的方法
Aug 06 Javascript
javascript实现点亮灯泡特效示例
Oct 15 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
详解:――如何将图片储存在数据库里
2006/12/05 PHP
PHP防注入安全代码
2008/04/09 PHP
php xml文件操作实现代码(二)
2009/03/20 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
uni-app实现点赞评论功能
2019/11/25 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
详细探究Python中的字典容器
2015/04/14 Python
python检查指定文件是否存在的方法
2015/07/06 Python
详解Python的Django框架中的模版继承
2015/07/16 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
SQL SERVER面试资料
2013/03/30 面试题
总经理工作职责范文
2014/03/14 职场文书
民政局个人整改措施
2014/09/24 职场文书
工作检讨书怎么写
2015/01/23 职场文书
文案策划岗位职责
2015/02/11 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
2015年初中教师个人工作总结
2015/07/21 职场文书
关于Python中进度条的六个实用技巧分享
2022/04/05 Python