자바스크립트 객체지향 학습 및 자바스크립트 객체_자바스크립트 기술 이해-JS 튜토리얼-php.cn

1. 프로그래밍 생각
프로세스 지향: 프로세스를 중심으로 위에서 아래로 점진적으로 개선되는 프로그램은 함수 호출의 모음으로 간주됩니다
객체지향: 객체는 프로그램의 기본 단위로, 프로그램은 데이터와 관련 연산으로 분해됩니다
2. 클래스와 객체
클래스: 동일한 특성과 특성을 가진 사물에 대한 추상적인 설명
객체: 특정 유형에 해당하는 특정 사물
3. 객체지향의 세 가지 주요 특징
캡슐화: 구현 세부 정보를 숨기고 코드 모듈화 달성
상속: 기존 코드 모듈을 확장하여 코드 재사용 달성
다형성: 인터페이스 재사용을 달성하기 위한 다양한 인터페이스 구현 방법
4. 개체 정의: 기본 값, 개체 또는 기능을 포함할 수 있는 순서가 지정되지 않은 속성 모음

//简单的对象实例
var person = new Object();
  person.name = "Nicholas";
  person.age = 29;
  person.job = "Software Engineer";
  person.sayName = function(){
    alert(this.name);
  }

로그인 후 복사

5. 내부 속성 유형: ECMAScript5에서는 내부 속성을 두 개의 대괄호 안에 넣어 데이터 속성과 접근자 속성으로 구분합니다.
[1] 데이터 속성에는 값을 읽고 쓸 수 있는 데이터 값 위치가 포함되어 있습니다. 데이터 속성에는 4가지 특성이 있습니다.
a. [[Configurable]]: 속성을 삭제하여 속성을 재정의할 수 있는지, 속성의 특성을 수정할 수 있는지, 접근자 속성으로 직접 수정할 수 있는지 여부를 나타냅니다. 객체의 경우 기본값은 true입니다.
b. [[Enumerable]]: for-in 루프를 통해 속성을 반환할 수 있는지 여부를 나타냅니다. 객체에 직접 정의된 속성의 경우 기본값은 true
입니다. c, [[Writable]]: 속성 값을 수정할 수 있는지 여부를 나타냅니다. 객체에 직접 정의된 속성의 경우 기본값은 true입니다
d. [[값]]: 이 속성의 데이터 값을 포함합니다. 속성 값을 쓸 때 이 위치에서 읽고 이 위치에 새 값을 저장합니다. 객체에 직접 정의된 속성, 기본값은 정의되지 않음
[2] 접근자 속성에는 데이터 값 이 포함되어 있지 않지만 getter 및 setter 함수 쌍이 포함되어 있습니다(그러나 이 두 함수는 필수는 아닙니다). 접근자 속성을 읽으면 유효한 값을 반환하는 getter 함수가 호출됩니다. 접근자 속성이 작성되면 setter 함수가 호출되고 새 값이 전달되며 이 함수는 방법을 결정합니다. 기능을 처리합니다. 접근자 속성에는 다음과 같은 4가지 특성이 있습니다.
a. [[Configurable]]: 삭제를 통해 속성을 삭제하여 속성을 재정의할 수 있는지, 속성의 특성을 수정할 수 있는지, 접근자 속성으로 수정이 가능한지 여부를 나타낸다. 객체에 직접 정의된 속성, 기본값은 true
b. [[Enumerable]]: 속성이 for-in 루프를 통해 반환될 수 있는지 여부를 나타냅니다. 기본값은 true
입니다. c, [[Get]]: 속성을 읽을 때 호출되는 함수입니다. 기본값은 정의되지 않습니다
d.[[Set]]: 속성 작성 시 호출되는 함수입니다. 기본값은 정의되지 않습니다
6. 내부 속성 수정: 세 가지 매개변수(속성이 있는 객체, 속성 이름, 설명자 객체)를 받는 ECMAScript5의 object.defineProperty() 메서드를 사용하세요.
[참고 1]IE8은 Object.defineProperty() 메소드를 구현한 최초의 브라우저 버전입니다. 그러나 이 버전의 구현에는 많은 제한 사항이 있습니다. 이 메서드는 DOM 개체에만 사용할 수 있으며 접근자 속성만 만들 수 있습니다. 구현이 불완전하므로 IE8에서는 Object.defineProperty() 메서드를 사용하지 않는 것이 좋습니다
[참고 2]Object.defineProperty() 메서드를 지원하지 않는 브라우저에서는 [[Configurable]] 및 [[Enumerable]]을 수정할 수 없습니다.
[1] 데이터 속성 수정

//直接在对象上定义的属性，Configurable、Enumerable、Writable为true
var person = {
  name:'cook'
};
Object.defineProperty(person,'name',{
  value: 'Nicholas'
});
alert(person.name);//'Nicholas'
person.name = 'Greg';
alert(person.name);//'Greg'

로그인 후 복사

//不是在对象上定义的属性，Configurable、Enumerable、Writable为false
var person = {};
Object.defineProperty(person,'name',{
  value: 'Nicholas'
});
alert(person.name);//'Nicholas'
person.name = 'Greg';
alert(person.name);//'Nicholas'

로그인 후 복사

//该例子中设置writable为false,则属性值无法被修改
var person = {};
Object.defineProperty(person,'name',{
  writable: false,
  value: 'Nicholas'
});
alert(person.name);//'Nicholas'
person.name = 'Greg';
alert(person.name);//'Nicholas'

로그인 후 복사

//该例子中设置configurable为false,则属性不可配置
var person = {};
Object.defineProperty(person,'name',{
  configurable: false,
  value: 'Nicholas'
});
alert(person.name);//'Nichols'
delete person.name;
alert(person.name);//'Nicholas'

로그인 후 복사

[참고] 속성이 구성 불가능으로 정의되면 다시 구성 가능으로 변경할 수 없습니다. 즉, Object.defineProperty()를 여러 번 호출하여 동일한 속성을 수정할 수 있지만 configurable을 false로 설정한 후에는 제한이 있습니다

var person = {};
Object.defineProperty(person,'name',{
  configurable: false,
  value: 'Nicholas'
});
//会报错
Object.defineProperty(person,'name',{
  configurable: true,
  value: 'Nicholas'
});

로그인 후 복사

[2] 접근자 속성 수정

//简单的修改访问器属性的例子
var book = {
  _year: 2004,
  edition: 1
};
Object.defineProperty(book,'year',{
  get: function(){
    return this._year;
},
  set: function(newValue){
    if(newValue > 2004){
      this._year = newValue;
      this.edition += newValue - 2004;
    }
  }
});
book.year = 2005;
alert(book.year)//2005
alert(book.edition);//2

로그인 후 복사

[참고1] getter만 지정하면 속성을 쓸 수 없다는 의미입니다.

var book = {
  _year: 2004,
  edition: 1
};
Object.defineProperty(book,'year',{
  get: function(){
    return this._year;
  },
});
book.year = 2005;
alert(book.year)//2004

로그인 후 복사

[참고 2] setter만 지정하면 속성을 읽을 수 없다는 의미입니다

var book = {
  _year: 2004,
  edition: 1
};
Object.defineProperty(book,'year',{
  set: function(newValue){
    if(newValue > 2004){
      this._year = newValue;
      this.edition += newValue - 2004;
    }
  }
});
book.year = 2005;
alert(book.year);//undefined

로그인 후 복사

[보충] 두 가지 비표준 메서드를 사용하여 접근자 속성을 생성합니다: __defineGetter__() 및 __defineSetter__()

var book = {
  _year: 2004,
  edition: 1
};
//定义访问器的旧有方法
book.__defineGetter__('year',function(){
  return this._year;
});
book.__defineSetter__('year',function(newValue){
  if(newValue > 2004){
    this._year = newValue;
    this.edition += newValue - 2004;
  }
});
book.year = 2005;
alert(book.year);//2005
alert(book.edition);//2

로그인 후 복사

7. 여러 속성 정의: ECMAScript5는 설명자를 통해 여러 속성을 한 번에 정의하는 데 사용할 수 있는 Object.defineProperties() 메서드를 정의합니다. 첫 번째 개체는 다음과 같습니다. 속성을 추가하고 수정할 개체입니다. 두 번째 개체의 속성은 추가하거나 수정할 첫 번째 개체의 속성과 일대일로 대응합니다.

var book = {};
Object.defineProperties(book,{
  _year: {
    value: 2004
  },
  edition: {
    value: 1
  },
  year: {
    get: function(){
      return this._year;
    },
    set: function(newValue){
      if(newValue > 2004){
        this._year = newValue;
        this.edition += newValue - 2004;
      }
    }
  }
});

로그인 후 복사

八、读取属性特性：使用ECMAScript5的Object.getOwnPropertyDescriptor()方法，可以取得给定属性的描述符。该方法接收两个参数：属性所在对象和要读取其描述符的属性名称，返回值是一个对象。
[注意]可以针对任何对象——包括DOM和BOM对象，使用Object.getOwnPropertyDescriptor()方法

var book = {};
Object.defineProperties(book,{
  _year: {
    value: 2004
  },
  edition: {
    value: 1
  },
  year: {
    get: function(){
      return this._year;
    },
    set: function(newValue){
      if(newValue > 2004){
        this._year = newValue;
        this.edition += newValue - 2004;
      }
    }
  } 
});
var descriptor = Object.getOwnPropertyDescriptor(book,'_year');
alert(descriptor.value);//2004
alert(descriptor.configurable);//false
alert(typeof descriptor.get);//'undefined'

var descriptor = Object.getOwnPropertyDescriptor(book,'year');
alert(descriptor.value);//'undefined'
alert(descriptor.configurable);//false
alert(typeof descriptor.get);//'function'

로그인 후 복사

以上就是关于javascript面向对象的详细内容介绍，希望对大家的学习有所帮助。