对象扩展

对象的扩展

1.属性和方法的简洁表示方法

下面是普通写法：

var obj = {
            name : "李易峰",
            age : 22
        }


        var name = "西西";
        var age = 18;
        var obj1 = {
            name : name,
            age : age,
            study : function(){
                console.log(“学而时习之”);
            }
        }

而在ES6中允许在{}里直接写入变量名。解析的时候，变量名作为属性名，变量值作为属性值。 当然，如果给对象写入方法 那么 可以省略function。写法如下：

var obj2 = {
            name,
            age,
            study(){
                console.log("学而时习之");
            }
        }
        console.log(obj2);
        obj2.study();

2.super关键字

super关键字:用来指向于当前对象的原型对象。
那么我们直接看案例：

var stu = {
            name : "李易峰",
            age : 22,
            type : super.type, //报错：'super' keyword unexpected here

这里的super会报错 说明super不能直接在对象里面用

 普通书写方式：
           studying : function(){
                 console.log("我是"+stu.__proto__.type+"我在敲代码")；
            }
            简写方式：
            learn(){
                console.log("我是"+super.type+"我爱学习");

                }
            }

			stu.__proto__ = {
                 type : "学生",
                 run : function(){
                     console.log("我要减肥");
                 }
            }

就会发现super 关键字目前只能在对象的方法简写的时候才能用。
所以我们总结出下面两个注意点：

【注意点】：
1.super关键字只能在对象的方法中使用，在其他地方使用就会报错。
2.super关键字目前只能在对象方法的简写方式里面去用，常规写法的方法会报错。

3.计算属性名

在ES5之前，如果属性名是个变量或者需要动态计算，则只能通过 对象.[变量名] 的方式去访问。而在es6里面，把属性名用[ ]括起来，则括号中就可以引用提前定义的变量。使用计算属性名优化我们的代码。
案例如下：

var obj = {
            [n1] : "算命先生",
            [n2] : 20,
            [n3] : function(){
                console.log("门门功课一百分！");
            },
            [n4](){
                console.log(this[n1]+"---"+this[n2]);
            },
            [getGender()] : "女"
        }

        obj[n3]();
        console.log(obj[getGender()]);

因为一般开发项目都是多人团队形式开发，避免不了属性名重名，所以在这个时候就体现出了计算属性名的优势了。从而保护命名的可读性和可维护性。

4.面向对象

下面我们来个猜谜语：把大象装进冰箱分几步？
当然是三步啦！那我们就用谜语来讲讲面向对象吧！
首先我们要知道什么是对象？
类 ： 具有相同特性的一类事物
对象 ： 类里面的某一个个体

面向过程的写法：

        // 1.打开冰箱门
        function openDoor(){
        }
        // 2.把大象装进冰箱
        function eleJoin(){
        }
        // 3.关闭冰箱门
        function closeDoor(){
        }

面向对象的写法 ：

		function Elephant(){
        }
        function Refrigerator(){
        }
        Refrigerator.prototype.openDoor = function(){
        }
        Refrigerator.prototype.closeDoor = function(){
        }
        Refrigerator.prototype.join = function(){
        }
        // 1.打开冰箱门
        var ref = new Refrigerator();
        ref.openDoor();
        // 2.把大象装进冰箱
        var ele = new Elephant();
        ref.join(ele);
        // 3.关闭冰箱门
        ref.closeDoor();

5.class

// function Person(name, sex) {
    //     this.name = name;
    //     this.sex = sex;
	 // return {name, sex}
    // }  

    // 是给Person原型中添加toString方法
    // Person.prototype.toString = function() {
    //     return this.name + "," + this.sex;
    // }

    // var p4 = new Person("李四", "男");

    // var s = new p4.toString();
    // console.log(s);
    

    // var p1 = new Person("jack", "男");
    // console.log(p1.toString());

    // console.log(Person.prototype);

    // for(var attr in Person.prototype) {
    //     console.log(attr);
    // }

    // console.log(Person());

那我们来说说传统的构造函数的问题 :

1. 构造函数和原型方法属性分离 不便于维护 降低了可读性
2. 原型对象的成员可以遍历
3. 默认情况下构造函数也是可以被当做普通函数来调用的，所以功能性不明确。
4. 原型中的方法也可以作为构造函数来用。

 	// 2. 类的用法很let和const一样 都有暂时性死区  必须先定义 再使用
    // var p3 = new Person();
    // console.log(p3);
 class Person {
        constructor(name, sex) {
            this.name = name;
            this.sex = sex;
        }

        toString() {
            return this.name + "," + this.sex; 
        }
    }

    var p2 = new Person("lily", "女");
    console.log(p2.toString());

    class Cat{
    }
    var c1 = new Cat();

ES6中的类的本质

其实class就是一颗语法糖 他的本质还是函数 而且是ES5里面的函数封装而成的

class Cat{
    constructor(name, type) {
       this.name = name; // this指向于类创建的实例化对象
        this.type = type;
    }
    
    work() {
        concole.log("抓老鼠");
    }
}

console.log(typeof  Cat);  // function

在类里面定义方法 可以省略function关键字

每创建一个类 都会默认有一个构造方法constructor() 相当于构造函数

类的特点 :

1. 类是不可枚举的
2. 类的用法跟let和const一样和 具有暂时性死区 必须先声明 再使用
3. 类里面的方法 不可以作为构造函数来使用
4. 类在使用的时候 必须配合new关键字进行使用 直接调用会报错

好啦，就分享这么多，如果有错误。谢谢指出来！！