javascript 객체지향_javascript 기술에 대한 사전 이해

머리말

클래스 기반 객체: 객체 지향 언어의 명백한 기호는 클래스 개념이라는 것을 우리 모두 알고 있습니다. 템플릿과 유사한 클래스를 통해 동일한 속성과 메서드를 가진 많은 객체를 만들 수 있습니다. 하지만 ECMAScript에는 클래스라는 개념이 없기 때문에 당연히 클래스 기반 언어의 객체와는 다를 것입니다.

js의 개체: 기본 값, 개체 및 기능을 포함할 수 있는 순서가 지정되지 않은 속성 모음입니다. 즉, js의 객체는 특정 순서가 없는 값의 집합입니다. 객체의 각 속성이나 메서드에는 고유한 이름이 있으며 각 이름은 값에 해당합니다.

객체 이해

객체 생성 방법

1 객체를 생성하는 가장 간단한 방법은 객체 인스턴스를 생성한 다음 여기에 속성과 메서드를 추가하는 것입니다.

예를 들어

  var person = new Object();
    person.name='谦龙';
    person.sex='男';
    person.sayNameAndSex=function(){
      console.log(this.name,this.sex)
    }
    person.sayNameAndSex(); // 谦龙 男

2 객체 리터럴 형식 사용

예를 들어

  var person={
    name:'谦龙',
    sex:'男',
    sayNameAndSex:function(){
      console.log(this.name,this.sex)
    }
  }
   person.sayNameAndSex(); // 谦龙 男

속성 유형

ECMAScript에는 데이터 속성과 접근자 속성이라는 두 가지 유형의 데이터 속성이 있습니다.

데이터 속성

데이터 속성에는 데이터 값의 위치가 포함됩니다. 이 위치에서 값을 읽고 쓸 수 있습니다. 해당 동작을 설명하는 네 가지 속성이 있습니다.

1.[[Configurable]]: 삭제를 통해 속성을 삭제하여 재정의할 수 있는지 여부를 나타냅니다...기본값은 true입니다

2.[[Enumerable]]: for in 루프를 통해 속성을 반환할 수 있는지 여부를 나타냅니다. 기본값은 true입니다

3.[[Writable]]: 속성 값을 수정할 수 있는지 여부를 나타냅니다. 기본값은 true

4.[[값]]: 이 속성의 값을 나타냅니다. 기본값은 정의되지 않습니다

속성의 기본 속성을 수정하려면 ES5 Object.defineProperty() 메서드를 사용해야 합니다. 이 메서드는 속성이 위치한 객체, 속성 이름, 속성 속성을 설명하는 객체라는 세 가지 매개변수를 받습니다. (구성 가능, 열거 가능, 쓰기 가능, 값), 그 중 하나 이상을 설정하면 해당 특성을 수정할 수 있습니다

데모

var person={};
Object.defineProperty(person,'name',{
 configurable:false,//表示不允许通过delete删除属性
 writable:false,//表示不允许重写
 ennumerable:false,//表示不允许通过for in遍历
 value:'谦龙'//设置该对象中属性的值
})
person.name='谦龙2';//尝试重新设置 结果不生效
delete person.name;//尝试删除 结果不生效
for(var attr in person){
 console.log(person[attr]);// false
}
console.log(person.name);//谦龙

참고: configurable을 false로 설정한 후에는 다시 true로 변경할 수 없습니다. 또한 Object.defineProperty() 메서드 호출 시 configurable, ennumerable 및 writable의 기본값은 false입니다.

접속자 속성

접속자 속성에는 한 쌍의 getter 및 setter 함수가 포함되어 있습니다(그러나 이 두 함수는 필수는 아닙니다). 접근자 속성을 읽을 때 이 함수는 반환을 담당합니다. valid 접근자 속성을 작성할 때 setter 함수가 호출되고 새 값이 전달됩니다. 이 함수는 데이터를 처리하는 방법을 담당합니다.

접속자 속성은 다음과 같은 특징을 갖습니다

[[configurable]]은 새 속성을 정의하기 위해 삭제를 통해 속성을 삭제할 수 있는지 여부를 나타냅니다.

[[enumerable]]은 반환된 속성이 for in 루프를 통해 탐색될 수 있는지 여부를 나타냅니다.

[[get]] 속성을 읽을 때 호출되는 함수, 기본값은 정의되지 않음

[[set]] 함수 작성 시 호출되는 함수 기본값은 정의되지 않음

참고: 접근자 속성은 직접 정의할 수 없으며 Object.defineProterty()를 통해 정의해야 합니다

데모

 var book={
 _year:2015, //这里的下划线是常见的记号，表示只能通过对象的方法才能访问的属性
 edition:1
}
Object.defineProperty(book,'year',{
 get:function(){
  return this._year; //即默认通过 book.year获取值的时候 返回的是 boot._year的值
 },
 set: function (value) {//在对 boot.year设置值的时候 默认调用的方法 对数据进行处理
  var _year=this._year;
  if(value > _year){
   this._year=value;
   this.edition+=value-_year;
  }
 }
})
book.year = 2016;
console.log(book.year,book.edition); // 2016 2

여러 속성 정의

ES5의 Object.defineProperties() 메소드를 통해 객체에 여러 속성을 추가할 수 있습니다. 이 메소드는 두 개의 객체 매개변수를 허용하며, 첫 번째 매개변수는 속성이 추가되고 수정되는 객체입니다. 속성은 첫 번째 개체에 추가되고 수정되는 속성에 해당합니다.

데모

var book={};
Object.defineProperties(book,{
 _year:{
  value:2015,
  writable:true //注意这里设置成true 才可以 "写" 默认是false 
 },
 edition:{
  value:1,
  writable:true //注意这里设置成true 才可以 "写" 默认是false
 },
 year:{
  get:function(){
   return this._year;
  },
  set: function (value) {
   var _year=this._year;
   if(value > _year){
    this._year=value;
    this.edition+=value-_year;
   }
  }
 }
})
book.year=2016;
console.log(book.year,book.edition); // 2016 2

객체 속성의 속성 읽기

ES5의 Object.getOwnPropertyDescriptor() 메서드를 사용하면 특정 속성의 설명자를 가져올 수 있습니다.

이 메소드는 두 개의 매개변수, 즉 속성이 위치한 객체와 읽을 설명자의 속성 이름을 받습니다. 반환되는 것은 개체입니다. 데이터 속성인 경우 반환된 속성은 구성 가능, 열거 가능, 쓰기 가능, 값입니다. 접근자 속성인 경우 반환된 속성은 구성 가능, 열거 가능, 가져오기, 설정 가능합니다

데모

var book={};
Object.defineProperties(book,{
 _year:{
  value:2015,
  writable:true
 },
 edition:{
  value:1,
  writable:true
 },
 year:{
  get:function(){
   return this._year;
  },
  set: function (value) {
   var _year=this._year;
   if(value > _year){
    this._year=value;
    this.edition+=value-_year;
   }
  }
 }
})
//对象遍历函数
function showAllProperties(obj){
 for(var attr in obj){
  console.log(attr+':'+obj[attr]);
 }
}
var descriptor= Object.getOwnPropertyDescriptor(book,'_year');//数据属性
var descriptor2= Object.getOwnPropertyDescriptor(book,'year');//访问器属性
showAllProperties(descriptor);
console.log('============================');
showAllProperties(descriptor2);

객체 지향 JavaScript의 예비 이해에 대한 위의 소개가 모두 끝났습니다.