ES6创建时间类型的映射

目录

一：class介绍，回顾ES5创建对象的五种方式

1.创建对象的方式:字面量创建，Object构造函数，工厂模式，构造函数，Object.create()，构造函数+原型模式，ES6的class

①字面量创建：

②Object构造函数：

③工厂模式：有return

④构造函数：用new 代替 return

⑤Object.create()创建

⑥构造函数+原型模式

 ⑦ES6中class创建如下：

二：ES6中class创建方式

三：对象的静态属性和方法 （静态成员属于构造函数本身的，不属于实例对象）

1.其他方式创建对象的静态方法（构造函数本身的方法）

2.class创建对象的静态方法用static创建

四：ES5继承和class类继承的区别

 1.ES5的继承（组合继承）其他继承此链接

2.ES6的继承

五：ES6中class类的内部属性get和set 

get是读取值，可以return属性值；

set是修改值，可以修改该属性的值，属性的值被修改，此方法会被调用

1.实例对象的getter和setter

 2.静态成员属性的getter和setter（不做重点）

---

一：class介绍，回顾ES5创建对象的五种方式

ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，
作为对象的模板。通过class关键字，可以定义类。
基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，
新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

1.创建对象的方式:字面量创建，Object构造函数，工厂模式，构造函数，Object.create()，构造函数+原型模式，ES6的class

①字面量创建：

var Dog = {
            name: '哈士奇',
            age: 3,
            eat: function() {
                console.log('我能吃')
            }
        }
        console.log(Dog.name)   //哈士奇
        Dog.eat()               //我能吃

②Object构造函数：

var Dog = new Object()
        Dog.name = '哈士奇'
        Dog.age = 3
        Dog.eat = function() {
            console.log('我能吃')
        }
        console.log(Dog.name)       //哈士奇
        Dog.eat()                   //我能吃

③工厂模式：有return

function newDog(name, age) {
            var o = new Object()
            o.name = name
            o.age = age
            o.eat = function () {
                console.log('我能吃')
            }
            return o
        }
        var hashiqi = newDog('哈士奇', 3)
        var keji = newDog('柯基', 2)

        console.log(keji.name)   //柯基
        keji.eat()               //我能吃

④构造函数：用new 代替 return

function Dog(name, age) {
            this.name = name
            this.age = age
            
            this.eat = function () {
                console.log('我能吃')
            }
        }
        let keji = new Dog('柯基', 2)
        let hashiqi = new Dog('哈士奇', 3)
        console.log(keji.name)                //柯基
        console.log(hashiqi.name)             //哈士奇
        keji.eat()                            //我能吃

⑤Object.create()创建

⑥构造函数+原型模式

function Dog(name, age) {
            this.name = name
            this.age = age
        }
        // 原型添加方法
        Dog.prototype.eat = function (myname) {
            console.log(`我叫${myname}我很智慧`)
        }
        let keji = new Dog('柯基', 2)
        let hashiqi = new Dog('哈士奇', 3)
        console.log(keji.name)                //柯基
        console.log(hashiqi.name)             //哈士奇
        keji.eat('哈士奇')                    //我叫哈士奇我很智慧

 ⑦ES6中class创建如下：

二：ES6类

①class类

class Dog {
            //属性
            constructor(name, age) {
                this.name = name      //this指向实例的对象
                this.age = age
            }
            //方法
            eat() {
                console.log('很能吃')
            }
            smart(myname) {
                console.log(`我叫${myname}我很智慧`)
            }

        }
        let hashiqi = new Dog('哈士奇', 3)
        console.log(hashiqi.age)      //3
        hashiqi.smart('哈士奇')       //我叫哈士奇我很智慧

②ts的类

三：对象的静态属性和方法 （静态成员属于构造函数本身的，不属于实例对象）

1.其他方式创建对象的静态方法（构造函数本身的方法）

2.class创建对象的静态方法用static创建

四：ES5继承和class类继承的区别

 1.ES5的继承（组合继承）其他继承此链接

2.ES6的继承

五：ES6中class类的内部属性get和set 

ES5的此链接

get是读取值，可以return属性值；

set是修改值，可以修改该属性的值，属性的值被修改，此方法会被调用

1.实例对象的getter和setter

<script>
        class Dog {
            // 属性的获取
            get price() {
                // console.log('我被获取了')
                return 5000
            }

            // 属性的修改
            set price(value) {
                this.jiage = value
                console.log('我被修改了')
            }
        }
        let keji = new Dog()
        // 属性的获取
        console.log(keji.price)        //5000
        // 属性的修改
        keji.price = 8000              //第11行  我被修改了
        console.log(keji.jiage)        //8000
    </script>

 2.静态成员属性的getter和setter（不做重点）