ES6面向对象的浅理解。

网上一些es6资源还是很多的在对于es6面向这块比较少,所以新人在学习的时候做了一些总结。

因本人并不资深也能看懂,直接贴代码。

class Person{
    //为对象添加属性
    constructor(name=‘default‘,age=0){ //给参数传默认值,防止调用时忘记传实参而报错
        this.name=name;
        this.age=age;
    }
    //为对象添加方法
    showName(){
        alert(this.name);
    }
    showAge(){
        alert(this.age);
    }
    sayAll(){
        alert(`My name is ${this.name}
My age is ${this.age}
My job is ${this.job}`)
    }
}

//继承
class SomeBody extends Person{ //这里即可实现子类的继承
    //继承之后,添加子类特有的属性
    constructor(name,age,job){
        super(name,age); //使用super()将父类的属性继承过来,同时添加子类自己的新属性。
                                         //如果不加,这个constructor将会把从父类继承的constructor中的属性和方法覆盖,从而使子类没有继承name,age属性,而报错
        this.job=job;
    }
    //继承之后,添加子类特有的方法
    showJob(){
        alert(this.job);
    }
}

const person1 =new Person(‘JavaScript‘,20,‘Programer‘);
person1.showName(); //JavaScript
person1.showAge();  //20
person1.sayAll();        //虽然sayAll方法中有提到 this.job。 但是构造函数Person参数只有name和age,也未定义job所以会弹出“My job is undefined”。
const person2=new SomeBody(‘Milo‘,18,‘monkey‘);
person2.showName(); //Milo
person2.showAge();    //32
person2.showJob();    //monkey
person2.sayAll();   //相当于sayAll方法写入 子类 SomeBody 中  所以 this.job 不会undefined

相对于es5的面向对象,es6更易理解,刚刚接触js的同学们的福音呢。

最后欢迎大神的评论,以及发表一些指点和看法。

时间: 2024-10-20 22:05:33

ES6面向对象的浅理解。的相关文章

ES6之let(理解闭包)和const命令

ES6之let(理解闭包)和const命令 最近做项目的过程中,使用到了ES6,因为之前很少接触,所以使用起来还不够熟悉.因此购买了阮一峰老师的ES6标准入门,在此感谢阮一峰老师的著作. 我们知道,ECMAScript 6即ES6是ECMAScript的第五个版本,因为在2015年6月正式发布,所以又成为ECMAScript2015.ES6的主要目的是为了是JS用于编写复杂的大型应用程序,成为企业级的开发语言. 说明:由于有时候我们希望得知es6代码的具体实现原理或者说希望能够转化为es5使用,

面向过程和面向对象的本质理解

http://kiritor.blog.51cto.com/7400479/1226762/ 面向过程和面向对象的本质理解 面向过程就是分析出解决问题所需的步骤,面向对象则是把构成问题的事物分解成对象,抽象 出对象的目的并不在于完成某个步骤,而是描述其再整个解决问题的步骤中的行为. 面向过程的思维方式是分析综合,面向对象的思维方式是构造. 例如c语言解决问题时,一般是先定义数据结构,然后在构造算法.而是用Java面向对象求解时 则是先抽象出对象,构造一个"封闭"的环境,这个环境中有定义

jQuery闭包之浅见,从面向对象角度来理解

本篇的标题虽然是"jQuery闭包之浅见...",但实际上本篇涉及的多半是javascript"闭包"相关内容,这所以写这个标题,完全是因为自己平常用jQuery写前端习惯了.还有一个原因是:javascript"闭包"很容易造成"内存泄漏", 而jQuery已经自动为我们规避.处理了由"闭包"引发的"内存泄漏". javascript的"闭包"是这样定义的:一个拥有

03.JavaScript 面向对象精要--理解对象

JavaScript 面向对象精要--理解对象 尽管JavaScript里有大量内建引用类型,很可能你还是会频繁的创建自己的对象.JavaScript中的对象是动态的. 一.定义属性 当一个属性第1次被添加给对象时JavaScript在对上上调用了一个名为 [[Put]]的内部方法,该方法会在对象上创建一个新节点保存属性,就像 哈希表上第一次添加一个键一样这个操作不仅指定了初始值 也定义了属性的一些特征 1.1 [[Put]]内部方法 [[Put]]在对象上创建一个自有属性 1.2 [[Set]

ES6 面向对象 promise

1. 变量/赋值 var 可以重复定义.不能限制修改.没有块级作用域 let 不能重复定义, 变量,块级作用域 const 不能重复定义, 常量,块级作用域 结构赋值 数组解构赋值 对象解构赋值 2. 函数 箭头函数 function(参数,参数){ // 函数体 } (参数, 参数)=>{ // 函数体 } let arr=[12,5,88,34,32,19]; /*arr.sort(function (n1, n2){ return n1-n2; });*/ arr.sort((n1, n2

基于jquery的ES6面向对象选项卡

ES5中的面向对象相信大家都非常熟悉,包括一系列的配置参数,方法,自定义事件等,现在简单介绍一下es6面向对象的一些知识还有一个基于jquery的es6面向对象选项卡的写法. ES6中提供了基于类class的面向对象语法.但class实际上是ES6提供的一颗语法糖,JavaScript是一门基于原型的面向对象语言. // 父类 class Test { // 构造器 constructor (arg1, arg2) { this.arg1 = arg1; this.arg2 = arg2; }

ES6 面向对象编程思想

ES6 面向对象概念 /* 小明去餐厅吃饭: 面向过程:小明走去餐厅看菜单点餐吃饭; 面向对象: 对象:1.小明.2.餐厅 特征属性行为:1.小明(走.看.点餐.吃); 2.餐厅(菜单) 研究对象之间的关系: 小明.走餐厅.菜单 小明.看 小明.点餐 小明.吃 两种思维方式不一样,但是达到的结果都是一样的 */ 原文地址:https://www.cnblogs.com/Afanadmin/p/12355376.html

ES6 面向对象

类的写法 { // ES6面向对象: // 类的写法: class Person{//typeof function类型 age = 20;//属性也可以这样写 -> 这是公有属性,外内都可以调用; #hei = "178cm";//私有属性 constructor(name){//-> function Person(name){} this.name = name; } fn(){// -> Person.prototype.fn = function(){} c

浅谈结构化方法和面向对象方法的理解

人对于世界的认识是不断的在深化的,人对于世界的改造方式也是在不断的改变的,在程序的世界里,并没有一种绝对的对,或者错,也没有绝对的好或者是坏,只要能解决一个问题,那这个方法就是可行的,就是好的,所谓结构化方法,又或者是面向对象的方法,都是人们在对世界的客观理解变化之后,所采取的一些反应,都是对这个社会的不同角度的理解,又或者说是对于解决问题从不同的角度提出来的一些解决办法,并没有根本上的对错之分,也不会说某种方法从此不会再有用武之地,退出历史舞台. 通过从概念上,本质上我们来对比面向对象方法和结