ECMAScript5之Object

時間 2019-11-19

標籤 ecmascript5 ecmascript object 欄目 JavaScript 简体版

原文原文鏈接

在ECMAScript5中對Object新增的些方法，之前沒注意的同志們，嘻嘻，下面咱們再一塊兒來邊看邊學。html

一、Object之create

Create單詞意爲創造嘛，做爲Object的靜態方法，不言而喻那固然是建立對象唄。chrome

誰的對象呢？ide

固然不是個人。。。ui

好吧，Object.create(prototype,descriptors)是建立一個具備指定原型且可選擇性地包含指定屬性的對象並返回。this

納尼，什麼意思？spa

咱們一塊兒demo下唄。prototype

<!DOCTYPE html> 
    <head>
        <title>create</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
        <script>
           var newObj = Object.create(null,{
               /*自帶name，age屬性*/
               name: {
                   value: 'Monkey'
               },
               age: {
                   value: 24
               }
           });
           console.log(newObj.name);
           console.log(newObj.age);
           //輸出爲null:緣由是咱們經過Object.create建立了一個null原型的對象
           //http://www.cnblogs.com/giggle/p/5208199.html
           console.log(Object.getPrototypeOf(newObj));
        </script>
    </body>
</html>

下面是Object.create具體講解： 3d

Object.create( prototype, descriptors )code
prototypehtm	必須。要用做原型的對象。可爲null
descrioptors	該對象的屬性。「數據屬性」可獲取且可設置值的屬性。數據屬性描述符包含value特性，以及writable、enumerable和configurable特性。若未指定最後三個特性，則它們的默認值是false。
返回值	一個具備指定的內部原型且包含指定的屬性的新對象

注：用Object.create建立對象時，descriptors必定要是「數據屬性」哦！！

什麼意思。

咱們再來寫個demo，看看

<!DOCTYPE html> 
    <head>
        <title>create</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
        <script>
           var newObj = Object.create(null,{
               //這裏我沒有按照着name:{}這種格式，而是普通格式
               name: 'Monkey',
               age: 24
           });
           //下面會報錯滴
           console.log(newObj.name);
           console.log(newObj.age);
        </script>
    </body>
</html>

View Code

運行上面的代碼，chrome下看看

大夥看見上面報的錯了麼。切記切記

二、Object之defineProperty

在上面你們不是看見Object.create方法麼，其實這是核心哦。下面的都是輔助它的呢。

好比這個defineProperty，其實就是將屬性添加到對象，或修改對象的現有屬性。

Object.defineProperty(object, propertyName, descriptor)
object	必須。在其上添加新屬性或修改已有屬性。
propertyName	必須。屬性名
descriptor	又是它。描述屬性的
返回值	已修改的對象

Demo一下：

<!DOCTYPE html> 
    <head>
        <title>defineProperty</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
        <script>
            var obj = Object.create(null);
            //利用defineProperty爲obj對象添加一個newDataProperty屬性
            Object.defineProperty(obj,"newDataProperty",{
                value:'Monkey',
                writable:true
            });
            console.log(obj.newDataProperty);
        </script>
    </body>
</html>

View Code

三、Object之defineProperties

在上面咱們看見了Object.defineProperty是添加或修改一個屬性，這個嘛，從單詞就知道咯，複數嘛，就是添加或修改一個或多個屬性到對象咯。

Object.defineProperties(object,descriptors)
object	必須。對其添加或修改的屬性對象
descriptors	必須。包含一個或多個描述對象的JavaScript對象。
返回值	已修改的對象

<!DOCTYPE html> 
    <head>
        <title>defineProperties</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
        <script>
            var obj = Object.create(null);
            //利用defineProperties爲obj對象添加兩個新屬性
            Object.defineProperties(obj,{
                name:{
                    value:'Monkey'
                },
                age: {
                    value:24
                }
            });
            console.log(obj.name);
            console.log(obj.age);
        </script>
    </body>
</html>

View Code

四、Object之getOwnPropertyDescriptor

這個靜態方法就是，獲取指定對象自身屬性的描述符。而不是從對象的原型繼承的哦。

Object.getOwnPropertyDescriptor(object,propertyname)
object	必須。訪問屬性的對象
propertyname	必須。屬性名
返回值	屬性描述符

<!DOCTYPE html> 
    <head>
        <title>getOwnPropertyDescriptor</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
        <script>
            //經過Object.create建立一個對象
            var obj = Object.create(null,{
                name:{
                    value:'Monkey',
                    writable:true
                }
            });
            //得到name的描述對象
            var descriptor = Object.getOwnPropertyDescriptor(obj,'name');
            console.log(descriptor);
        </script>
    </body>
</html>

View Code

從上面能夠看出Object.getOwnPropertyDescriptor的確是返回的屬性的描述信息對象哦。

五、Object之getOwnPropertyNames

返回對象本身的屬性名稱。是對象本身的，而不是繼承的哦。

Object.getOwnPropertyNames(object)
object	必須。返回屬於該對象的全部屬性名
返回值	包含對象本身屬性的名稱

<!DOCTYPE html> 
    <head>
        <title>getOwnPropertyNames</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </head>
    <body>
        <script>
            function Fn(name,age){
                this.name = name;
                this.age = age;
                this.fn1 = function(){
                    console.log(this.name+"    "+this.age);
                };
            }
            Fn.prototype.fn2 = function(){
                console.log(this.name);
            };
            Fn.prototype.attr1 = this.name;
            obj = new Fn('Monkey',24);
            /*
                從上面的代碼可知：obj本身的對象爲name,age,fn1
                                  繼承的爲fn2，attr1
            */
            console.log(Object.getOwnPropertyNames(obj));
        </script>
    </body>
</html>

View Code

相關標籤/搜索

destroy+instantiate+object+bool

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。