ECMA6--面向对象

Posted lingxiangli

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ECMA6--面向对象相关的知识,希望对你有一定的参考价值。

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

  • 继承
  • 封装
  • 多态

    编程语言的发展史:

  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里加方法

面向对象

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

  • 继承
    站在巨人的基础上

以上是关于ECMA6--面向对象的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段9——JS中的面向对象编程

ECMA6--目录

react-router中的ECMA6传播参数

通过ECMA6的模块化,纯前端实现类似jsp:include的功能

面向面试编程代码片段之GC

PHP面向对象之选择工厂和更新工厂