JavaScript 고급 프로 그래 밍 - 요약 노트 - 2

9348 단어 필기 하 다.자바 script
설명:
이 요약 노트 시 리 즈 는 내 가 최근 에 본 '자 바스 크 립 트 고급 프로 그래 밍 (제3 판)' 에서 손 쉽게 쓴 것 이다.내 가 중요 하 다 고 생각 하고 적어 야 할, 나 에 게 도움 이 되 는 점 들 을 나 누 어 열거 했다. 내 가 보 는 순서에 따 른 것 이다.요약 노트북 은 체계 성 이 없고 전면적 이지 않 습 니 다. 여기 서 일정한 기초 가 있 는 전단 개발 자 들 이 교 류 를 참고 할 수 있 도록 쓰 여 있 습 니 다.안에 있 는 지식 점, 예 는 대부분 이 책 에서 기원 되 거나 연장 되 었 습 니 다. 모두 제 테스트 를 통 해 맞 았 지만 100% 정확 하 다 고 보장 할 수 없습니다. 만약 에 잘못된 부분 을 보신 분 들 이 지적 해 주 셨 으 면 좋 겠 습 니 다. 감사합니다.
1. 수학 대상
Math.E // 2.718281828459045        ，    e   
Math.PI //     3.141592653589793
Math.min() //         
Math.max() //         
//            
var arr = [10, 15, 8, 23]
var max = Math.max.apply(Math, arr)
console.log(max) // 23
Math.ceil() //     
Math.floor() //     
Math.round() //       
Math.random() //       0  1    
Math.abs(num) //    num     
Math.log(num) //    num      
Math.pow(num, power) //    num  power  
Math.sqrt(num) //    num     
Math.cos(x) //    x     
Math.sin(x) //    x     
Math.tan(x) //    x     
Math.acos(x) //    x      
Math.asin(x) //    x      
Math.atan(x) //    x      
Math.atan2(y, x) //    y / x

2. 깊이 복사 대상 의 간단 하고 효율 적 인 방법
var rel = JSON.parse(JSON.stringify(obj))

3. Object. assign () 방법 은 여러 개의 원본 대상 자체 의 매 거 진 속성 을 대상 에 게 복사 한 다음 대상 Object. assign (target,... sources) 을 되 돌려 줍 니 다. 예 를 들 어:
var obj = {a: 1}
var copy = {b: 3}
var rel = Object.assign(b, obj)
console.log(rel) // {a: 1, b: 3}
copy === rel // true

깊이 있 는 복사 가 필요 하 다 면 이 방법 이 아 닌 다른 것 을 사용 해 야 한다.Object. assign () 은 대상 자체 가 아 닌 source 에서 대상 의 속성 을 참조 하기 때 문 입 니 다.예:
var a = {b: 3, c: {e: 5}}
var rel = Object.assign({}, a)
console.log(rel.c.e) // 5
a.c.e = 8
console.log(rel.c.e) // 8
//    objects
var o1 = {a: 2}
var o2 = {b: 5}
var o3 = {c: 8}
var rel = Object.assign(o1, o2, o3)
console.log(rel) // {a: 2, b: 5, c: 8}
console.log(o1) // {a: 2, b: 5, c: 8}
rel === o1 // true
//                  
//           object

4. 대상 의 속성
ECMAScript 에는 두 가지 속성 이 있 습 니 다. 데이터 속성 과 접근 기 속성 입 니 다.
a. 데이터 속성: 데이터 속성 은 데이터 값 의 위 치 를 포함 합 니 다.이 위치 에서 값 을 읽 고 쓸 수 있 습 니 다.데이터 속성 은 그 행 위 를 묘사 하 는 네 가지 특성 이 있다.
[[Configurable]]:      delete             ，         ，               。   true 。
[[Enumerable]]:      for-in       。   true 。
[[Writable]]:         。   true 。
[[Value]]:           。             ；        ，          。    undefined 。

속성 기본 기능 을 수정 하려 면 es5 의 Object. defineProperty () 방법 을 통 해 야 합 니 다.이 방법 은 세 개의 인자, 속성 이 있 는 대상, 속성의 이름과 설명자 대상 을 받 아들 입 니 다.그 중에서 설명자 (descriptor) 대상 의 속성 은 configurable, enumerable, writable, value 여야 합 니 다. 그 중 하나 이상 의 값 을 설정 하면 해당 하 는 특성 값 을 수정 할 수 있 습 니 다.예:
var person = {}
Object.defineProperty(person, 'name', {
  writable: false,
  value: 'abc'
})
person.name // 'abc'
person.name = 'wfc' //         
person.name // 'abc'

Object. defineProperty () 방법 을 호출 할 때 지정 하지 않 으 면 configurable, writable, enumerable 의 기본 값 은 모두 false 입 니 다.
Object. defineProperty () 를 여러 번 호출 하여 같은 속성 을 수정 할 수 있 지만, configurable 특성 을 false 로 설정 한 후 에는 writable 을 true 에서 false 로 바 꿀 수 밖 에 없 으 며, 다른 설정 은 모두 오 류 를 보고 할 수 있 습 니 다.
b. 접근 기 속성
접근 기 속성 은 데이터 값 을 포함 하지 않 습 니 다. getter setter 함수 한 쌍 을 포함 합 니 다.접근 기 속성 을 읽 을 때 getter 함 수 를 호출 합 니 다. 이 함 수 는 유효한 값 을 되 돌려 줍 니 다.접근 기 속성 을 기록 할 때 setter 함 수 를 호출 하여 새 값 을 입력 합 니 다. 이 편 지 는 데 이 터 를 어떻게 처리 할 것 인 가 를 결정 합 니 다.접근 기 속성 은 다음 과 같은 4 가지 기능 이 있 습 니 다.
[[Configurable]]:        delete             ，         ，              。
             ，    true 。
[[Enumerable]]:        for-in       。             ，    true 。
[[Get]]:            。    undefined 。
[[Set]]:            。    undefined 。

접근 기 속성 을 직접 정의 할 수 없습니다. Object. defineProperty () 를 사용 하여 정의 해 야 합 니 다.예:
var book = {
  _year: 2016,
  edition: 1
}
Object.defineProperty(book, 'year', {
  get: function () {
    return this._year
  },
  set: function (newValue) {
    this.edition += 1
    this._year = newValue
  }
})
book.edition // 1
book.year = 2017
book.edition // 2

getter setter 를 동시에 지정 할 필요 가 없습니다. getter 만 지정 하면 속성 을 쓸 수 없고 setter 만 지정 하면 속성 을 읽 을 수 없습니다.
//    Object.defineProperty()      IE 9+，Firefox 4+, Safari 5+, Opera 12+, Chrome

5. Object. define Properties () 는 설명 자 를 통 해 여러 속성 을 한 번 에 정의 할 수 있 습 니 다.이 방법 은 두 개의 인 자 를 받 아들 이 고 첫 번 째 인 자 는 그 속성 을 추가 하고 수정 하 는 대상 입 니 다.
두 번 째 매개 변 수 는 설명자 입 니 다.예:
var book = {}
Object.defineProperties(book, {
  _year: {
    value: 2016,
    writable: true
  },
  edition: {
    value: 1,
    writable: true
  },
  year: {
    get: function () {
      return this._year
    },
    set: function (value) {
      this._year = value
      this.edition += 1
    }
  }
})
//    Object.defineProperties()      IE 9+，Firefox 4+, Safari 5+, Opera 12+, Chrome

6. Object. getOwnProperty Descriptor () 는 지정 한 속성의 설명 자 를 얻 을 수 있 습 니 다.두 개의 인자, 속성 이 있 는 대상, 속성 이름 을 받 아들 입 니 다.
인 스 턴 스 속성의 설명자 만 얻 을 수 있 습 니 다. 원형 대상 의 설명 자 를 얻 으 려 면 원형 대상 에서 이 방법 을 호출 해 야 합 니 다.예 를 들 어 위의 북:
Object.getOwnPropertyDescriptor(book, '_year') // {configurable: false, enumerable: false, writable: true, value: 2016}
var rel = Object.getOwnPropertyDescriptor(book, 'year')
console.log(rel)
// {
//   configurable: false,
//   enumerable: false,
//   get: function () {
  //   return this._year
  // },
  // set: function (value) {
  //   this._year = value
  //   this.edition += 1
  // }
// }
typeof rel.get // 'function'
//    Object.getOwnPropertyDescriptor()      IE 9+，Firefox 4+, Safari 5+, Opera 12+, Chrome

7. OO 에 대하 여
function Person (name, age) {
  this.name = name
  this.age = age
  this.sayName = function () {
    console.log(this.name)
  }
}
var ming = new Person('ming', 13)

Person.prototype.constructor === Person // true
ming.constructor === Person // true
Person.constructor === Function // true
Function.constructor === Function // true
Function instanceof Function // true
Function instanceof Object // true

Person.prototype.sayHello = function () {
  console.log('hello')
}
ming.sayHello() // 'hello'
ming.__proto__.constructor === Person // true
ming.__proto__ === Person.prototype // true

8. 구조 함수
구조 함수 와 다른 함수 의 유일한 차 이 는 호출 방식 이 다 르 기 때문에 구조 함 수 를 정의 하 는 특수 문법 이 존재 하지 않 습 니 다.new 연산 자 를 통 해 호출 되 지 않 으 면 일반 함수 와 다 르 지 않 습 니 다.위의 예 와 같이:
var li = new Person('li', 15)
li.sayName() // 'li'

Person('yang', 18)
window.sayName() // 'yang'

var o = {}
Person.call(o, 'wang', 20)
o.sayName() // 'wang'

9. 원형 모드
우리 가 만 든 모든 함수 에는 prototype (원형) 속성 이 있 습 니 다. 이 속성 은 포인터 로 대상 을 가리 키 며, 이 대상 의 용 도 는 모든 인 스 턴 스 가 공유 하 는 속성 과 방법 을 포함 합 니 다.예:
function Person (name, age) {
  this.name = name
  this.age = age
  this.sayName = function () {
    console.log(this.name)
  }
}
Person.prototype.sayHello = function () { console.log('hello') }
var ming = new Person('ming', 12)
var li = new Person('li', 15)
ming.sayHello === li.sayHello // true
ming.sayHello === Person.prototype.sayHello // true

isPrototypeOf () 방법 을 통 해 대상 이 직접 원형 - 인 스 턴 스 관계 가 있 는 지 확인 할 수 있 습 니 다. 예 를 들 어:
Person.prototype.isPrototypeOf(ming) // true

es5 새로운 방법 Object. getPrototypeOf () 이 방법 은 인 스 턴 스 의 proto 즉 인 스 턴 스 의 구조 함수 의 원형 값 을 되 돌려 줍 니 다. 예 를 들 어:
Object.getPrototypeOf(ming) === Person.prototype
//    Object.getPrototypeOf()      IE 9+，Firefox 3.5+, Safari 5+, Opera 12+, Chrome

10. hasOwnProperty () 방법 은 하나의 속성 이 인 스 턴 스 에 존재 하 는 지, 원형 에 존재 하 는 지 확인 할 수 있 습 니 다.이 방법 은 속성 이 인 스 턴 스 에 존재 할 때 만 true 로 돌아 갑 니 다.in 연산 자 는 단독으로 사용 합 니 다. 이 대상 을 통 해 주어진 속성 에 접근 할 수 있다 면 true 로 돌아 갑 니 다. 예 를 들 어 다음 과 같 습 니 다.
ming.hasOwnProperty('sayHello') // false
'sayHello' in ming // true
ming.hasOwnProperty('sayName') // true
'sayName' in ming // true

ming.sayHello = function () {
  console.log('hello in self')
}
ming.hasOwnProperty('sayHello') // true
'sayHello' in ming // true
delete ming.sayHello
ming.hasOwnProperty('sayHello') // false
'sayHello' in ming // true

ming.hasOwnProperty('sayHello1') // false
'sayHello1' in ming // false

인 스 턴 스 속성 을 undefined / null 로 설정 하 더 라 도 hasOwnProperty () in 이 두 가지 방법 으로 true 를 되 돌려 줍 니 다.
function hasPrototypeProperty (object, name) {
  return !object.hasOwnProperty(name) && name in object
}

for - in 순환 은 대상 을 통 해 접근 할 수 있 는 모든 (enumerable: true) 속성 을 되 돌려 줍 니 다. 인 스 턴 스 의 속성 도 포함 하고 원형 중의 속성 도 포함 합 니 다.
11. es5 의 Object. keys () 방법 은 하나의 대상 을 매개 변수 로 받 아들 이 고 인 스 턴 스 의 모든 속성 을 가 진 문자열 로 구 성 된 배열 을 되 돌려 줍 니 다.예:
var Person = function () {}
Person.prototype.sayHello = function () {
  console.log('hello')
}
var ming = new Person()
ming.name = ming
Object.keys(ming) // ["name"]

Object.getOwnPropertyNames()             ，       。
//    Object.keys()   Object.getOwnPropertyNames()      IE 9+，Firefox 4+, Safari 5+, Opera 12+, Chrome
JavaScript 계승 의 특성 과 실천 응용 에 대한 심도 있 는 설명
백준 10799 - 쇠막대기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage