JavaScript對象擴(kuò)展方法的用法詳解

更新時(shí)間：2022年11月09日 08:30:28 作者：亦世凡華、

JavaScript對象中的可擴(kuò)展性指的是：是否可以給對象添加新屬性。所有的內(nèi)置對象和自定義對象顯示的都是可擴(kuò)展的，對于宿主對象，則由JavaScript引擎決定

name 屬性

函數(shù)的name屬性，返回函數(shù)名。對象方法也是函數(shù)也有name屬性。

<script>
    const obj = {
        name:'張三',
        age:18,
        sayName(){
            console.log('hello world');
        }
    }
    console.log(obj.sayName.name);//sayName
</script>

如果對象方法使用取值函數(shù)(getter)和存值函數(shù)(setter)，需要該方法的屬性的描述對象在對象get和set屬性上面，返回值是方法名前加上get和set。

<script>
    const obj = {
        get foo(){},
        set foo(x){}
    }
    const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo');
    console.log(descriptor.get.name);//get foo
</script>

有兩種特殊情況：

<script>
    // Function構(gòu)造函數(shù)創(chuàng)造的函數(shù)，name屬性返回anonymous。
    console.log((new Function()).name);//anonymous
    // bind方法創(chuàng)造的函數(shù)，name屬性返回bound加上原函數(shù)的名字。
    var doSomething = function(){}
    console.log(doSomething.bind().name);//bound doSomething
</script>

屬性的遍歷

ES6中一共有 5 種方法可以遍歷對象的屬性。

(1) for...in

循環(huán)遍歷對象自身屬性和繼承的可枚舉屬性

(2)Object.keys(obj)

返回一個(gè)數(shù)組，包括對象自身的(不含繼承的)所有可枚舉屬性(不含Symbol屬性)的鍵名

(3)Object.getOwnPropertyNames(obj)

返回一個(gè)數(shù)組，包含對象自身的所有屬性(不含Symbol屬性，但是包括不可枚舉屬性)的鍵名

(4)Object.getOwnPropertySymbols(obj)

返回一個(gè)數(shù)組，包含對象自身的所有Symbol屬性的鍵名

(5)Reflect.ownKeys(obj)

返回一個(gè)數(shù)組，包含對象自身的(不含繼承的)所有鍵名，不管鍵名是Symbol或字符串，也不管是否可枚舉。

super關(guān)鍵字

和this關(guān)鍵字總是指向函數(shù)所在的當(dāng)前對象一樣，ES6新增了另一個(gè)類似的關(guān)鍵字super，指向當(dāng)前對象的原型對象。

下面代碼中，super.say() 指向原型對象 obj 的say方法，但是綁定的this卻還是當(dāng)前對象obj，因此輸出的結(jié)果不是hello而是world。

<script>
    const person = {
        x:'hello',
        say(){
            console.log(this.x);
        }
    }
    const obj = {
        x:'world',
        say(){
            super.say()
        }
    }
    Object.setPrototypeOf(obj,person)//，該對象將指定對象的原型(即內(nèi)部[[Prototype]]屬性)設(shè)置為另一個(gè)對象或?yàn)閚ull。
    console.log(obj.say());//world
</script>

Object.is()

用來比較兩個(gè)值是否嚴(yán)格相等，與嚴(yán)格比較運(yùn)算符（===）的行為基本一致。

<script>
    var obj = {
        name:'張三',
        name1:'張三',
        gender:'男',
        age:18,
        say(){
            console.log('hello world');
        }
    }
    console.log(Object.is(obj.name,obj.name1));//true
    console.log(Object.is(1,1));//true
    // Object.is() 和 === 的區(qū)別在于以下特殊例子
    console.log(+0 === -0);//true
    console.log(Object.is(+0,-0));//false
    console.log(NaN === NaN);//false
    console.log(Object.is(NaN,NaN));//true
</script>

Object.assign()

用于對象的合并，將源對象所有可枚舉的屬性，復(fù)制到目標(biāo)對象上。

<script>
    var obj = {
        a:1,
        b:2,
        c:'我是c'
    }
    var obj1 = {
        a:2, //當(dāng)目標(biāo)對象與源對象有同名屬性，或多個(gè)源對象有同名屬性，則后面的屬性會(huì)覆蓋前面的屬性
        d:3,
        e:'我是e'
    }
    // console.log(Object.assign(target, source1, source2));
    console.log(Object.assign(obj,obj1));
</script>

用到對象合并我們可以就會(huì)遇到一些問題了，請看如下例子：

<script>
    // 參數(shù)不是對象，則會(huì)先轉(zhuǎn)換成對象
    console.log(typeof Object.assign(2)); //object
    // null和undefined無法轉(zhuǎn)對象，作為目標(biāo)對象為false，但是作為源對象為true的
    // console.log(Object.assign(null,2));//報(bào)錯(cuò)提醒 Cannot convert undefined or null to object
    // console.log(Object.assign(2,null));//沒報(bào)錯(cuò)
    // 其他類型像數(shù)值、字符串、布爾值雖然不會(huì)報(bào)錯(cuò)，但只有字符串會(huì)以數(shù)組形式拷入目標(biāo)對象，其他值不會(huì)產(chǎn)生效果
    const x = 'abc'
    const y = 123
    const z = true
    console.log(Object.assign({},x));//{0: 'a', 1: 'b', 2: 'c'}
    console.log(Object.assign({},y));//{}
    console.log(Object.assign({},z));//{}
</script>

在使用這個(gè)ES6新增的方法時(shí)，應(yīng)該注意以下內(nèi)容：

<script>
    // Object.assign()實(shí)行的是淺拷貝，如果源對象發(fā)生任何變化，都會(huì)反映到目標(biāo)對象上
    const obj1 = {a:1,b:2,c:{d:3}}
    const obj2 = Object.assign({},obj1)
    obj1.c.d = 3.14
    console.log(obj2.c.d);
    // Object.assign()可以用來處理數(shù)組
    console.log(Object.assign([1,2,3],[4,5]));// [4, 5, 3]
    // Object.assign()可以用來對取值函數(shù)進(jìn)行處理，求值之后再處理
    const a = {
        get foo(){
            return 1
        }
    }
    console.log(Object.assign({},a));//{foo: 1}
</script>

Object.getOwnPropertyDescriptors()

返回指定對象所有自身屬性(非繼承屬性)的描述對象。

<script>
    const obj = {
        num:12,
        get say(){
            return 'hello world'
        }
    }
    console.log(Object.getOwnPropertyDescriptors(obj));
</script>

Object.setPrototypeOf()

方法作用與__proto__相同，用來設(shè)置應(yīng)該對象的原型對象(prototype)，返回參數(shù)對象本身。

<script>
    let proto = {}
    let obj = {x:10}
    Object.setPrototypeOf(obj,proto)
    proto.y = 11
    proto.z = 12
    console.log(obj.x);//10
    console.log(obj.y);//11
    console.log(obj.z);//12
</script>

Object.getPrototypeOf()

方法用于讀取一個(gè)對象的原型對象，與Object.setPrototypeOf()方法配套。

<script>
    function foo(){}
    const f = new foo()
    console.log(Object.getPrototypeOf(f) === foo.prototype);//true
    Object.setPrototypeOf(f,Object.prototype)//修改原型對象
    console.log(Object.getPrototypeOf(f) === foo.prototype);//false
</script>

Object.keys()|Object.values|Object.entries()|Object.fromEntries()

三種方法都是返回一個(gè)數(shù)組，之間的區(qū)別請看如下：

<script>
    // Object.keys() 返回所有可遍歷的鍵名
    var obj = {aa:1,bb:'我是b',cc:2}
    console.log(Object.keys(obj));//['aa', 'bb', 'cc']
    // Object.values() 返回所有可遍歷的屬性的鍵值,鍵值排序按屬性名數(shù)值大小排序i
    const obj1 = {12:'a',1:'b',18:'c'}
    console.log(Object.values(obj1));//['b', 'a', 'c']
    // Object.entries() 返回所有可遍歷屬性的鍵值對數(shù)組
    const obj2 = {1:'a','b':2,3:'c'}
    console.log(Object.entries(obj2));//[['1', 'a'],['3', 'c'],['b', 2]]
    // Object.fromEntries() 與 Object.entries()操作相反，將一鍵值對數(shù)組轉(zhuǎn)為對象。
    console.log(Object.fromEntries([
        ['1', 'a'],
        ['3', 'c'],
        ['b', 2]
    ]));//{1: 'a', 3: 'c', b: 2}
</script>

Object.hasOwn()

方法可以判斷某個(gè)屬性是否為原生屬性，接受兩個(gè)參數(shù)，第一個(gè)是參數(shù)是要判斷的對象，第二個(gè)是屬性名。

<script>
    const obj = Object.create({a:12});
    obj.b = 34
    // 對象obj的屬性a是繼承屬性，屬性b是原生屬性。
    console.log(Object.hasOwn(obj,'a'));//false
    console.log(Object.hasOwn(obj,'b'));//true
</script>

到此這篇關(guān)于JavaScript對象擴(kuò)展方法的用法詳解的文章就介紹到這了,更多相關(guān)JS對象擴(kuò)展內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: