ECMA6--面向对象

Posted 2021-02-02 lingxiangli

面向对象是一种思维：由实际数据映射到程序中

• 继承
• 封装

• 多态

  编程语言的发展史：

1. 汇编： 0 1 二进制，纸带打印，移植性差，难懂
2. C语言（之前有A语言，B语言过时）

3. C++(写起来也很难) java / object-c / javascript 统称为高级开发语言

   编程思维： 从面向过程编程思维--->面向对象编程思维（高级开发语言）

   什么是面向过程、面向对象？

   1、面相过程的编程思维：只关心数学逻辑
   2、根据实际，创建对应的对象 ：车 路：
   将生活逻辑直接映射到程序中。

   【面向过程】

var  hour = 1000 /60;
alert（"所用小时是：" + hour）;

【面向对象】

var car = {
      speed:60,
        run:function(road){
                return road.length / this.speed;
        }
    }

语法

• 面向对象实现语法：类 和 对象
  
• 类：具有一类相同特征的事物的抽象概念。

• 对象：具体的实例，唯一的。

  object 面向对象

1. 原料
2. 加工
3. 出厂

• 【注】一般情况下创建对象的方法叫做工厂方法（工厂函数）
• 在js中没有类：构造函数相当于其他语言中的类元素。

• 如果我们在调用函数的时候，前面加了一个==new==元运算符，那么构造函数中的==this指向新创建的对象==，并自动完成原料和出厂操作；

  凡是new运算符调用的函数都叫做：构造函数，为了区分构造函数，构造函数的首字母大写。

  【案例】

function CreatePerson(name,sex){
    //1.原料
    // var obj1 = new Object();
    // this = new Object();
    //2.加工
    this.name = name;
    this.sex = sex;
    this.showName = function(){
        alert("I,m" + this.name);
    }
    this.showSex = function(){
        alert("I,s" + this.sex + "的");
    }
    //3.出厂
    //return obj1;
    //return this;
}

如何将面向过程转变为面向对象需要的条件：

1. 不能有嵌套函数
2. 可以有全局变量

• window.onload -> 构造函数
• 全局变量 -> 构造函数的属性
• 函数 -> 构造函数方法
• 【Dome1】

对比

ES5 问题

• 类 和 构造函数 不分
• 太过于分散

function Uese(name,pass) {
    this.name = name;
    this.pass = pass;
}

Uese.prototype.showName = function() {
    alert(this.name)
}
Uese.prototype.showPass = function(){
    alert(this.pass)
}
var ul = new Uese('blue','123')

ul.showName()
ul.showPass()

ECM6

    //  声明一个类
class User{
    // 构造器
    constructor(name,pass){
        this.name = name;
        this.pass = pass;
    }
    // showName: function(){}   不能这样写，JSON写法
    //class 写法固定写法
    showName(){
        alert(this.name)
    }
    showPass(){
        alert(this.pass)
    }
}

var a = new User('a','123')
a.showName()
a.showPass()

1. 多了一个class关键字
2. 多了一个专门的构造器、构造器和类分离了
3. 更加简洁，在class里加方法

面向对象

面向对象最重要的是什么？

• 继承
  站在巨人的基础上