晓舟报告学习笔记——ES5和ES6面向对象知识点

面向对象

类：类型、模板、统称（鱼类，猫类）

对象：是类的一个实例，会具体到某一个事物上（天上飞的那只鸟）

继承：狗类继承哺乳动物类，猫类也是哺乳动物类。

多态，接口之后进行补充。

旧语法（ES5 prototype)与新语法(ES6)

ES5面向对象的知识

解释：

ES6是ECMAScript（ECMA International定义的商标脚本语言规范）的第六版。它于2015年推出。所以ES6又叫ES2015.

ES5是ECMAScript（由ECMA International定义的商标脚本语言规范）的第五版。 它于2009年推出。

1 构造函数：用于创建对象的函数，模拟类

代码实现

 <script>
        //es5是没有类的概念的，通过构造函数来实现类
    //构造函数的函数名，首字母大写
    //构造函数是用来创建对象用的。
    function Dog(name,age){  //一类狗
        this.name = name;
        this.age = age;//this指的是指向的那个对象
    }
    var dog = new Dog("跳跳",5); 
    console.log(dog); //输出 {} at 面向对象.html:16
    console.log("-----");
    console.log("狗的名字"+dog.name); 
    </script> 

2 原型对象 prototype

通过构造函数模拟的类，通过构造函数的一个属性（prototype)可以保证由构造函数创建的对象都可以使用（prototype)添加的函数以及方法，可以被所有类的实例进行使用。

自己创建的构造函数的prototype的扩展

利用prototype扩展我们自己定义的构造函数

​    Dog.prototype.sayName = function(){

​      console.log(`我的名字是${this.name}`);

​    }

​    var dog = new Dog("跳跳",5); 

​    // console.log("狗的名字"+dog.name); 

​    dog.sayName(); //控制台输出：我的名字时跳跳



​    var bigDog = new Dog("二哈",5);

​    bigDog.sayName(); //控制台输出：我的名字是二哈

利用prototype扩展系统自带的构造函数

 //利用prototype扩展系统自带的构造函数，例如Array 这种方法比较常用

​    var arr = new Array(1,2,3);

​    // var arr=[1,2,3]; 两者的表示是一致的，因为都是数组对象



​    Array.prototype.sayLength = function(){

​      console.log(`我是一个数组，我的长度是${this.length}`);

​    }

​    arr.sayLength(); //一定是调用方法的形式，因为sayLength是function 所有一定要带括号。

​    //输出：我是一个数组，我的长度是3

3 原型链：实现继承（了解即可，ES2015之后有更好的继承方案）

 //子类可以调用父类

​      function Animal(name){

​        this.name = name;

​      }



​      Animal.prototype.sayName = function(){

​        console.log(`你好，我的名字是${this.name }`);

​      }



​      function Dog(name){

​        this.name = name;

​      }



​      Dog.prototype = new Animal();//子类的扩展直接等于父类，从而继承父类的所有可继承的方法

​      var dog = new Dog("花花"); //定义一个子类的实例

​      dog.sayName(); //此时调用父类的方法

​      //控制台输出：你好，我的名字是花花

​    </script>

ES2015（ES6)面向对象语法

1 支持class关键字

 //es6支持class 类的概念

​        class Dog{

​          //构造函数写里面

​          constructor(name,age){ //constructor顾名思义 构造，英语可以帮助理解以及助记

​            this.name = name;

​            this.age = age;

​         }

​          //对应方法也写里面

​          sayName(){

​            console.log(`我是${this.name}`);

​          }

​        }



​        //定义实例，并且调用类的方法

​        let dog = new Dog("花花",2); //输出：我是花花

​        dog.sayName();

继承（同java)

 class Animal{

​          constructor(name){

​            this.name = name;

​          }

​          sayName(){

​            console.log(`我是${this.name}`)

​          }

​        }

继承 同Java的语法

​

       class Dog extends Animal{

​          constructor(name,age){

​            super(name); //继承父类的，创建自己的构造函数

​            this.age = age; //自己添加的

​          }

​          sayAge(){

​            console.log(`狗的年龄${this.age}`)

​          }

​        }

定义类的实例

​        let dog = new Dog("花花",2); //此时可以使用自己的构造函数

​        dog.sayName(); //输出：我是花花

​        dog.sayAge(); //狗的年龄2

​        console.log("狗狗的年龄"+dog.age); //输出：狗狗的年龄2

当在子类中需要添加其他参数或者方法的时候，例如构造函数的重新塑造，就需要继承以及重写

总结

前端开发的过程中，大部分情况我们不需要去通过自定义类来完成任务，但是很多的时候我们会使用别人定义的类（例如第三方库或者框架）

作业：扩展Date的原型

    Date.prototype.dateFormat = function(){

​      let year = this.getFullYear();

​      let month = this.getMonth();

​      let day = this.getDate();

​      return `${year}年${month+1}月${day}日`; //月份+1 是因为月份程序中的范围是0-11 

​    }



​    let d =new Date("1997/12/7");//1997 12 7 1997.12.7 1997-12-7格式都是可以的,常用日期格式都是可以的，可以自己提取其中的数字信息

​    let result = d.dateFormat();

​    console.log(result);
​