2025年《JS学习》Object对象

大家好，我是讯享网，很高兴认识大家。

介绍

JavaScript中的对象其实就是一组数据和功能的集合。

通过new操作符后跟要创建的对象类型的名称来创建。

new：

从指定模具中复刻出一个一模一样的空间，此空间与外界隔离，视为实例。

由上可得new运算符就是进行创建空间与外界隔离后得到实例的一个过程。

//创建一个Object对象 var o = new Object();

讯享网

这里的Object相当于祖宗一样，创建Object的实例并没有什么用处。

特点：

每个Object类型的实例共有的属性和方法：

constructor：保存着用于创建当前对象的函数。
hasOwnProperty：用于检测给定的属性在当前对象的实例中是否存在。
isPrototypeOf ：用于检查传入的对象是否是当前对象的原型
propertyIsEnumerble ：用于检查给定属性能否使用for-in来枚举
toLocaleString() : 返回对象的字符串表示。
toString() : 返回对象的字符串表示。
valueOf() : 返回对象的字符串，数值，或布尔表示。通常和toString() 返回的值相同。

JavaScript中几乎所有的事务都是对象，比如我们的函数。

Function

在javascript中，函数（Function）是一段被封装好的代码，可以被反复使用(调用);

函数可以是一个值、一个对象、一类数据，还可以是一个表达式，因此函数可以赋值、可以运算、可以拥有属性和方法，甚至可以临时存储值、构造实例等.

讯享网function 函数名(参数1,参数2,参数){ 
    //注意，参数列表在函数中为局部变量 let a = 50; let b = 100; return a + b;// return 代表终止执行并将 a+b 计算结果返回给调用者。 a = 100; // 因为return的原因，该行代码不会执行。 }

在JavaScript中，对象内储存的内容其实就是以键值对的方式存在

如：{ A：“123” };

这里值得一提的是，我们对象中的每一个属性包括对象本身，都会有三个特性，如下所示：

属性特性：

讯享网

Object 静态方法

create 创建一个对象

const obj = Object.create({ 
   a:1}, { 
   b: { 
   value: 2}}) //第一个参数为对象，对象为函数调用之后返回新对象的原型对象，第二个参数为对象本身的实例方法（默认不能修改,不能枚举） obj.__proto__.a === 1 // true  obj.b = 3; console.log(obj.b) // 2 //创建一个可写的,可枚举的,可配置的属性p obj2 = Object.create({ 
   }, { 
    p: { 
    value: 2, // 属性值 writable: true, // 是否可以重写值 enumerable: true, //是否可枚举 configurable: true //是否可以修改以上几项配置 } }); obj2.p = 3; console.log(obj2.p) // 3 //注意： enumerable 会影响以下 //for…in 遍历包括对象原型上属性 //Object.keys() 只能遍历自身属性 //JSON.stringify 只能序列化自身属性

Object.defineProperty(object, prop, descriptor)

定义对象属性

讯享网// 添加数据属性 var obj = { 
   }; // 1.添加一个数据属性 Object.defineProperty(obj, "newDataProperty", { 
    value: 101, writable: true, // 是否可以重写值 enumerable: true, // 是否可枚举 configurable: true // 是否可以修改以上几项配置 }); console.log(obj); // { newDataProperty: 101 } console.log(obj.newDataProperty); // 101 // 2.修改数据属性 Object.defineProperty(obj, "newDataProperty", { 
    writable:false // 是否可以重写值 }); obj.newDataProperty = 666; console.log(obj.newDataProperty); // 因为被定义不可被重写了 所以输出101 //添加访问器属性 var obj = { 
   }; Object.defineProperty(obj, "newAccessorProperty", { 
    set: function (x) { 
    // 只有一个参数 console.log("调用了属性 newAccessorProperty 的 set 方法") this.otherProperty = x; }, get: function () { 
    // 没有参数 console.log("调用了属性 newAccessorProperty 的 get 方法") return this.otherProperty; }, enumerable: true, configurable: true }); // 注意： // 1.第一个参数必须为对象 // 2.descriptor 不能同时具有 （value 或 writable 特性）（get 或 set 特性）。 // 3.configurable 为false 时，不能重新修改装饰器 obj.newAccessorProperty; // 调用了属性 newAccessorProperty 的 get 方法 obj.newAccessorProperty = 123; // 调用了属性 newAccessorProperty 的 set 方法

Object.defineProperties(object, {prop1 : descriptor1, prop2 : descriptor2, …)

主要功能是用来定义或修改内部属性

var obj = { 
   }; Object.defineProperties(obj, { 
    'property1': { 
    value: true, writable: true }, 'property2': { 
    value: 'Hello', writable: false } // etc. etc. });

Object.keys

遍历可枚举的属性，只包含对象本身可枚举属性名称

讯享网let arr = ["a", "b", "c"]; let obj = { 
    foo: "bar", baz: 42 }; let ArrayLike = { 
    0 : "a", 1 : "b", 2 : "c"}; console.log(Object.keys(arr)); // [ '0', '1', '2' ] console.log(Object.keys(obj)); // [ 'foo', 'baz' ] console.log(Object.keys(ArrayLike)); // [ '0', '1', '2' ] var objj = { 
   }; Object.defineProperties(objj,{ 
    'propertyl':{ 
    value:true, enumerable:true, writable:true }, 'property2':{ 
    value:'hello', writable:false } }) console.log(Object.keys(objj)) // 这样就有了 ['propertyl']

Object.values

遍历可枚举的属性值，只包含对象本身可枚举属性值

let arr = ["a", "b", "c"]; let obj = { 
    foo: "bar", baz: 42 }; let ArrayLike = { 
    0 : "a", 1 : "b", 2 : "c"}; console.log(Object.values(arr)) // [ 'a', 'b', 'c' ] console.log(Object.values(obj)) // [ 'bar', 42 ] console.log(Object.values(ArrayLike)) // [ 'a', 'b', 'c' ] var objj = { 
   }; Object.defineProperties(objj,{ 
    'propertyl':{ 
    value:true, enumerable:true, writable:true }, 'property2':{ 
    value:'hello', enumerable:true, writable:false } }) console.log(Object.values(objj)) // 这样就有了 [true, 'hello']

Object.getPrototypeOf

获取指定对象的原型（内部[[Prototype]]属性的值）

讯享网const prototype1 = { 
   }; const object1 = Object.create(prototype1); console.log(Object.getPrototypeOf(object1) === prototype1); // true //注意：Object.getPrototypeOf(Object) 不是 Object.prototype console.log(Object.getPrototypeOf( Object ) === Function.prototype); // true var objj = { 
   }; Object.defineProperties(objj,{ 
    'propertyl':{ 
    value:true, enumerable:true, writable:true }, 'property2':{ 
    value:'hello', enumerable:true, writable:false } }) //Object.getPrototypeOf(objj) console.log(Object.getPrototypeOf(objj).constructor.name)// Object

Object.setPrototypeOf

设置一个指定的对象的原型

const obj = { 
   a: 1}, proto = { 
   b:2} Object.setPrototypeOf(obj, proto) console.log(obj.__proto__ === proto);//true console.log(obj);//{ a: 1 } var objj = { 
   }; Object.defineProperties(objj,{ 
    'propertyl':{ 
    value:true, enumerable:true, writable:true }, 'property2':{ 
    value:'hello', enumerable:true, writable:false } }) Object.setPrototypeOf(objj,Array)

Object.getOwnPropertyNames

与keys相似，但包含遍历包含不可枚举属性

讯享网var my_obj = Object.create({ 
   }, { 
    getFoo: { 
    value: function() { 
    return this.foo; }, enumerable: false } }); my_obj.foo = 1; console.log(Object.getOwnPropertyNames(my_obj).sort()); // [ 'foo', 'getFoo' ] var objj = { 
   }; Object.defineProperties(objj,{ 
    'propertyl':{ 
    value:true, enumerable:false, writable:true }, 'property2':{ 
    value:'hello', enumerable:false, writable:false } }) Object.keys(objj); //输出 [] 没值 Object.getOwnPropertyNames(objj) // 输出 ['propertyl', 'property2']

Object.getOwnPropertyDescriptor

获取该属性的描述对象

let obj = { 
    foo: 123 }; console.log(Object.getOwnPropertyDescriptor(obj, 'foo')); // { value: 123, writable: true, enumerable: true, configurable: true } var objj = { 
   }; Object.defineProperties(objj,{ 
    'propertyl':{ 
    value:true, enumerable:false, writable:true }, 'property2':{ 
    value:'hello', enumerable:false, writable:false } }) Object.getOwnPropertyDescriptor(objj,'propertyl');// {value: true, writable: true, enumerable: false, configurable: false} var obj6 = { 
   }; Object.defineProperties(obj6,{ 
    'propertyl':{ 
    value:true, enumerable:false, writable:true }, 'property2':{ 
    value:'hello', enumerable:false, writable:false } }) Object.defineProperty(obj6, "newAccessorProperty", { 
    set: function (x) { 
    // 只有一个参数 console.log("调用了属性 newAccessorProperty 的 set 方法") this.otherProperty = x; }, get: function () { 
    // 没有参数 console.log("调用了属性 newAccessorProperty 的 get 方法") return this.otherProperty; }, enumerable: true, configurable: true }); //Object.getOwnPropertyDescriptor(obj6,'newAccessorProperty')

Object.getOwnPropertyDescriptors

返回指定对象所有自身属性（非继承属性）的描述对象

讯享网const obj = { 
    foo: 123, get bar() { 
    return 'abc' } }; console.dir(Object.getOwnPropertyDescriptors(obj)) // { 
    // foo: { value: 123, writable: true, enumerable: true, configurable: true }, // bar: { 
    // get: [Function: get bar], // set: undefined, // enumerable: true, // configurable: true // } // } //使用场景： //Object.assign() 方法只能拷贝源对象的可枚举的自身属性，同时拷贝时无法拷贝属性的特性，而且访问器属性会被转换成数据属性，也无法拷贝源对象的原型 //Object.create() 方法可以实现上面说的这些，配合getPrototypeOf，以及getOwnPropertyDescriptors实现全面浅拷贝 var aa = Object.create( Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj) ); console.log(aa) // { foo: 123, bar: [Getter] }

Object.is

它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致

console.log(Object.is('foo', 'foo')); // true console.log(Object.is({ 
   }, { 
   })); // false // 不同于 === 之处 console.log(+0 === -0) //true console.log(NaN === NaN); // false console.log(Object.is(+0, -0)); // false console.log(Object.is(NaN, NaN)); // true

Object.hasOwnProperty

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

讯享网let o = { 
   a: 1 } console.log(o.hasOwnProperty('a'));//true console.log(o.hasOwnProperty('b'));//false 对象自身没有属性b console.log(o.hasOwnProperty('toString'));//false 不能检测对象原型链上的属性 //如何遍历一个对象的所有自身属性，例子： var buz = { 
    fog: 'stack' }; for (var name in buz) { 
    if (buz.hasOwnProperty(name)) { 
    console.log("this is fog (" + name + ") for sure. Value: " + buz[name]); } else { 
    console.log(name); // toString or something else } } var obj6 = { 
   }; Object.defineProperties(obj6,{ 
    'propertyl':{ 
    value:true, enumerable:false, writable:true }, 'property2':{ 
    value:'hello', enumerable:false, writable:false } }) Object.defineProperty(obj6, "newAccessorProperty", { 
    set: function (x) { 
    // 只有一个参数 console.log("调用了属性 newAccessorProperty 的 set 方法") this.otherProperty = x; }, get: function () { 
    // 没有参数 console.log("调用了属性 newAccessorProperty 的 get 方法") return this.otherProperty; }, enumerable: true, configurable: true }); obj6.hasOwnProperty('newAccessorProperty'); // true obj6.hasOwnProperty(''); // false

Object.isPrototypeOf

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

function Foo() { 
   } function Bar() { 
   } function Baz() { 
   } Bar.prototype = Object.create(Foo.prototype); Baz.prototype = Object.create(Bar.prototype); var 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

Object.getOwnPropertySymbols

返回一个给定对象自身的所有 Symbol 属性的数组。

讯享网var obj = { 
   }; var a = Symbol("a"); var b = Symbol.for("b"); obj[a] = "localSymbol"; obj[b] = "globalSymbol"; var objectSymbols = Object.getOwnPropertySymbols(obj); console.log(objectSymbols.length); // 2 console.log(objectSymbols) // [ Symbol(a), Symbol(b) ] console.log(objectSymbols[0]) // Symbol(a)

Object上还含有三个更改对象指向的方法，这个我们放在作用域处进行讲解。