집 > 기사 > 웹 프론트엔드 > js의 객체 지향 및 객체 유형에 대한 간략한 소개(코드 포함)

js의 객체 지향 및 객체 유형에 대한 간략한 소개(코드 포함)

不言원래의: 2018-08-15 13:42:481455검색

이 기사는 js의 객체 지향 및 객체 유형에 대한 간략한 소개를 제공합니다. 이는 특정 참조 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

객체 지향

객체 지향 프로그래밍은 객체 지향 프로그래밍, 줄여서 OOP를 의미합니다. 객체 지향 프로그래밍은 추상적인 방법을 사용하여 현실 세계를 기반으로 모델을 만드는 프로그래밍 방법입니다.
객체 지향 프로그래밍은 일련의 객체를 사용하여 서로 협력하는 소프트웨어 설계로 볼 수 있습니다. 객체지향 프로그래밍의 세 가지 주요 특징은 캡슐화, 상속, 다형성입니다.

Encapsulation

소위 캡슐화란 실제 실행 원리를 모르고 요구 사항에 따라 사용하여 해당 결과를 얻는 것입니다.
캡슐화는 주로 두 부분으로 구성된 객체에 포함된 (캡슐화된) 콘텐츠를 설명하는 데 사용됩니다.

관련 데이터(속성을 저장하는 데 사용됨)
이 데이터를 기반으로 수행할 수 있는 작업

상속 상속이란 일반적으로 클래스 간의 관계를 말합니다. 두 클래스에 동일한 속성이나 메서드가 있는 경우 동일한 속성이나 메서드를 다시 정의하지 않고도 한 클래스가 다른 클래스를 상속할 수 있습니다.
하나 이상의 클래스의 특수 버전을 생성하는 것을 상속이라고 합니다(JavaScript는 단일 상속만 지원합니다). 생성된 클래스의 특수 버전을 일반적으로 하위 클래스라고 하며, 추가 클래스를 일반적으로 부모 클래스라고 합니다.

다형성

다른 개체가 동일한 이름을 가진 메서드를 정의할 수 있으며, 메서드는 해당 개체가 위치한 개체에 작용합니다. 동일한 메소드 호출을 통해 서로 다른 객체가 자신의 동작을 구현하는 능력을 다형성이라고 합니다.

Constructor

생성자 또는 개체 템플릿이라고도 하는 생성자는 개체를 인스턴스화할 때 호출되는 메서드입니다. 함수는 JavaScript에서 생성자로 사용될 수 있습니다.

/*  创建构造函数->用于创建对象
*    function 构造函数名称()｛
*       this.属性名 = 属性值
*       this.方法名 = function()｛
*           方法体
*           ｝
*     ｝
      this关键字指代利用当前构造函数创建的对象*/
function Dog() {//这是构造函数，构造函数的属性和方法使用this关键字
    this.name=function () {
        console.log('哈士奇')
    }
}

/*   利用构造函数创建对象*/
var dog = new Dog();
console.log(dog);

객체 유형

속성 설명자

JavaScript는 객체의 값을 설명하고 해당 속성의 쓰기 가능, 구성 가능, 삭제 가능, 제거 가능 열거형 등의 동작을 제어하는 내부 데이터 구조를 제공합니다. 데이터 구조를 속성 설명자라고 합니다.
현재 객체에 존재하는 속성 설명자에는 데이터 설명자와 액세스 설명자의 두 가지 주요 형태가 있습니다.

데이터 설명자

데이터 설명자는 쓸 수 있거나 쓸 수 없는 값을 가진 속성입니다. 데이터 설명자에는 다음과 같은 선택적 키 값이 있습니다.

value: 이 속성에 해당하는 값입니다. 유효한 JavaScript 값일 수 있습니다. 기본값은 정의되지 않았습니다.
writable: 속성의 쓰기 가능 여부가 true인 경우에만 할당 연산자로 값을 변경할 수 있습니다. 기본값은 거짓입니다.
configurable: 속성의 configurable이 true인 경우에만 속성 설명자를 변경할 수 있으며, 해당 개체에서 속성을 삭제할 수도 있습니다. 기본값은 거짓입니다.
enumerable: 속성의 열거 가능 항목이 true인 경우에만 해당 속성이 객체의 열거 속성에 나타날 수 있습니다. 기본값은 false입니다.

액세스 설명자

액세스 설명자는 getter-setter 함수 쌍으로 설명되는 속성입니다. 다음과 같은 선택적 키 값이 있습니다.

get: 속성에 getter 메서드를 제공합니다. getter가 없으면 정의되지 않습니다. 이 속성에 액세스하면 메서드가 실행됩니다. 메서드가 실행될 때 매개 변수가 전달되지 않지만 this 개체가 전달됩니다.
set: 속성에 대한 setter 메서드를 제공합니다. setter가 없으면 정의되지 않습니다. 이 메서드는 속성이 수정될 때 트리거됩니다. 이 메소드는 변경된 속성의 새 매개변수 값인 유일한 매개변수를 승인합니다.
configurable: 속성의 configurable이 true인 경우에만 속성 설명자를 변경할 수 있으며, 해당 개체에서 속성을 삭제할 수도 있습니다. 기본값은 거짓입니다.
enumerable: 속성의 열거 가능 항목이 true인 경우에만 해당 속성이 객체의 열거 속성에 나타날 수 있습니다. 기본값은 false입니다.

속성 설명자 가져오기

Object.getOwnPropentyDescriptor() 메서드는 지정된 개체의 고유 속성에 해당하는 속성 설명자를 반환합니다.

var obj = {
    name : '哈士奇'
}
/*
    使用Object.getOwnPropertyDescriptor()方法获取指定属性的描述符
    Object.getOwnPropertyDescriptor(obj,prop)
    * obj - 表示指定属性对应的目标对象
    * prop - 表示获取描述符的目标属性名称
    * 返回值 - 其属性描述符对象
    * 如果
  */
var v =Object.getOwnPropertyDescriptor(obj,'name');
console.log(v)

속성 설명자 선택적 키 값 값 설정

Object.deginepropety() 메서드 새 속성을 정의하거나 객체의 기존 속성을 수정하고 객체를 반환합니다.

var obj ={//定义对象时定义的属性是可以修改、删除、枚举的
    name : '阿拉斯加'
}
/*
    Object.defineProperty(obj, prop, descriptor)方法
    * 作用
      * 用于定义目标对象的新属性
      * 用于修改目标对象的已存在属性
    * 参数
      * obj - 表示目标对象
      * prop - 表示目标对象的目标属性名称
      * descriptor - 表示属性描述符，必须是对象格式
        {
            value : 值
        }
    * 返回值 - 返回传递的对象
 */
//修改name属性
Object.defineProperty(obj, 'name',{
    value:'哈士奇'
} );
console.log(obj.name);//哈士奇

/*
    同样都是为对象新增属性
    1.如果直接使用 "对象名.属性名 = 值" -> 可修改、可删除以及可枚举的
    2.如果使用Object.defineProperty()方法新增属性
      * 该新属性是不可修改、不可删除以及不可枚举的
 */
//新增age属性//用该方法新增的属性默认是不可以修改、删除、枚举的
Object.defineProperty(obj,'age',{
    value : 2
});

Object.degineproperties() 메서드는 하나 이상의 새 속성을 정의하거나 객체의 기존 속성을 수정하고 값을 반환합니다.

속성 설명자 선택적 키 값 설정 weitable

var obj = {
    // 定义对象的同时定义了该属性以及值(可修改、可删除以及可枚举的)
    name : '张无忌'
}
// 修改现有属性
Object.defineProperty(obj, 'name', {
    value : '周芷若',
    writable : false // 不可修改
});
console.log(obj.name);// 周芷若
// 修改name属性值
obj.name = '赵敏';
console.log(obj.name);// 周芷若

Object.defineProperty(obj, 'age', {
   value : 18,
   writable : true
});
console.log(obj.age);// 18
// 修改age属性值
obj.age = 80;
console.log(obj.age);// 80

속성 설명자 선택적 키 값 설정 configuarble

var obj = {
    // 定义对象的同时定义了该属性以及值(可修改、可删除以及可枚举的)
    name : '张无忌'
}
// 修改现有属性
Object.defineProperty(obj, 'name', {
    value : '周芷若',
    writable : true, // 控制当前属性是否可被修改
    configurable : true // 控制当前属性是否可被删除
});
console.log(obj.name);// 周芷若
// 修改name属性值
obj.name = '赵敏';
console.log(obj.name);// 赵敏
// 删除name属性值
delete obj.name;undefined
console.log(obj.name);// undefined

속성 설명자 열거 가능 설정

var obj = {
    // 定义对象的同时定义了该属性以及值(可修改、可删除以及可枚举的)
    name : '张无忌'
}
Object.defineProperty(obj, 'name', {
    value : '周芷若',
    enumerable : false
});
console.log(obj.name);// 周芷若
/*
    属性描述符enumerable - 控制当前属性是否可被枚举(遍历)
    * 仅能循环遍历对象中可被枚举的属性
      * for...in语句
      * keys()方法
    * 可以循环遍历对象中可被枚举和不可被枚举的属性
      * getOwnPropertyNames()方法
 */
for (var i in obj) {
    console.log(i);
}
var result1 = Object.keys(obj);
console.log(result1);
var result2 = Object.getOwnPropertyNames(obj);
console.log(result2);

속성 설명자 접근자 설정

객체 내 속성 Except 직접 정의하는 것 외에도 접근자를 사용하여 정의할 수도 있습니다. setter는 속성 설명자의 집합을 사용하는 값 함수입니다. getter는 속성 설명자의 get을 사용하는 값 함수입니다.

var value;
var obj = {
    // 存取描述符中的get
    get attr() {// 表示当前目标属性名称
        return value;
    },
    // 存取描述符中的set
    set attr(newValue) {// 表示当前目标属性名称
        console.log('setter: ' + newValue);
        value = newValue;
    }
}
console.log(obj.attr);// undefined
obj.attr = 100;// "setter: 100"

위조 방지 개체

정의된 개체는 기본적으로 언제 어디서나 수정이 가능하므로 변조 방지 메커니즘은 세 가지 수준으로 나뉩니다.

확장 금지: 새로운 속성 및 메서드 확장이 금지됩니다. 물건을 위해
Sealed 객체: 속성 값 읽기 및 쓰기만 허용
Frozen 객체: 모든 작업 금지

확장 없음

Object.preventExtensions()는 지정된 객체를 확장 불가능으로 설정합니다.
Object.isExtensible () 객체 확장 가능 여부 결정

객체 봉인

Objet.seal() 메서드는 객체를 봉인하여 새 속성이 추가되는 것을 방지하고 기존 속성을 표시하는 데 사용됩니다. 현재 속성의 값은 구성할 수 없습니다.
Object.Sealead()는 객체가 봉인되었는지 확인합니다

객체를 동결합니다

Object.freeze()는 객체를 동결하는 데 사용됩니다. readable
Object.isFrozen()은 객체가 동결되었는지 여부를 결정합니다

js의 객체 지향 및 객체 유형에 대한 간략한 소개(코드 포함)

관련 기사