类和对象
对象:万物皆对象,对象是一个具体的事物,看得见摸得着的实物
对象是由属性和方法组成的:
    • 属性:事物的特征,再对象中用属性来表示(常用名词)
    • 方法:事物的行为,再对象中用方法来表示(常用动词)
类:抽象了对象的公共部分,它泛指某一大类(class)
对象特指某一个,通过类实例化一个具体的对象

创建类:
语法:
class name{
//class body } 
创建实例:
var xx=new name();
注意:类必须使用new实例化对象
 
类constructor构造函数
    constructor() 方法是类的构造函数(默认方法),用于传递参数,返回实例对象,通过new命令生成对象实例时,自动调用该方法。如果没有显示定义,类内部会自动给我们创建一个constructor()
 
注意:
  1. 通过class关键字创建类,类名我们还是习惯性定义首字母大写
  2. 类里面有个constructor函数,可以接受传递过来的参数,同时返回实例对象
  3. constructor函数,只要new生成实例时,就会自动调用这个函数,如果我们不写这个函数,类也会自动生成这个函数
  4. 生成实例new不能省略
  5. 最后注意语法规范,创建类  类名后面不要加小括号,生成实例 类名后面加小括号,构造函数不需要加function
类添加方法
语法:
class Person{
constructor(name,age){//constructor构造器或者构造函数
this.name=name;
this.age=age;
}
say(){
console.log(this.name+"你好");
}
}

  

<script>
//创建类
class Star {
constructor(name, age) {
this.name = name;
this.age = age;
}
sing(song) {
console.log(this.name + song );
}
}
//利用类创建对象 new
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 20);
console.log(ldh);
console.log(zxy);
//我们类里面所有的函数不需要写function
// 多个函数方法之间不需要添加逗号分隔
ldh.sing('冰雨');
</script>

  

继承
    程序中的继承:子类可以继承父类的一些属性和方法
语法:
class Father{
//父类
}
class Son extends Father{
//子类继承父类
}
<script>
// 类的继承
class Father {
constructor() { }
money() {
console.log(100);
}
}
class Son extends Father { }
var son = new Son();
son.money();
</script>

  

super关键字
    super关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数,也可以调用父类的普通函数

   // 调用父类的构造函数
class Father {
constructor(x, y) {
this.x = x;
this.y = y;
}
sum() {
console.log(this.x + this.y);
}
}
class Son extends Father {
constructor(x, y) {
super(x, y);//调用了父类中的构造函数
}
}
var son = new Son(1, 2);
son.sum();

  

   //调用父类的普通函数
class Father { say() {
return '我是爸爸';
}
}
class Son extends Father { say() {
// console.log('我是儿子');
console.log(super.say() + '的儿子');
// super.say() 就是调用父类中的普通函数
}
}
var son = new Son();
son.say(); // 继承中的属性或者方法查找原则:就近原则
// 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
// 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类这个方法(就近原则)

  

 

  //子类继承父类方法同时扩展自己方法
class Father {
constructor(x, y) {
this.x = x;
this.y = y;
}
sum() {
console.log(this.x + this.y);
}
}
// 子类继承父类方法,同时扩展减法方法
class Son extends Father {
constructor(x, y) {
//利用super调用父类中的构造函数
// super必须在子类this之前调用
super(x, y);
this.x = x;
this.y = y; }
subtract() {
console.log(this.x - this.y);
}
}
var son = new Son(5, 3);
son.subtract();
son.sum();

  

注意:子类构造函数中使用super,必须放到this前面(必须先调用构造方法,再使用子类构造方法)
 
三个注意点
  1. 在ES6中,类没有变量提升,所以必须先定义类,才能通过类实例化对象
  2. 类里面的共有属性和方法一定要加this使用
  3. 类里面的this指向问题
  4. constructor里面的this指向实例对象,方法里面的this指向这个方法的调用者
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

JavaScript进阶面向对象ES6的更多相关文章

  1. Javascript 进阶 面向对象编程 继承的一个样例

    Javascript的难点就是面向对象编程,上一篇介绍了Javascript的两种继承方式:Javascript 进阶 继承.这篇使用一个样例来展示js怎样面向对象编程.以及怎样基于类实现继承. 1. ...

  2. Javascript 进阶 面向对象编程 继承的一个例子

    Javascript的难点就是面向对象编程,上一篇介绍了Javascript的两种继承方式:Javascript 进阶 继承,这篇使用一个例子来展示js如何面向对象编程,以及如何基于类实现继承. 1. ...

  3. javascript进阶——面向对象特性

    面向对象的javascript是这门语言被设计出来时就考虑的问题,熟悉OOP编程的概念后,学习不同的语言都会发现不同语言的实现是不同的,javascript的面向对象特性与其他具有面向对象特性的语言的 ...

  4. JavaScript进阶之路(一)初学者的开始

    一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...

  5. JavaScript进阶(十一)JsJava2.0版本

    JavaScript进阶(十一)JsJava2.0版本 2007年9月11日,JsJava团队发布了JsJava2.0版本,该版本不仅增加了许多新的类库,而且参照J2SE1.4,大量使用了类的继承和实 ...

  6. JavaScript的面向对象原理之原型链详解

    一.引言 在16年的10月份,在校内双选会找前端实习的时候,hr问了一个问题:JavaScript的面向对象理解吗?我张口就说“JavaScript是基于原型的!”.然后就没什么好说的了,hr可能不知 ...

  7. JavaScript进阶之路 初学者的开始

    一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...

  8. javascript进阶课程--第二章--对象

    javascript进阶课程--第二章--对象 学习要点 理解面向对象的概念 掌握对象的创建方法 掌握继承的概念和实现方法 基本概念 对象究竟是什么?什么叫面向对象编程? 对象是从我们现实生活中抽象出 ...

  9. javascript进阶教程第二章对象案例实战

    javascript进阶教程第二章对象案例实战 一.学习任务 通过几个案例练习回顾学过的知识 通过案例练习补充几个之前没有见到或者虽然讲过单是讲的不仔细的知识点. 二.具体实例 温馨提示 面向对象的知 ...

  10. JavaScript的面向对象编程(OOP)(一)——类

    在学习JavaScript面向对象的编程之前,需要知道,并了解面向对象的一些基本的常识.初学者中大多数都以为面向对象中,面向对象的编程是很重要和占据很大一部分精力.笔者在之前也是认为OOP是面向对象的 ...

随机推荐

  1. linux 下调试 汇编

    gcc: -c 编译后汇编,不连接 -S 编译后停止,不进行汇编 -o 编译,汇编,连接 -g 生成调试信息 -gstabs 标识符 main gdb break *标识符 :设置断点 info re ...

  2. 【JAVA、C++】LeetCode 005 Longest Palindromic Substring

    Given a string S, find the longest palindromic substring in S. You may assume that the maximum lengt ...

  3. 二项分布 多项分布 伽马函数 Beta分布

    http://blog.csdn.net/shuimu12345678/article/details/30773929 0-1分布: 在一次试验中,要么为0要么为1的分布,叫0-1分布. 二项分布: ...

  4. 使用API在DigitalOcean上创建VPS

    1.生成Personal Access Token(API-Token) 密钥类似如下格式: 81d58e36224b63fc2gedac14342d0cfb16vf5451c798b2a38f976 ...

  5. phantomjs初入门

    对DOM操作,而调试过程必不可少,对于那些微乎其微的方法,总显得余力不足.在这里PhantomJS就就行了很好的实现. PhantomJS是一个拥有JavaScript API的无界面WebKit 正 ...

  6. jsp小商城

    一个小商城,当然,没淘宝那么厉害,只是那时学完j2ee后,发现java原来也可以做网站,学了数据库,servlet,jsp,当时是很惊喜的,可以直接做个这样的东西.而放到今天,学了更多之后,发现可以用 ...

  7. 我是如何给discuz模板做语法高亮的

    本人一直做ASP.NET开发,近期接到任务要用Discuz开发一个社区,第一次接触PHP,PHP灵活的语法,天生的模块化,各种语法糖深深的震惊了我,我从内心深处感受到了PHP是最牛逼的语言!!! 好了 ...

  8. anujs1.4.0发布

    经过三个月的埋头苦干,终于完成Fiber版的anujs. 主要特性有: 测试全部改成jest, 迁移官方测试用例.有许多迷你React吹得怎么天花乱坠,但是生命周期钩子的执行顺序无法与官方保持一致,那 ...

  9. xmapp上搭建dvwa

    1. XMapp下载好,安装于C:盘下 2. 根据readme中的揭开,首先执行setup_xmapp. 3. 单击xampp_start, 不报错则继续 4. 在browser中访问localhos ...

  10. 技本功丨利用 Atomic 构建 React 项目工作流,so easy!

    近日刷微博,#2018年结婚率创新低#荣登热门话题NO.1,沪浙最不积极. 生活压力越大,缺爱的人也越来越多...据本萌的不完全观察,程序猿虽然是压力加成的职业,在袋鼠云还是有不少早早脱了单.至于,脱 ...