JavaScript 유형 system_javascript 스킬의 Object에 대한 자세한 설명

이전 단어

JavaScript에서는 객체가 왕입니다. Javascript의 거의 모든 것이 객체이거나 객체처럼 작동합니다. 객체를 이해하면 Javascript를 이해하는 것입니다. JavaScript에서 참조 유형은 데이터와 기능을 함께 구성하는 데 사용되는 데이터 구조입니다. 클래스라고도 합니다. 참조 유형은 객체 클래스의 속성과 메서드를 설명하기 때문에 객체 정의라고도 합니다

대부분의 참조 유형 값은 Object 유형의 인스턴스입니다. 또한 Object는 JavaScript에서 가장 일반적으로 사용되는 유형이기도 합니다. 객체 인스턴스에는 많은 기능이 없지만 실제로 애플리케이션에서 데이터를 저장하고 전송하는 데 이상적입니다

객체 생성

객체 유형을 생성하는 방법에는 두 가지가 있습니다

[1]객체 생성자

var person = new Object();
//如果不给构造函数传递参数可以不加括号 var person = new Object;
person.name = 'bai';
person.age = 29; 
//创建无属性的空对象
var cody1 = new Object();
var cody2 = new Object(undefined);
var cody3 = new Object(null);
console.log(typeof cody1,typeof cody2, typeof cody3);//object object object 
//创建string、number、array、function、boolean、regex
console.log(new Object('foo'));
console.log(new Object(1));
console.log(new Object([]));
console.log(new Object(function(){}));
console.log(new Object(true));
console.log(new Object(/\bbt[a-z]+\b/));

[참고] Object() 생성자 자체가 객체이고 생성자는 Function 생성자를 기반으로 생성된 객체입니다

[2]객체 리터럴 사용

Javascript는 대부분의 기본 개체 값을 생성하기 위한 리터럴이라는 단축키를 제공합니다. 리터럴을 사용하면 new 연산자를 사용할 때와 동일한

기본과정

var person = {
name : 'bai',
age : 29,
5 : true
};

[참고] 객체 리터럴에 쉼표를 사용하여 서로 다른 속성을 구분하지만 마지막 속성 뒤에 쉼표를 추가하면 IE7에서 오류가 발생합니다

객체 리터럴 방식을 사용하여 객체를 정의하면 속성 이름이 자동으로 문자열로 변환됩니다.

//同上
var person = {
'name' : 'bai',
'age' : 29,
'5' : true
};

중괄호를 비워 두면 기본 속성과 메서드만 포함하는 객체를 정의할 수 있습니다.

//等价于var person = new Object();
var person = {}; 
[tips]使用对象字面量封装多个可选参数
function displayInfo(args){
var output = '';
if(typeof args.name == 'string'){
output += 'name:' + args.name +'\n';
}
if(typeof args.age == 'number'){
output += 'Age:' + args.age + '\n';
}
console.log(output);
};
displayInfo({
name: 'Nicholas',
age: 29
});
displayInfo({
name: 'match'
});

위의 매개변수 전달 모드는 다수의 선택적 매개변수를 함수에 전달해야 하는 상황에 가장 적합합니다. 일반적으로 명명된 매개변수는 처리하기 쉽지만 여러 개의 선택적 매개변수가 있는 경우 유연성이 떨어질 수 있습니다. 따라서 필수 값에는 형식 매개변수를 사용하고, 여러 선택적 매개변수를 캡슐화하려면 객체 리터럴을 사용하세요

객체 설정

객체 속성에 액세스하는 방법에는 점 표기법이나 대괄호 표기법을 사용하여 객체 속성을 가져오거나 설정하거나 업데이트할 수 있습니다.

대괄호 방법의 두 가지 장점은 변수를 통해 속성에 액세스할 수 있다는 것과 속성 이름이 Javascript의 잘못된 식별자일 수 있다는 것입니다.

[참고] 한자는 변수에 존재할 수 있는데, 한자는 문자와 동등하고 영문자와 동일하게 취급되어 사람으로 쓸 수 있기 때문이다.白 또는 사람['白']

var myObject = {
123:'zero',
class:'foo'
};
console.log(myObject['123'],myObject['class']);//'zero' 'foo'
console.log(myObject.123);//报错

대괄호 안의 값이 문자열이 아닌 유형인 경우 String()을 사용하여 암시적으로 문자열로 변환된 후 문자열 유형인 경우 따옴표가 있는 경우 원래 값이 출력됩니다. 그렇지 않으면 변수로 인식됩니다. 변수가 정의되지 않으면 오류가 보고됩니다

person[0] = 1; //[]中的数字不会报错，而是自动转换成字符串
person[a] = 1; //[]中符合变量命名规则的元素会被当成变量，变量未被定义，而报错
person[''] = 2; //[]中的空字符串不会报错,是实际存在的且可以调用,但不会在控制台右侧的集合中显示
person[undefined 或 null 或 true 或 false] = 4;// 不会报错，而是自动转换成字符串
person['白'] = 6; // 不会报错 

개체 삭제

삭제 연산자를 사용하면 객체에서 속성을 완전히 삭제할 수 있습니다. 삭제는 객체에서 속성을 삭제하는 유일한 방법입니다. 속성을 정의되지 않음 또는 null로 설정하면 객체에서 속성을 삭제하지 않고 속성 값만 변경할 수 있습니다. 삭제는 개체 아래의 데이터만 삭제할 수 있으며, 다른 5가지 기본 유형의 값은 삭제할 수 없습니다.

[참고] delete는 프로토타입 체인에 있는 속성을 삭제하지 않습니다.

var foo = {bar: 'bar'};
delete foo.bar;
console.log('bar' in foo);//false 
var a = 123;
delete a;
console.log(a);//123

전역 상태에서 변수 a를 선언하면 window 객체 아래의 데이터 a와 동일하며, window.a나 a를 통해 a에 값을 할당할 수 있고, window의 값도 할당할 수 있습니다. a와 a는 항상 동일하지만 삭제할 수 없습니다.

var a;
a = 10;
console.log(a,window.a);//10 10
window.a = 20;
console.log(a,window.a);//20 20
delete a ;
console.log(a,window.a);//20 20
delete window.a;
console.log(a,window.a);//20 20

window.b를 사용하여 값을 선언하고 할당하면(b는 window 개체 아래에 선언하는 것과 동일) 삭제할 수 있으며, delete b와 delete window.b를 사용하면 삭제 후 동일한 효과가 나타납니다. console.log(b)는 변수가 존재하지 않는다는 메시지를 표시하고, console.log(window.b)는 정의되지 않은 메시지를 표시합니다

window.b = 10;
console.log(b,window.b);//10 10
delete b;
console.log(b);//报错
console.log(window.b);//undefined 
window.b = 10;
console.log(b,window.b);//10 10
delete window.b;
console.log(b);//报错
console.log(window.b);//undefined 

객체 중첩

객체는 중첩될 수 있지만 값은 레이어별로 얻어야 ​​합니다

var student = {
name : {
chinese : 1,
englisth : 2
},
sex : 1,
age : 26
}

[참고] 값은 Student.name.chinese와 같이 레이어별로만 가져올 수 있으며, 이름과 동일한 레벨 아래에 Chinese라는 요소가 있을 수도 있으므로, Student.chinese를 직접 사용할 수 없습니다.

var object1 = {
object1_1:{
object1_1_1:{foo: 'bar'},
object1_1_2:{}
},
object1_2:{
object1_2_1:{},
object1_2_2:{}
}
};
console.log(object1.object1_1.object1_1_1.foo);//bar

实例方法

　　constructor:保存着用于创建当前对象的函数
　　hasOwnProperty(propertyName):用于检查给定的属性在当前对象实例中(而不是在实例的原型中)是否存在。其中，propertyName必须以字符串形式指定

　　isPrototypeOf(object):用于检查传入的对象是否是传入对象的原型

　　propertyIsEnumerable(propertyName):用于检查给定的属性是否能够使用for-in语句来枚举。其中，propertyName必须以字符串形式指定

　　toLocaleString():返回对象的字符串表示，该字符串与执行环境的地区对应

　　toString():返回对象的字符串表示

　　valueOf():返回对象的字符串、数值或布尔值表示，通常与toString()方法的返回值相同

var myObject = {
mark: true
};
console.log(myObject.constructor);//function Object(){}
console.log(myObject.hasOwnProperty('mark'));//true
console.log(Object.prototype.isPrototypeOf(myObject));//true
console.log(myObject.propertyIsEnumerable('mark'));//true
console.log(myObject.toLocaleString());//[object Object]
console.log(myObject.toString());//[object Object]
console.log(typeof myObject.valueOf(),myObject.valueOf());// object Object{mark:true}

小结：

Object类型

　　对象其实就是一组数据和功能的集合。对象可以通过执行new操作符后跟要创建的对象类型的名称来创建。而创建Object类型的实例并为其添加属性和（或）方法，就可以创建自定义对象。

var o = new Object(); 

　　Object的每个实例都具有下列属性和方法： 

　　● constructor——保存着用于创建当前对象的函数
 　　● hasOwnProperty(propertyName)——用于检查给定的属性在当前对象实例中（而不是在实例的原型中）是否存在。其中，作为参数的属性名(propertyName)必须以字符串形式指定（例如：o.hasOwnProperty("name")）
 　　● isPrototypeOf(object)——用于检查传入的对象是否是另一个对象的原型
 　　● propertyIsEnumerable(propertyName)——用于检查给定的属性是否能够使用for-in语句来枚举 
　　● toString()——返回对象的字符串表示
 　　● valueOf()——返回对象的字符串、数值或布尔值表示。通常与toString()方法的返回值相同。