JavaScript의 Object 객체를 자세히 설명하는 샘플 코드

Object는 JavaScript에서 자주 사용하는 유형으로 JS의 모든 객체는 Object 객체에서 상속됩니다. 일반적으로 Object 객체를 사용하여 데이터를 저장하고 다른 많은 기능을 사용하지 않지만 실제로 Object 객체에는 유용한 속성과 메소드가 많이 포함되어 있으며 특히 ES5에서 추가된 메소드가 포함되어 있습니다. Object의 일반적인 방법과 응용 프로그램을 자세히 설명하는 기본 소개입니다.

기본 소개

객체 생성

먼저 객체는 유사한 데이터의 집합이라는 것을 모두 알고 있습니다. 그리고 기능을 사용하여 실제 세계의 객체를 시뮬레이션합니다. Javascript에서는 일반적으로 객체를 생성하는 두 가지 방법, 즉 생성자와 객체 리터럴이 있습니다.

새 생성자 메서드

var person = new Object();
person.name = "狼狼的蓝胖子";
person.age = 25;

이 메서드는 new 키워드와 Object 생성자를 사용한 다음 개체 인스턴스에 다양한 속성을 동적으로 추가합니다. 이 방법은 상대적으로 번거롭기 때문에 일반적으로 객체 리터럴을 사용하여 객체를 생성하는 것이 좋습니다.

객체 리터럴

객체 리터럴은 키/값 형식으로 직접 객체를 생성하므로 간단하고 편리합니다.

var person = {
    name: “狼狼的蓝胖子”,
    age: 25
};

이 방법은 객체의 속성을 중괄호로 직접 묶고 키/값을 사용하여 객체 속성을 생성하며 각 속성을 쉼표로 구분합니다.
참고: 마지막 속성인 경우 그 뒤에 쉼표를 추가하지 마세요. 일부 이전 브라우저에서는 오류가 보고될 수 있습니다.

객체 인스턴스의 속성 및 메소드

객체 인스턴스를 생성하는 데 어떤 메소드를 사용하든 인스턴스는 다음과 같은 속성과 메소드를 가지게 되는데, 이에 대해 아래에서 하나씩 설명하겠습니다.

생성자 속성

생성자 속성은 현재 객체를 저장하는 생성자입니다. 이전 예에서 생성자는 Object 메서드를 저장합니다.

var obj1 = new Object();
obj1.id = "obj1";
var obj2 = {
    "id": "obj2"
};

console.log(obj1.constructor);//function Object(){}
console.log(obj2.constructor);//function Object(){}

hasOwnProperty(propertyName) 메소드

hasOwnProperty 메소드는 속성 이름을 나타내고 해당 속성이 현재 객체 인스턴스에 있는지 확인하는 데 사용되는 문자열 매개변수를 받습니다. . 객체의 프로토타입 체인이 아닌. 다음 예를 살펴보겠습니다.

var arr = [];        
console.log(arr.hasOwnProperty("length"));//true
console.log(arr.hasOwnProperty("hasOwnProperty"));//false

이 예에서는 먼저 배열 객체의 인스턴스 arr을 정의하여 배열 객체가 실제로 프로토타입 체인을 통해 Object 객체를 상속받은 다음 자체 속성 중 일부에 대해 hasOwnProperty 메서드를 사용하여 length가 arr의 자체 속성이고 hasOwnProperty가 프로토타입 체인의 속성인지 확인합니다.

hasOwnProperty 메소드를 for..in과 결합하여 객체 자체의 키를 얻을 수 있습니다.

isPrototypeOf(Object) 메소드

isPrototype 메소드는 객체를 전달받아 현재 객체가 전달된 매개변수 객체의 프로토타입 체인에 있는지 확인하는 데 사용됩니다. 조금 추상적으로 말하면 코드를 살펴보겠습니다.

function MyObject() {}
var obj = new MyObject();
console.log(Object.prototype.isPrototypeOf(obj));

우리는 MyObject가 Object 객체로부터 상속받는다는 것을 알고 있으며, JS에서는 상속이 프로토타입을 통해 구현되므로 Object의 프로토타입은 MyObject 객체 인스턴스의 프로토타입 체인에 있어야 합니다.

propertyIsEnumerable(prototypeName) 메서드

prototypeIsEnumerable은 지정된 속성을 for..in 문으로 열거할 수 있는지 여부를 결정하는 데 사용됩니다. 다음 코드를 보세요:

var obj = {
    name: "objName"
}  
for (var i in obj) {
    console.log(i);
}

이 코드를 실행하면 "name"이라는 문자열이 출력됩니다. 이는 obj의 name 속성이 for...in 문을 통해 얻을 수 있다는 의미입니다. hasOwnPrototype 등과 같은 생성자와 같은 obj의 많은 속성이 출력되지 않습니다. 이는 이러한 속성이 for...in으로 열거될 수 없고 propertyIsEnumerable 메서드를 통해 얻을 수 있음을 나타냅니다.

console.log(obj.propertyIsEnumerable("constructor"));//false

"생성자"를 열거할 수 있는지 확인하고, 열거할 수 없음을 나타내려면 false를 출력합니다.

toLocaleString() 메소드

toLocalString 메소드는 코드의 실행 환경과 관련된 객체의 문자열 표현을 반환합니다.

var obj = {};
console.log(obj.toLocaleString());//[object Object]  

var date = new Date();
console.log(date.toLocaleString());//2016/2/28 下午1:39:27

toString() 메소드

toString은 객체의 문자열 표현을 반환하는 데 사용됩니다.

var obj = {};
console.log(obj.toString());//[object Object]

var date = new Date();
console.log(date.toString());//Sun Feb 28 2016 13:40:36 GMT+0800 (中国标准时间)

valueOf() 메서드

valueOf 메서드는 개체의 원래 값을 반환합니다. 개체의 원래 값은 문자열, 숫자 값 또는 부울 값 등일 수 있습니다. 특정 개체.

var obj = {
    name: "obj"
};
console.log(obj.valueOf());//Object {name: "obj"}

var arr = [1];
console.log(arr.valueOf());//[1]

var date = new Date();
console.log(date.valueOf());//1456638436303

코드에 표시된 것처럼 세 개의 서로 다른 객체 인스턴스가 valueOf를 호출하여 서로 다른 데이터를 반환합니다.

속성 유형

Javascript에는 데이터 속성과 접근자 속성이라는 두 가지 속성이 있는지 살펴보겠습니다.

데이터 속성

데이터 속성은 우리가 일반적으로 객체를 정의할 때 할당하는 속성으로 이해될 수 있으며, 읽고 쓸 수 있습니다. 그러나 ES5에서는 속성의 다양한 특성을 설명하는 데 사용되는 일부 속성을 정의합니다. 속성은 내부 값이므로 직접 액세스할 수 없습니다. 속성은 [[Enumerable]]과 같이 두 개의 대괄호로 표시됩니다. 속성의 특성에는 몇 가지 기본값이 있습니다. 속성의 기본값을 수정하려면 ES5에서 정의한 새로운 메소드인 Object.defineProperty 메소드를 사용하여 수정해야 합니다.

데이터 속성에는 그 특성을 설명하는 4가지 기능이 있습니다. 각 기능을 아래에서 차례로 설명합니다.

(1) [[Configurable]]: 이 기능은 다음을 통해 삭제할 수 있는지 여부를 나타냅니다. 삭제 연산자 속성을 삭제합니다. 기본값은 true입니다.

var obj = {};
obj.name = "myname";

delete obj.name;
console.log(obj.name);//undefined

이 코드는 삭제를 통해 obj의 name 속성을 삭제한 후 다시 name 속성에 접근할 수 없는 코드입니다.

我们通过Object.defineProperty方法来修改[[Configurable]]特性。

var obj = {};
obj.name = "myname";
Object.defineProperty(obj, "name", {
    configurable: false
})                

delete obj.name;
console.log(obj.name);//myname

通过将configurable特性设置成false之后，delete就无法删除name属性了，如果在严格模式下，使用delete去删除就会报错。

（2）[[Enumerable]]：表示是否能够通过for…in语句来枚举出属性，默认是true

我们来看看前面的例子：

var obj = {
    name: "objName"
}  
for (var i in obj) {
    console.log(i);//name
}

这段代码只输出了name属性，我们来将constructor属性的[[Enumerable]]设置为true试试。

var obj = {
        name: "objName"
}
Object.defineProperty(obj, "constructor", {
    enumerable: true
})

for (var i in obj) {
    console.log(i);//name,constructor
}
console.log(obj.propertyIsEnumerable("constructor"));//true

这段代码中，for…in循环得到了name和constructor两个属性，而通过propertyIsEnumerable方法来判断constructor也返回了true。

（3）[[Writable]]：表示属性值是否可以修改，默认为true
如果[[Writable]]被设置成false，尝试修改时将没有效果，在严格模式下会报错

（4）[[Value]]：表示属性的值，默认为undefined

我们通过一个简单的例子来看看这两个特性：

var obj = {
    name: "name"
};
console.log(obj.name);//name        

Object.defineProperty(obj, "name", {
    value: "newValue",
    writable: false
})
console.log(obj.name);//newValue

obj.name = "oldValue";
console.log(obj.name);//newValue

我们首先定义了obj对象的name属性值为“name”，然后通过defineProperty方法来修改值，并且将其设置为不可修改的。接着我们再修改name属性的值，可以发现修改无效。

如果我们通过defineProperty来修改name属性的值，是否可以修改呢？答案是可以的：

Object.defineProperty(obj, "name", {
    value: "oldValue"
})
console.log(obj.name); //oldValue

访问器属性

访问器属性有点类似于C#中的属性，和数据属性的区别在于，它没有数据属性的[[Writable]]和[[Value]]两个特性，而是拥有一对getter和setter函数。

[[Get]]：读取属性时调用的函数，默认是undefined
[[Set]]：设置属性时调用的函数，默认是undefined

getter和setter是一个很有用的东西，假设有两个属性，其中第二个属性值会随着第一个属性值的变化而变化。这种场景在我们平时的编码中起始是非常常见的。在之前的做法中，我们往往要去手动修改第二个属性的值，那现在我们就可以通过get和set函数来解决这个问题。看下面这个例子：

var person = {
    age: 10
}

Object.defineProperty(person, "type", {
    get: function () {
        if (person.age > 17) {
            return "成人";
        }
        return "小孩";
    }
})

console.log(person.type);//小孩

person.age = 18;
console.log(person.type);//成人

通过修改age的值，type的值也会相应的修改，这样我们就不用再手动的去修改type的值了。

下面这种方式也是可以实现同样的效果：

var person = {
    _age: 10,
    type: "小孩"
} 

Object.defineProperty(person, "age", {
    get: function () {
        return this._age;
    },
    set: function (newValue) {
        this._age = newValue;
        this.type = newValue > 17 ? "成人" : "小孩";
    }
})
console.log(person.type);

person.age = 18;
console.log(person.type);

关于访问器属性，有几点要注意：

1、严格模式下，必须同时设置get和set
2、非严格模式下，可以只设置其中一个，如果只设置get，则属性是只读的，如果只设置set，属性则无法读取
3、Object.defineProperty是ES5中的新方法，IE9（IE8部分实现，只有dom对象才支持）以下浏览器不支持，一些旧的浏览器可以通过非标准方法defineGetter()和defineSetter()来设置，这里就不说明了，有兴趣的同学可以查找相关资料。

特性操作的相关方法

ES5提供了一些读取或操作属性特性的方法，前面用到的Object.defineProperty就是其中之一。我总结了一些比较常用的方法如下：

（1）Object.defineProperty

定义一个对象的属性，这个方法前面我们已经用到多次，简单说说其用法。

Object.defineProperty(obj,propName,descriptor);

defineProperty有点类似于定于在Object上的静态方法，通过Object直接调用，它接收3个参数：
obj：需要定义属性的对象
propNane：需要被定义的属性名称
defineProperty：属性描述符，包含一些属性的特性定义

例子如下：

var obj = {};
Object.defineProperty(obj, "name", {
    value: "name",
    configurable: true,
    writable: true,
    enumerable: true
});

（2）Object.defineProperties

和defineProperty类似，是用来定义对象属性的，不同的是它可以用来同时定义多个属性，我们通过命名也可以看出来，用法如下：

var obj = {};
Object.defineProperty(obj, {
    "name": {
        value: "name",
        configurable: true,
        writable: true,
        enumerable: true
    },
    "age": {
        value: 20 
    }
});

（3）Object.getOwnPropertyDescriptor

ES5中还提供了一个读取特性值的方法，该方法接收对象及其属性名作为两个参数，返回一个对象，根据属性类型的不同，返回对象会包含不同的值。

var person = {
    _age: 10,
    type: "小孩"
}
Object.defineProperty(person, "age", {
    get: function () {
        return this._age;
    },
    set: function (newValue) {
        this._age = newValue;
        this.type = newValue > 17 ? "成人" : "小孩";
    }
})

console.log(Object.getOwnPropertyDescriptor(person, "type"));//Object {value: "成人", writable: true, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptor(person, "age")); //Object {enumerable: false, configurable: false, get: function(),set: function ()}

Object的方法

在ES5中，Object对象上新增了一批方法，这些方法可以直接通过Object进行访问，前面用到的defineProperty就是新增的方法之一。除此之外还有很多方法，我将其总结归纳如下：

对象创建型方法

Object.create(proto, [propertiesObject])

在前面我们提到，创建一个对象有两种方法：构造函数和对象字面量。

这两种方法有一个缺点就是：如果要创建多个对象，写起来很繁琐，所以后来就有了一种创建自定义构造函数的方法来创建对象，如下所示：

function Person(name, age) {
    this.name = name;
    this.age = age;
}

var person = new Person("Jack", 15);

这种方式可以很方便的创建多个同样的对象，也是目前比较常用的方法。

ES5提供的Object.create方法也是一个创建对象的方法，这个方法允许为创建的对象选择原型对象，不需要定义一个构造函数。用法如下：

var obj = Object.create(Object.prototype, { 
    name: {
        value: "Jack"
    }
})
console.log(obj.name);//Jack

这个方法接收的第一个参数作为被创建对象的原型，第二个参数是对象的属性。注意：在这个例子中，name属性是无法被修改的，因为它没有设置writable特性，默认则为false。

个人看法：Object.create这种创建对象的方式略显繁琐，除非是需要修改属性的特性，否则不建议使用这种方式创建对象。

属性获取型方法

Object.keys

Object.keys是用来获取给定对象的所有可枚举的自身属性的属性名，它返回一个数组。

function Parent() {
    this.lastName = "Black"
}
function Child(firstName) {
    this.firstName = firstName;
}
Child.prototype = new Parent();

var son = new Child("Jack");
console.log(Object.keys(son));//["firstName"]

代码中返回了firstName，并没有返回从prototype继承而来的lastName和不可枚举的相关属性。

在一些旧的浏览器中，我们可以使用hasOwnProperty和for…in来达到类似的效果。

Object.keys = Object.keys ||
    function (obj) {
        var keys = [];
        for (var key in obj) {
            if (obj.hasOwnProperty(key)) {
                keys.push(key);
            }
        }
        return keys;
    }

Object.getOwnPropertyNames()

getOwnPropertyNames用来获取对象自身的所有属性，包括可枚举和不可枚举的所有属性，如下所示：

function Parent() {
    this.lastName = "Black"
}
function Child(firstName) {
    this.firstName = firstName;
}
Child.prototype = new Parent();

var son = new Child("Jack");
Object.defineProperty(son, "age", {
    enumerable: false
})
console.log(Object.keys(son));//["firstName"]  
console.log(Object.getOwnPropertyNames(son));//["firstName", "age"]

我们定义给son对象定义了一个不可枚举的属性age，然后通过keys和getOwnPropertyNames两个方法来获取属性列表，能明显看出了两者区别。

属性特性型方法

这个主要是前面提到的三个方法：defineProperty，defineProperties和getOwnPropertyDescriptor三个方法

对象限制型方法

ES5中提供了一系列限制对象被修改的方法，用来防止被某些对象被无意间修改导致的错误。每种限制类型包含一个判断方法和一个设置方法。

阻止对象扩展

Object.preventExtensions()用来限制对象的扩展，设置之后，对象将无法添加新属性，用法如下：

Object.preventExtensions(obj);

该方法接收一个要被设置成无法扩展的对象作为参数，需要注意两点：

1、对象的属性不可用扩展，但是已存在的属性可以被删除
2、无法添加新属性指的是无法在自身上添加属性，如果是在对象的原型上，还是可以添加属性的。

function Person(name) {
    this.name = name;
}
var person = new Person("Jack");
Object.preventExtensions(person);

delete person.name;
console.log(person.name);//undefined

Person.prototype.age = 15;
console.log(person.age);//15

Object.isExtensible方法用来判断一个对象是否可扩展，默认情况是true

将对象密封

Object.seal可以密封一个对象并返回被密封的对象。

密封对象无法添加或删除已有属性，也无法修改属性的enumerable，writable，configurable，但是可以修改属性值。

function Person(name) {
    this.name = name;
}
var person = new Person("Jack");
Object.seal(person);
delete person.name;
console.log(person.name);//Jack

将对象密封后，使用delete删除对象属性，还是可以访问得到属性。

通过Object.isSealed可以用来判断一个对象是否被密封了。

冻结对象

Object.freeze方法用来冻结一个对象，被冻结的对象将无法添加，修改，删除属性值，也无法修改属性的特性值，即这个对象无法被修改。

function Person(name) {
    this.name = name;
}
var person = new Person("Jack");
Object.freeze(person);

delete person.name;
console.log(person.name);//Jack

Person.prototype.age = 15;
console.log(person.age);//15

分析上面的代码我们可以发现，被冻结的对象无法删除自身的属性，但是通过其原型对象还是可以新增属性的。

通过Object.isFrozen可以用来判断一个对象是否被冻结了。

可以发现：这三个限制对象的方法的限制程度是依次上升的。

总结

Object虽说是一个我们平时开发中最经常用到的对象，但是它的很多功能还没有被我们挖掘出来。本文首先介绍了Object的基本使用，接着介绍了一些比较少使用到的属性特性，最后分析了一些比较常用的方法，尤其是ES5中提供的新方法。欢迎大家交流！！

위 내용은 JavaScript의 Object 객체를 자세히 설명하는 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!