JS物件進階：建構式創造物件 原型繼承 原型鏈 原型物件擴展方法 constructor指回 create繼承 keys defineProperty詳細用法

JS物件進階

本章會給大家介紹建構式創造物件，原型繼承，原型鏈，原型物件怎么擴展方法，還有constructor,create,keys,difinePropertyu方法

1.建構式創造物件

function Example(name,age){
            this.name=name;
            this.age=age;
            this.methods=function(){
                console.log('this is methods');
            }
        };
        var tx=new Example('tx',20);
        console.log(tx);
        console.log(tx.age);
        console.log(tx.name);
        tx.methods();

先創造一個建構式，然后創造實體化物件，這里可以看到輸出結果，

• 在這個建構式中，實體成員就是建構式內部通過this添加的成員 name age methods就是實體成員，
• 在建構式本身上添加的成員就為靜態成員 例如Example.sex='男'
• 實體成員只能通過實體化物件訪問
• 靜態成員只能通過建構式訪問
  例如：

        Example.sex='男'//這是靜態成員
        console.log(tx.sex);//undefined /實體物件訪問靜態成員
        console.log(Example.sex);//男 /建構式訪問靜態成員
        console.log(Example.age);//undefined /建構式范文實體成員
        Example.methods();//報錯 /建構式范文實體成員

2.prototype和__proto__的詳細介紹

• 首先需要知道JS是面向物件的語言，擁有繼承和原型，
• 簡單得來說：物件除了可以保持自有的屬性，還可以從一個稱為原型的物件繼承屬性，
• 大家可以觀察下面的圖片，清晰認識什么是原型

        console.log(Example.prototype);
        //這是建構式原型
        console.log(tx.__proto__);
        //這是實體化物件原型
        console.log(Example.prototype.__proto__);
        //這是建構式原型的原型（以及到達頂層原型）
        console.log(Object.prototype);
        //這是物件的原型（這是頂層原型）
        console.log(Example.prototype.__proto__.__proto__);
        //這是建構式原型的原型的原型為null  超過了頂層原型
        console.log(Object.prototype.__proto__);
        //超過了頂層原型

相信大家對原型有了一點認識 關于prototype和__proto__的不同在于：
prototype是用在建構式或者Object后面，__proto__是用在實體物件后面， 他們的意思都一樣，回傳原型物件！

物件可以利用原型的屬性和方法:

        tx.__proto__.sex='男';
        Example.prototype.birthday='2000-02-18';
        console.log(tx.sex);//男
        console.log(tx.birthday);//2000-02-18

如果實體物件里存在的屬性名和他的原型里的屬性名相同時，呼叫屬性名會遵從就近原則，簡單說就是:

• 首先查看物件本身有無這個屬性
• 再找它的建構式的原型 若沒建構式就找Object原型
• 最后找Object原型
  就是這樣尋找！

3.constructor指回
constructor 記錄該物件參考于那個建構式,很多情況下，我們需要手動利用constructor這個屬性指回原來的建構式，

首先要知道，我們剛才給建構式的原型加了2個屬性，輸出一下建構式的原型大家可以看看：

console.log(tx.__proto__);
console.log(Example.prototype);

console.log(tx.__proto__.constructor);
console.log(Example.prototype.constructor);

這就是 constructor的一個用法！

constructor還有一個用法就是：如果我們修改了原來的原型物件，給原型賦值是一個物件，必須手動利用constructor這個屬性指回原來的建構式

4.create()繼承
create()繼承可以直接繼承頂部原型，也可以繼承原型，還可以繼承物件
例如:

 var obj1=Object.create({x:1,y:2}); 
 //繼承一個原型 再繼承頂部原型 間接繼承Object.prototype
 console.log(obj1);
console.log(obj1.__proto__);
console.log(obj1.__proto__.__proto__);

會得到一個空物件，但是這個obj1.__proto__為剛才的{x:1,y:2}物件，然后再往上面繼承就是Object.prototype，頂層原型了，

同樣也可以繼承空物件和直接繼承頂層原型

let obj2=Object.create(null); //obj2不繼承任何屬性和方法
let obj3=Object.create(Object.prototype);//直接繼承頂部原型

5.Object.keys() 獲取物件本事所有的屬性 回傳一個陣列，

var obj={
            id:1,
            pname:'iphone',
            price:5000,
            num:1
        };
        var arr =Object.keys(obj);
        //獲取物件本事所有的屬性
        console.log(arr);
        arr.forEach(function(value){
            console.log(value);
        })

6.defineProperty詳細用法介紹 ：

語法：Object.defineProperty(obj.prop,descriptor)
用法: 定義新屬性或者修改原有的屬性
obj 必須存在，表示目標物件
prop 必須存在，表示需定義或修改的屬性的名字
descriptor 必須存在，表示目標屬性所擁有的特性
前面2個引數都很好理解，就是要修改的目標物件和屬性名

descriptor以物件{}書寫，里面4個用法如下:

• value:設定屬性的值 默認為undefined
• writable:值是否可以重寫 ture||false 默認false
• enumerable:目標屬性是否可以被列舉 ture||false 默認false
• configurable:目標屬性是否可以被洗掉或是否可以再次修改特性 ture||false 默認false

我給大家演示各個屬性的用法:

1. value，設定值

var obj={
            id:1,
            pname:'iphone',
            price:4999
        };
        Object.defineProperty(obj,'num',{
            value:1000
        });//增加一個屬性
        Object.defineProperty(obj,'price',{
            value:'100'
        });//修改一個屬性
        console.log(obj);

2. writable,值是否可以重寫

Object.defineProperty(obj,'id',{
            writable:false, //不允許修改id這個屬性值
        });
        
        obj.id=2;//嘗試修改id值
        console.log(obj);//id不能被修改 依舊為1

3. enumerable:目標屬性是否可以被列舉
   這個方法用在 比如：目標的屬性比較有隱私特征的時候（地址，身份證），
   可以用enumerable讓這個屬性不能被列舉出來，
   給一個address保存地址，讓地址不被列舉出來

Object.defineProperty(obj,'address',{
            value:'中國四川省',//隱私 不能列舉出來
            enumerable:false, //不會遍歷出來
        });
        console.log(Object.keys(obj));

并沒有吧address這個屬性列舉出來！

4.configurable:目標屬性是否可以被洗掉或是否可以再次修改特性
一般來說，有的商品的標價不能被洗掉，商品的編號不能被再次修改它的特性（讓編號不能修改等特性）
首先請看如何讓標價不能被洗掉:

Object.defineProperty(obj,'price',{
            configurable:false,//不能洗掉或修改特性
        });
        delete obj.price
        console.log(obj);

價格依舊存在并未洗掉

請看不能修改特性:

 Object.defineProperty(obj,'address',{
            value:'中國四川',//隱私 不能列舉出來
            enumerable:false, //不會遍歷出來
            configurable:false,
        });

        Object.defineProperty(obj,'address',{
            enumerable:true,
            configurable:true
        });

我們在上面已經設定了address這個屬性不能修改并且不能修改這個屬性的特征，我們下面又來設定它的特征，會直接報錯，不能修改它的特征!

要介紹的內容就到這里了，希望大家能指出我的不足和錯誤，希望可以多私聊我和我溝通交流，希望大家多點贊支持，謝謝大家！！！