详解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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
JavaScript 变量作用域分析
Jul 04 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
ExtJS自定义主题(theme)样式详解
Nov 18 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
详解VUE 定义全局变量的几种实现方式
Jun 01 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 Javascript
Vue3.x源码调试的实现方法
Oct 13 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
js刷新页面location.reload()用法详解
Dec 09 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
PHP中Session的概念
2006/10/09 PHP
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
Python设计模式之观察者模式实例
2014/04/26 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
PyTorch中permute的用法详解
2019/12/30 Python
Python如何读写CSV文件
2020/08/13 Python
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
20年同学聚会感言
2014/02/03 职场文书
运动会入场解说词
2014/02/07 职场文书
毕业生就业意向书
2014/04/01 职场文书
活动倡议书范文
2014/05/13 职场文书
12岁生日演讲稿
2014/05/14 职场文书
面试必备的求职信
2014/05/25 职场文书
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
大明湖导游词
2015/02/03 职场文书
公司放假通知怎么写
2015/04/15 职场文书
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python
Redis实现短信验证码登录的示例代码
2022/06/14 Redis