자 바스 크 립 트 고급 화제

대상, 역할 영역, 폐쇄, 디자인 모델 등 을 대상 으로 합 니 다.
1. 일반적인 JS 클래스 정의 방식

구조 함수 원형

대상 생 성

원형 법 은 일반적인 방법 으로 대상 생 성 은 ES5 가 추천 하 는 방법 이다. 현재 로 서 는 원형 법 이 더욱 보편적이다.

구조 함수 방법 정의 클래스:

function Person() {
    this.name = 'HalZhan';
}
Person.prototype.sayName = function() {
    alert(this.name);
}
var person = new Person();
person.sayName();

대상 생 성 방법 정의 클래스:

var Person = {
    name: 'HalZhan',
    sayName: function() { 
        alert(this.name);
    }
};
var person = Object.create(Person);
person.sayName();

2. JS 클래스 상속 방법

원형 체인 법

속성 복제 법

구조 기 응용 법

또한 각 대상 이 하나의 유형 일 수 있 기 때문에 이런 방법 은 대상 류 의 계승 에 도 사용 할 수 있다.

원형 체인 법:

function Animal() {
    this.name = 'animal';
}
Animal.prototype.sayName = function () {
    alert(this.name);
};

function Person() { }
Person.prototype = Animal.prototype; //       
Person.prototype.constructor = Person; //         

속성 복제 법:

function Animal() {
    this.name = 'animal';
}
Animal.prototype.sayName = function () {
    alert(this.name);
};

function Person() { }

for (prop in Animal.prototype) {
    Person.prototype[prop] = Animal.prototype[prop];
} //              
Person.prototype.constructor = Person; //         

구조 기 응용 법:

function Animal() {
    this.name = 'animal';
}
Animal.prototype.sayName = function () {
    alert(this.name);
};

function Person() {
    Animal.call(this); // apply, call, bind     ．    ，     ．
}

3. JS 류 다 상속 의 실현 방법
속 의 속성 복제 법 을 계승 하여 실현 하 는 것 이다.모든 부모 클래스 의 prototype 속성 이 복사 되면 하위 클래스 는 자 연 스 럽 게 유사 한 행위 와 속성 을 가지 기 때문이다.
4. JS 역할 영역 설명
대부분의 언어 안 은 블록 역할 영역 으로 {} 로 한정 되 어 있 으 며, js 안 은 그렇지 않 습 니 다.js 에서 함수 역할 영역 이 라 고 부 르 는데 하나의 변 수 는 전체 함수 에서 유효 합 니 다.예 를 들 어 함수 의 마지막 줄 에 변수 p1 이 정의 되 어 있 고 첫 번 째 줄 도 유효 하지만 값 은 undefined 입 니 다.

var globalVar = 'global var';

function test() {
    alert(globalVar); // undefined,   globalVar          ，      ，           ，        
    var globalVar = 'overrided var'; //　globalVar         
    alert(globalVar);　// overrided var
}
alert(globalVar); // global var，      

5. js 안의 this 지향
this 는 구조 함수 가 아니 라 대상 자 체 를 가리킨다.

function Person() {
}
Person.prototype.sayName = function () {
    alert(this.name);
}

var person1 = new Person();
person1.name = 'HalZhan';
person1.sayName(); // HalZhan

6. apply, call 과 bind 의 차이
세 가 지 는 모두 하나의 함 수 를 다른 대상 에 응용 할 수 있 으 며, 자신의 대상 이 아니 라 는 것 을 주의 할 수 있다.apply, call 은 함수 호출 을 직접 실행 합 니 다. bind 는 바 인 딩 입 니 다. 실행 하려 면 다시 호출 해 야 합 니 다.apply 와 call 의 차 이 는 apply 가 배열 을 매개 변수 로 받 아들 이 는 것 이 고, call 은 쉼표 로 구 분 된 무한 여러 개의 매개 변수 목록 입 니 다.

function Person() {
}
Person.prototype.sayName = function () {
    alert(this.name);
}

var obj = { name: 'HalZhan' }; //           ，   Person   
var param1, param2, param3;
// 1) apply
Person.prototype.sayName.apply(obj, [param1, param2, param3]);

// 2) call
Person.prototype.sayName.call(obj, param1, param2, param3);

// 3) bind
var sn = Person.prototype.sayName.bind(obj);
sn([param1, param2, param3]); // bind     ，    
sn(param1, param2, param3); // bind     ，   

7. caller, callee, arguments 는 각각 무엇 입 니까?
caller, callee 간 의 관 계 는 employer 와 employee 간 의 관계 와 같 습 니 다. 호출 과 호출 된 관계 입 니 다. 두 사람 이 되 돌아 오 는 것 은 모두 함수 대상 참조 입 니 다.arguments 는 함수 의 모든 매개 변수 목록 입 니 다. 클래스 배열 의 변수 입 니 다.

function parent(param1, param2, param3) {
    child(param1, param2, param3);
}

function child() {
    console.log(arguments); // { '0': 'halzhan1', '1': 'halzhan2', '2': 'halzhan3' }
    console.log(arguments.callee); // [Function: child]
    console.log(child.caller); // [Function: parent]
}

parent('halzhan1', 'halzhan2', 'halzhan3');

8. 폐쇄 란 무엇 인가, 폐쇄 는 어떤 소 용이 있 는가
패 킷 을 닫 는 것 은 쉽게 말 하면 두 글자: 함수, 더 많은 글자: 포 함 된 함수 의 부자 자기 참조 관계.모든 함 수 는 폐쇄 입 니 다.통속 적 으로 말 하면 폐쇄 는 작용 역 범위 이다. js 는 함수 작용 역 이기 때문에 함 수 는 폐쇄 이다.전역 함수 의 작용 역 범 위 는 전역 이기 때문에 토론 할 필요 가 없다.더 많은 응용 은 사실 내장 함수 입 니 다. 이것 은 내장 작용 영역 이나 역할 영역 체인 이 라 고 합 니 다.내장 하면 부자 인용 관계 (부 함 수 는 자 함 수 를 포함 하고 자 함 수 는 함수 작용 역 이 부모 함 수 를 인용 하기 때문에 폐쇄 라 고 함) 입 니 다. 이것 은 또 다른 문 제 를 가 져 옵 니 다. 인용 이 언제 끝 납 니까? 끝나 지 않 으 면 메모 리 를 계속 차지 하여 메모리 누 출 을 일 으 킵 니 다. 좋 습 니 다. 사용 하지 않 을 때 인용 이 비어 있 으 면 매듭 이 풀 립 니 다.
9. define Property, hasOwnProperty, isEnumerable 의 용도
Object. defineProperty (obj, prop, descriptor) 는 대상 에 게 속성 을 정의 하 는 데 사 용 됩 니 다. value, writable, configurable, enumerable, set / get 등 이 있 습 니 다. hasOwnProerty 는 대상 자체 에 존재 하 는 지 확인 하 는 데 사 용 됩 니 다. 계 승 된 아버지의 속성 은 계산 되 지 않 습 니 다. isEnumerable 은 어떤 속성 이 옮 겨 다 닐 수 있 는 지, 즉 for. in 순환 으로 찾 을 수 있 는 지 확인 하 는 데 사 용 됩 니 다.
10. js 자주 사용 하 는 디자인 모델 의 실현 사고, 사례, 공장, 대리, 장식, 관찰자 모델 등

 // 1)   :         ，      
var obj = { name: 'halzhan', age: 24 };

// 2)   :                
function Person() { this.name = 'Person1'; }
function Animal() { this.name = 'Animal1'; }

function Factory() { }
Factory.prototype.getInstance = function (className) {
    return eval('new ' + className + '()');
}

var factory = new Factory();
var obj1 = factory.getInstance('Person');
var obj2 = factory.getInstance('Animal');
console.log(obj1.name); // Person1
console.log(obj2.name); // Animal1

// 3)   :              ,   
function Person() { }
Person.prototype.sayName = function () { console.log('halzhan'); }
Person.prototype.sayAge = function () { console.log(24); }

function PersonProxy() {
    this.person = new Person();
    var that = this;
    this.callMethod = function (functionName) {
        console.log('before proxy:', functionName);
        that.person[functionName](); //   
        console.log('after proxy:', functionName);
    }
}

var pp = new PersonProxy();
pp.callMethod('sayName'); //     Person   sayName()
pp.callMethod('sayAge'); //     Person   sayAge() 

// 4)    :       ，     onclick     .
function Publisher() {
    this.listeners = [];
}
Publisher.prototype = {
    'addListener': function (listener) {
        this.listeners.push(listener);
    },

    'removeListener': function (listener) {
        delete this.listeners[listener];
    },

    'notify': function (obj) {
        for (var i = 0; i < this.listeners.length; i++) {
            var listener = this.listeners[i];
            if (typeof listener !== 'undefined') {
                listener.process(obj);
            }
        }
    }
}; //    

function Subscriber() {

}
Subscriber.prototype = {
    'process': function (obj) {
        console.log(obj);
    }
};　//    

var publisher = new Publisher();
publisher.addListener(new Subscriber());
publisher.addListener(new Subscriber());
publisher.notify({ name: 'halzhan', ageo: 24 }); //             
publisher.notify('2 subscribers will both perform process'); //              

11. 배열 과 관련 된 일반적인 방법 을 열거 합 니 다.
push/pop, shift/unshift, split/join, slice/splice/concat, sort/reverse, map/reduce, forEach, filter
12. 문자열 과 관련 된 일반적인 방법 을 열거 합 니 다.
indexOf/lastIndexOf/charAt, split/match/test, slice/substring/substr, toLowerCase/toUpperCase