JavaScript基础对象---Object

最新推荐文章于 2023-10-24 22:05:07 发布

琼林玉质

最新推荐文章于 2023-10-24 22:05:07 发布

阅读量239

点赞数

分类专栏： JavaScript基础文章标签： JavaScript object defineProperty 深拷贝和浅拷贝继承

JavaScript基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、对象初始化

创建对象的两种方法：

1.对象初始化器或对象字面量：{[nameValuePair1[, nameValuePair2[, ...nameValuePairN]]]}

参数：nameValuePair1, nameValuePair2, ... nameValuePairN

成对的名称（字符串）与值（任何值），其中名称通过冒号与值分隔

es2015之后简化了字面量写法

    let a = "foo", b = 42, c = {};
    let object1 = {
        a: a,
        b: b,
        c: c
    };
    //es2015写法
    let object2 = {
        a, b, c
    };
    console.log(object1.a === object2.a); //true

2.以构造函数形式来调用：new Object([value])

参数：value 任何值

    let object = new Object({'foo': 123});
    console.log(object.foo); //123

访问对象属性

对象属性可以用下标小圆点标记或者方括号标记访问

    let object = new Object({"b": 42});
    console.log(object["b"]); // 42
    object.b = "baz";
    console.log(object.b); //'baz'

从ECMAScript 2015开始，对象初始化语法开始支持计算属性名，允许在[]中放入表达式，计算结果可以当做属性名

    let i = 0;
    let object1 = {
        ["foo" + ++i]: i,
        ["foo" + ++i]: i,
        ["foo" + ++i]: i
    };
    console.log(object1.foo1); // 1
    console.log(object1.foo2); // 2
    console.log(object1.foo3); // 3

    let param = 'size';
    let object2 = {
        [param]: 12,
        ["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
    };
    console.log(object2); // { size: 12, mobileSize: 4 }

二、Object静态方法

1.Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象

语法：Object.defineProperty(obj, prop, descriptor)

参数：

obj 要在其上定义属性的对象
prop 要定义或修改的属性的名称
descriptor 将被定义或修改的属性描述符
configurable t当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false
enumerable 当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为 false
value 与属性关联的值。可以是任何有效的JavaScript值（数字，对象，函数等）。默认为 undefined.
writable 当且仅当该属性的writable为true时，value才能被赋值运算符改变。默认为 false
get 作为该属性的 getter 函数，如果没有 getter 则为undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象。默认为 undefined

set 作为属性的 setter 函数，如果没有 setter 则为undefined。当属性值修改时，触发执行该方法，该方法将接受唯一参数，即该属性新的参数值。默认为 undefined

返回值：传递给函数的对象

（1）writable决定一个属性能否被赋值

    let object = {};
    Object.defineProperty(object,"a",{
        value: 30,
        writable: true
    });
    console.log(object.a); //30
    object.a = 15;
    console.log(object.a); //15
    Object.defineProperty(object,"b",{
        value: 30,
        writable: false
    });
    console.log(object.b); //30
    object.b = 15; //TypeError: Cannot assign to read only property 'b' of object '#<Object>'

（2）enumerable决定该属性是否能被枚举

    let object = {};
    Object.defineProperty(object,"a",{
        value: 15,
        writable: true,
        enumerable: true
    });
    Object.defineProperty(object,"b",{
        value: 16,
        writable: true,
        enumerable: false
    });
    Object.defineProperty(object,"c",{
        value: 17,
        writable: true,
        enumerable: true
    });
    for (let i in object) {
        console.log(i+"=",object[i]); //a=15 c=17
    }
    console.log(Object.keys(object)); //["a", "c"]

    console.log(object.propertyIsEnumerable('a')); // true
    console.log(object.propertyIsEnumerable('b')); // false
    console.log(object.propertyIsEnumerable('c')); // true

（3）configurable

    let object = {};
    Object.defineProperty(object,"a",{
        get: () => {
            return 10;
        },
        configurable: false
    });
    Object.defineProperty(object,"a",{
        value: 15
    }); //TypeError: Cannot redefine property: a
    console.log(object.a); //10

    object.b = 5;
    //等同于
    Object.defineProperty(object,'b',{
        value: 5,
        writable: true,
        configurable: true,
        enumerable: true
    });
    Object.defineProperty(object,'d',{
        value: 5
    });
    //等同于
    Object.defineProperty(object,'b',{
        value: 5,
        writable: false,
        configurable: false,
        enumerable: false
    });

（4）set/get

    function Test() {
        let x = null;
        let arr = [];
        Object.defineProperty(this,'x',{
            get: () => {
                console.log('get');
                return x;
            },
            set: (value) => {
                console.log('set');
                x = value;
                arr.push(x);
            }
        });
        this.getTest = function () {
            return arr;
        }
    }
    let test = new Test();
    test.x; //get
    test.x = 25; //set
    test.x = 30; //set
    console.log(test.getTest()); //[25, 30]

2.Object.defineProperties() 方法直接在一个对象上定义新的属性或修改现有属性，并返回该对象

语法：Object.defineProperties(obj, props)
参数：
obj 要在其上定义属性的对象
props 要定义其可枚举属性或修改的属性描述符的对象
返回值：被传递给函数的对象

    let object = {};
    Object.defineProperties(object, {
        'property1': {
            value: true,
            writable: true
        },
        'property2': {
            value: 'Hello',
            writable: false
        }
    });

3.Object.getOwnPropertyDescriptor() 方法返回指定对象上一个自有属性对应的属性描述符，自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性

语法：Object.getOwnPropertyDescriptor(obj, prop)

参数：
obj 需要查找的目标对象
prop 目标对象内属性名称（String类型）
返回值：如果指定的属性存在于对象上，则返回其属性描述符对象（property descriptor），否则返回 undefined

    let object = {
        bar: 42,
        get foo() { return 17; }
    };
    let foo = Object.getOwnPropertyDescriptor(object, "foo");
    // {
    //   configurable: true,
    //   enumerable: true,
    //   get: /*the getter function*/,
    //   set: undefined
    // }
    let bar = Object.getOwnPropertyDescriptor(object, "bar");
    // {
    //   configurable: true,
    //   enumerable: true,
    //   value: 42,
    //   writable: true
    // }
    Object.defineProperty(object, "baz", {
        value: 8675309,
        writable: false,
        enumerable: false
    });
    let baz = Object.getOwnPropertyDescriptor(object, "baz");
    // {
    //   configurable: false,
    //   enumerable: false,
    //   value: 8675309,
    //   writable: false
    // }

4.Object.getOwnPropertyDescriptors() 方法用来获取一个对象的所有自身属性的描述符

语法：Object.getOwnPropertyDescriptors(obj)

参数：
obj 任意对象
返回值：所指定对象的所有自身属性的描述符，如果没有任何自身属性，则返回空对象

    let object = {
        bar: 42,
        get foo() { return 17; }
    };
    Object.getOwnPropertyDescriptors(object);
    //{
    //  bar: {value: 42, writable: true, enumerable: true, configurable: true},
    //  foo: {get: ƒ, set: undefined, enumerable: true, configurable: true}
    // }
    function SuperClass() {}
    SuperClass.prototype = {
        x: 15,
        y: 20
    };
    let superClass = new SuperClass();
    superClass.a = 50;
    superClass.b = 100;
    function SubClass() {}
    SubClass.prototype = Object.create(SuperClass.prototype, Object.getOwnPropertyDescriptors(superClass));
    let subClass = new SubClass();
    console.log(subClass.a); //50

5.Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组

语法：Object.getOwnPropertyNames(obj)

参数：
obj 一个对象，其自身的可枚举和不可枚举属性的名称被返回
返回值：在给定对象上找到的属性对应的字符串数组

    let arr = ["a", "b", "c"];
    console.log(Object.getOwnPropertyNames(arr).sort()); // ["0", "1", "2", "length"]
    // 类数组对象
    let object = { 0: "a", 1: "b", 2: "c"};
    console.log(Object.getOwnPropertyNames(object).sort()); // ["0", "1", "2"]

6.Object.getOwnPropertySymbols() 方法返回一个给定对象自身的所有 Symbol 属性的数组

语法：Object.getOwnPropertySymbols(obj)

参数：
obj 要返回 Symbol 属性的对象
返回值：在给定对象自身上找到的所有 Symbol 属性的数组

    let object = {};
    let a = Symbol("a");
    let b = Symbol.for("b");

    object[a] = "localSymbol";
    object[b] = "globalSymbol";
    let objectSymbols = Object.getOwnPropertySymbols(object);

    console.log(objectSymbols.length); // 2
    console.log(objectSymbols);         // [Symbol(a), Symbol(b)]
    console.log(objectSymbols[0]);      // Symbol(a)

7.Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__

语法：Object.create(proto, [propertiesObject])

参数：
proto 新创建对象的原型对象
propertiesObject 可选，这些属性对应Object.defineProperties()的第二个参数。
返回值：一个新对象，带着指定的原型对象和属性

    function Father() {
        this.x = 0;
        this.y = 0;
    }
    Father.prototype.move = function (x,y) {
        this.x += x;
        this.y += y;
    };
    function Son() {
        Father.call(this); //调用父类构造函数
    }
    Son.prototype = Object.create(Father.prototype);
    Son.prototype.constructor = Son;
    let son = new Son();
    console.log(son instanceof Son); //true
    console.log(son instanceof Father); //true

8.Object.getPrototypeOf() 方法返回指定对象的原型

语法：Object.getPrototypeOf(object)
obj 要返回其原型的对象
返回值：给定对象的原型，如果没有继承属性，则返回 null

    let proto = {};
    let object = Object.create(proto);
    Object.getPrototypeOf(object) === proto; // true

    let reg = /a/;
    Object.getPrototypeOf(reg) === RegExp.prototype; // true

9.Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象

语法：Object.assign(target, ...sources)

参数：
target 目标对象
sources 源对象
返回值：目标对象

    let obj = { a: 1 };
    let copy = Object.assign({}, obj);
    console.log(copy); // { a: 1 }

此方法是浅拷贝，Object.assign()拷贝的是属性值，如果源对象的属性值是一个指向对象的引用，它也只拷贝那个引用值

    let obj1 = { a: 0 , b: { c: 0}};
    let obj2 = Object.assign({}, obj1);
    console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}
    obj1.b.c = 3;
    console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
    console.log(JSON.stringify(obj2)); // { a: 1, b: { c: 3}}

如何实现深拷贝

    let obj1 = { a: 0 , b: { c: 0}};
    let obj2 = JSON.parse(JSON.stringify(obj1));
    obj1.b.c = 4;
    console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}

合并两个对象

    let obj1 = { a: 1, b: 1, c: 1 };
    let obj2 = { b: 2, c: 2 };
    let obj3 = { c: 3 };
    let newObj = Object.assign({}, obj1, obj2, obj3);
    console.log(newObj); // { a: 1, b: 2, c: 3 }

10.Object.is()方法判断两个值是否是相同的值

语法：Object.is(value1, value2);

参数：
value1 需要比较的第一个值
value2 需要比较的第二个值
返回值：表示两个参数是否相同的Boolean

以下情况返回true：

两个值都是 undefined
两个值都是 null
两个值都是 true 或者都是 false
两个值是由相同个数的字符按照相同的顺序组成的字符串
两个值指向同一个对象
两个值都是数字并且
都是正零 +0
都是负零 -0
都是 NaN
都是除零和 NaN 外的其它同一个数字

    console.log(NaN === NaN); //false
    console.log(NaN == NaN); //false
    console.log(Object.is(NaN,NaN)); //true

    console.log(0 == false); //true
    console.log(0 === false); //false
    console.log(Object.is(0,false)); //false

    console.log(-0 == 0); //true
    console.log(-0 === 0); //true
    console.log(Object.is(-0,0)); //false

11.Object.isExtensible() 方法判断一个对象是否是可扩展的（是否可以在它上面添加新的属性）

语法： Object.isExtensible(obj)

参数：
obj 需要检测的对象
返回值：表示给定对象是否可扩展的一个Boolean

12.Object.isSealed() 方法判断一个对象是否被密封

语法：Object.isSealed(obj)

参数：
obj 要被检查的对象
返回值：表示给定对象是否被密封的一个Boolean

13.Object.isFrozen()方法判断一个对象是否被冻结

语法：Object.isFrozen(obj)

参数：
obj 被检测的对象
返回值：表示给定对象是否被冻结的Boolean

14.Object.preventExtensions()方法让一个对象变的不可扩展，也就是永远不能再添加新的属性

语法：Object.preventExtensions(obj)

参数：
obj 将要变得不可扩展的对象
返回值：已经不可扩展的对象
描述：不可扩展对象不能再添加新的属性，但是原有的属性仍然可被编辑、删除

非空对象（其属性的configurable为true，writable为true）：

    let object = {
        a:1,
        b:2
    };
    console.log(Object.isExtensible(object)); // true
    Object.preventExtensions(object);
    console.log(Object.isExtensible(object)); //false
    console.log(Object.isSealed(object)); // false
    console.log(Object.isFrozen(object)); // false
    ob.b = 20; //可以赋值
    console.log(ob.b); //20
    delete ob.b; //可以删除
    console.log(ob); //{a: 1}
    Object.defineProperty(ob,'c',{ // 不可以添加属性
        value: 3,
        writable: true
    }); //Cannot define property c, object is not extensible

非空对象（其属性的configurable为false，writable为true）：

    let empty = {};
    Object.defineProperty(empty,'foo',{
        value: 'baz',
        writable: true
    });
    Object.preventExtensions(empty);
    console.log(Object.isExtensible(empty)); // false
    console.log(Object.isSealed(empty)); // true
    console.log(Object.isFrozen(empty)); // false

非空对象（其属性的configurable为true，writable为false）：

    let empty = {};
    Object.defineProperty(empty,'foo',{
        value: 'baz',
        writable: false,
        configurable: true
    });
    Object.preventExtensions(empty);
    console.log(Object.isExtensible(empty)); // false
    console.log(Object.isSealed(empty)); // false
    console.log(Object.isFrozen(empty)); // false

非空对象（其属性的configurable为false，writable为false）：

    let empty = {};
    Object.defineProperty(empty,'foo',{
        value: 'baz'
    });
    Object.preventExtensions(empty);
    console.log(Object.isExtensible(empty)); // false
    console.log(Object.isSealed(empty)); // true
    console.log(Object.isFrozen(empty)); // true

空对象：

    let empty1 = {};
    console.log(Object.isExtensible(empty1)); // true
    Object.preventExtensions(empty1);
    console.log(Object.isExtensible(empty1)); //false
    console.log(Object.isSealed(empty1)); // true
    console.log(Object.isFrozen(empty1)); // true

15.Object.seal()方法封闭一个对象，阻止添加新属性并将所有现有属性标记为不可配置。当前属性的值只要可写就可以改变

语法：Object.seal(obj)

参数：
obj 将要被密封的对象
返回值：被密封的对象
描述：密封一个对象会让这个对象变的不能添加新属性，且所有已有属性会变的不可配置

空对象：

    let empty = {};
    Object.seal(empt);
    console.log(Object.isExtensible(empty)); // false
    console.log(Object.isSealed(empty)); // true
    console.log(Object.isFrozen(empty)); // true

非空对象：

    let object = {
        foo: 'bar'
    };
    Object.seal(object);
    object.foo = 'baz'; //可编辑
    console.log(object.foo); //baz
    delete object.foo; //TypeError: Cannot delete property 'foo' of #<Object>
    console.log(Object.isExtensible(object)); // false
    console.log(Object.isSealed(object)); // true
    console.log(Object.isFrozen(object)); // false

16.Object.freeze() 方法可以冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。也就是说，这个对象永远是不可变的

语法：Object.freeze(obj)

参数：
obj 要被冻结的对象
返回值：被冻结的对象
描述：被冻结对象自身的所有属性都不可能以任何方式被修改，如果一个属性的值是个对象，则这个对象中的属性是可以修改的，除非它也是个冻结对象

    let object1 = {
        property1: 42
    };
    Object.freeze(object1);
    console.log(Object.isExtensible(object1)); // false
    console.log(Object.isSealed(object1)); // true
    console.log(Object.isFrozen(object1)); // true
    object1.property1 = 33; // TypeError: Cannot assign to read only property 'property1' of object '#<Object>'
    console.log(object1.property1); //42

    let object2 = {
        internal: {}
    };
    Object.freeze(object2);
    object2.internal.a = 'aValue';
    console.log(object2.internal.a); //aValue

17.Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致

语法：Object.entries(obj)

参数：
obj 可以返回其可枚举属性的键值对的对象
返回值：给定对象自身可枚举属性的键值对数组

    const object1 = { foo: 'bar', baz: 42 };
    console.log(Object.entries(object1)); // [ ['foo', 'bar'], ['baz', 42] ]
    // array like object
    const object2 = { 0: 'a', 1: 'b', 2: 'c' };
    console.log(Object.entries(object2)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
    // array like object with random key ordering
    const object3 = { 100: 'a', 2: 'b', 7: 'c' };
    console.log(Object.entries(object3)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

18.Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致

语法：Object.keys(obj)

参数：
obj 要返回其枚举自身属性的对象
返回值：一个表示给定对象的所有可枚举属性的字符串数组

    let arr = ['a', 'b', 'c'];
    console.log(Object.keys(arr)); // ['0', '1', '2']

    // array like object
    let object = { 0: 'a', 1: 'b', 2: 'c' };
    console.log(Object.keys(object)); // ['0', '1', '2']

19.Object.values()方法返回一个给定对象自己的所有可枚举属性值的数组，值的顺序与使用for...in循环的顺序相同

语法：Object.values(obj)

参数：
obj 被返回可枚举属性值的对象
返回值：一个包含对象自身的所有可枚举属性值的数组

    let arr = ['a', 'b', 'c'];
    console.log(Object.values(arr)); // ['a', 'b', 'c']

    // array like object
    let object = { 0: 'a', 1: 'b', 2: 'c' };
    console.log(Object.values(object)); // ['a', 'b', 'c']

三、Object实例方法

1.hasOwnProperty() 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性

语法：obj.hasOwnProperty(prop)

参数：

prop 要检测的属性字符串名称或者 Symbol
返回值：用来判断某个对象是否含有指定的属性的 Boolean

描述：这个方法可以用来检测一个对象是否含有特定的自身属性；和 in 运算符不同，该方法会忽略掉那些从原型链上继承到的属性

    let object = new Object();
    object.prop = 'exists';
    console.log(object.hasOwnProperty('prop'));             // true
    console.log(object.hasOwnProperty('toString'));         // false
    console.log(object.hasOwnProperty('hasOwnProperty'));   // false
    console.log('toString' in object); // true
    console.log('prop' in object); // true
    console.log('hasOwnProperty' in object); // true

2.isPrototypeOf() 方法用于测试一个对象是否存在于另一个对象的原型链上

语法：prototypeObj.isPrototypeOf(object)

参数：

object 在该对象的原型链上搜寻

返回值：Boolean，表示调用对象是否在另一个对象的原型链上

function Foo() {}
function Bar() {}
function Baz() {}

Bar.prototype = Object.create(Foo.prototype);
Baz.prototype = Object.create(Bar.prototype);

let baz = new Baz();

console.log(Baz.prototype.isPrototypeOf(baz)); // true
console.log(Bar.prototype.isPrototypeOf(baz)); // true
console.log(Foo.prototype.isPrototypeOf(baz)); // true
console.log(Object.prototype.isPrototypeOf(baz)); // true

3.propertyIsEnumerable() 方法返回一个布尔值，表示指定的属性是否可枚举

语法：obj.propertyIsEnumerable(prop)

参数：

prop 需要测试的属性名

返回值：用来表示指定的属性名是否可枚举的Boolean

let o = {};
let a = [];
o.prop = 'is enumerable';
a[0] = 'is enumerable';

o.propertyIsEnumerable('prop');   //  返回 true
a.propertyIsEnumerable(0);        // 返回 true

4.toString() 方法返回一个表示该对象的字符串

语法：object.toString()

返回值：表示该对象的字符串

    let object = new Object();
    console.log(object.toString()); //[object Object]
    function Animal(name,age,color,sex) {
        this.name = name;
        this.age = age;
        this.color = color;
        this.sex = sex;
    }
    Animal.prototype.toString = function () {
        let string = this.name + "是一个" + this.age + "岁的" + this.color + "的" + this.sex + "动物";
        return string;
    };
    let animal = new Animal("小可爱",1,"灰色","雌性");
    console.log(animal.toString()); //小可爱是一个1岁的灰色的雌性动物

5.valueOf() 方法返回指定对象的原始值

语法：object.valueOf()
返回值：返回值为该对象的原始值

    function Animal(name,age,color,sex) {
        this.name = name;
        this.age = age;
        this.color = color;
        this.sex = sex;
    }
    let animal = new Animal("小可爱",1,"灰色","雌性");
    console.log(animal.valueOf()); //{name: "小可爱", age: 1, color: "灰色", sex: "雌性"}

琼林玉质

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础对象---Object

一、对象初始化创建对象的两种方法：1.对象初始化器或对象字面量：{[nameValuePair1[, nameValuePair2[, ...nameValuePairN]]]}参数：nameValuePair1, nameValuePair2, ... nameValuePairN 成对的名称（字符串）与值（任何值），其中名称通过冒号与值分隔es2015之后简化了字面...
复制链接

扫一扫

专栏目录