ES6——對象擴充

文章目錄

• 1.屬性的簡潔表示法
• 2.屬性名表達式
• 3.方法的 name 屬性
• • • getter setter通路器
• 4.屬性的可枚舉性和周遊
• • （1）可枚舉 enumerable
  • （2）周遊對象的屬性
• 5.super 關鍵字

1.屬性的簡潔表示法

（1）屬性和方法

/*允許在對象内部直接使用變量【即屬性和屬性值變量一緻，可以簡寫】*/
    let name='張三';
    let stu={
        name,
        //等同于
        //name:name
        sleep(){},
        //等同于
        sleep:function(){}
    }
           

簡寫方法不能當做構造函數來使用

（2）屬性的的getter setter通路器

let person={
        get name(){
            console.log("擷取name屬性");
            return this._name;
        },
        set name(n){
            console.log("設定name屬性");
            this._name=n; //注意不要同名 否則會死循環
        },
        
        init(){}
    }
    console.log(person);
    person.name="張三";  //設定name屬性
    console.log(person.name);  //擷取name屬性  張三

    //簡寫方法不能當做構造函數來使用
    new person.init(); //person.init is not a constructor
           

2.屬性名表達式

對象取值

方法一：對象.屬性

方法二：對象[key] (不止可以取值 還能監測屬性是否存在)

如果使用字面量方式定義對象（使用大括号），在 ES5 中隻能使用方法一

var obj = {
	  foo: true,
	  abc: 123
	};
           

ES6 允許字面量定義對象時，用方法二（表達式）作為對象的屬性名，即把表達式放在方括号内

let key="name";
    let obj={
        [key]:'張三'
    }
    console.log(obj); //{name: '張三'}
    console.log(obj[key]); //張三
    console.log(obj['name']); //張三
           

3.方法的 name 屬性

方法的name屬性傳回函數名（即方法名）

const person = {
        sayName() {
            console.log('hello!');
        }
    };
    console.log(person.sayName.name);   //sayName
           

getter setter通路器

不能直接擷取getter setter通路器的函數名稱(undefined)

//es6 get set 通路器寫法
    let obj={
        get sex(){return this._sex;},
        set sex(n){this._sex=n;}
    }
    console.log(obj.sex.name);  //undefined)
           

可以使用getOwnPropertyDescriptor擷取

//擷取getter setter通路器 函數名稱
    let descr=Object.getOwnPropertyDescriptor(obj,'sex');
    console.log(descr);
           

Object.getOwnPropertyDescriptor(object, propertyname) 方法傳回指定對象上一個自有屬性對應的屬性描述符。（自有屬性指的是直接賦予該對象的屬性，不需要從原型鍊上進行查找的屬性）

obj：需要查找的目标對象

prop：目标對象内屬性名稱

補充： es5使用原生js在對象上設定getter，setter通路器

//設定多個屬性
    Object.defineProperties(obj,{
        name:{
            get: function () {
                return this.firstName+this.lastName;
            },
            set: function (n) {
                let firstName= n.split('-')[0];
                let lastName= n.split('-')[1];
                this.firstName=firstName;
                this.lastName=lastName;
            }
        }
    });
    console.log(obj);
    obj.name="李-四";
    console.log(obj.name);

	//設定單個屬性 Object.defineProperty ```
           

4.屬性的可枚舉性和周遊

（1）可枚舉 enumerable

描述對象的enumerable屬性，稱為“可枚舉性”，如果該屬性為false，就表示某些操作會忽略目前屬性

周遊隻對可枚舉屬性周遊

（2）周遊對象的屬性

1. for…in

   周遊對象自身的和繼承的可枚舉屬性（不含 Symbol 屬性）

2. Object.keys(obj)

   傳回一個數組，包括對象自身的（不含繼承的）所有可枚舉屬性（不含 Symbol 屬性）的鍵名

3. Object.getOwnPropertyNames(obj)

   傳回一個數組，包含對象自身的所有屬性（不含 Symbol 屬性，但是包括不可枚舉屬性）的鍵名

5.super 關鍵字

this關鍵字總是指向函數所在的目前對象，

ES6 又新增了另一個類似的關鍵字super，指向目前對象的原型對象

let person={
        name(){
            console.log("全名稱");
        }
    }
    let student={
       sleep(){
            console.log(this); //{sleep: ƒ sleep()}
            super.name(); //全名稱
       }
    }
    //設定原型對象
    Object.setPrototypeOf(student,person);
    student.sleep();