자바 스크립트 기본 지식

1. 기본 유형이있다? 객체가 null? 기본 데이터 유형과 복잡한 데이터 유형의 차이점은 무엇입니까 저장?

여섯 가지 기본 유형, 즉, 정의, 널 (null), 부울, 문자열이 있습니다 번호, 기호 (ES6 신규).
대해서 typeof null 값은 객체가 아니라 null 객체하지만, 기본적인 데이터 형식을 반환하고 있지만.
기본 데이터 타입은 스택 메모리에 저장되고, 그 값은 저장된다.
힙 메모리 주소에 저장된 복잡한 데이터 입력 값 (스택에 값 포인트) 스택 메모리에 저장된다. 우리가 다른 변수에 할당 된 객체를 사용하면 한 개체의 변경, 다른 객체가 변경됩니다 때, 같은 메모리 공간을 가리키고 주소를 복사합니다.

판정 2 세 가지

대해서 typeof : 원래의 값은, 예를 들어, 판정 할 수있다 string number boolean symbol undefined. 반대하는 판사는 NULL (참조 이전 기사는 자바 스크립트 버그했다). 어레이 등, 날짜 등의 기준값의 유형을 판별 할 수는 타입 객체가 혼자 함수를 결정할 수 없다고 판단한다.
instanceof예를 들어, A instanceof B층들이 원형 쇄 B를 통해 보면, 지금까지 널 밝혀졌다. 원래 유형의 값을 결정 instanceof를 제대로 수행하지 않는 참고 시도 할 수 있습니다 console.log(1 instanceof Number),
구현 코드 instanceof를 :

// L instanceof R
function instance_of(L, R) {//L 表示左表达式，R 表示右表达式
    var O = R.prototype;// 取 R 的显式原型
    L = L.__proto__;    // 取 L 的隐式原型
    while (true) { 
        if (L === null) //已经找到顶层
            return false;  
        if (O === L)   //当 O 严格等于 L 时，返回 true
            return true; 
        L = L.__proto__;  //继续向上一层原型链查找
    } 
}


Object.prototype.toString     任何类型都能判断
function type(object){
    var toString = Object.prototype.toString.call(object);
    return /\s+(\S+)]/.exec(toString)[1].toLowerCase();
}

var x = [];
console.log(type(x));

3, 얕은 및 깊은 사본 복사

얕은 복사 :
주요 통해 반복에 대한
Object.assign
ES6 오브젝트 배치 사업자 ...
전체 복사가
반복적으로 통과합니다 (DFS, 환상 문제, 경계 처리, https://github.com/Advanced-Frontend/Daily-Interview-Question/ 연체 / 10 )
JSON.parse(JSON.stringify())
이 방법은 몇 가지 제한을 갖는다는 정의 무시 무시 기호 함수 직렬화 될 수없고, 원형 목표물 해결되지. 그러나 딥 카피의 대부분의 문제를 해결할 수 있습니다.

4, 용의에 대한 ... foreach는지도의 차이

for...of객체가 반복자 사이클 호출하는 인터페이스 ... 구비 할 경우에만 이송 '반복자 객체', 이러한 배열로서 네이티브 반복자 객체의 메소드 Symbol.iterator 속성을 생성 워커에 배치해야 발전기는 문자열 등, 객체.
for...in자체 대상물 이송 또는 상속 속성들 수
forEach순환 막지 만 반복
map배열을
대해 forEach 및 map배열되어 프로토

도 4를 참조하면, 어레이 및 차이 어레이 기반

배열은 길이 속성이 있습니다 만 보통의 개체 클래스이지만, 같은과 같은 팝업 푸시로 더 배열 프로토 타입,
배열은 배열의 인스턴스 생성자입니다.
클래스의 일반적인 배열은 :. 파라미터 함수 인자 (예를 들어, 결과리스트 document.querySelectorAll 의해) DOM 오브젝트리스트의 jQuery 객체 (예 $ ( "DIV"))
의 변환 방법은 :

//第一种方法
Array.prototype.slice.call(arrayLike, start);
//第二种方法
[...arrayLike];
//第三种方法:
Array.from(arrayLike);

(5) ==과 ===의 차이가
==먼저 암시 적 변환과 비교하는 것는 변환 단계 다음의
도 1을 참조하면, 우선, 검색 유형과 같은 경우와 동일한 비교 값
2 비교기 측면 여부 null및 undefined반환하는 경우 true
3 여부의 양측에 결정 로 변환하는 경우 원래의 값이고, number다음 비교 하였다. (여기서, 예를 들어, bool number string통일로 변환된다은 number, 케이스의 다른 유형의 양쪽 참고)
, 다시 4되어 object지금 것, 다시 원래의 값 object에 대해 (원래의 값으로 설정 한 다음 비교 object, 원래의 값으로 변환 규칙의 종류 결국 )의 요구를 생각

생각 : [] == ![] [] == []
문제는 [] 어떤 원시 값으로 변환되어야한다는 것이다
가 것이다 object로 변환 Number어레이 하나만 있으면 빈 배열 디지털 변환이 해당 값은 디지털 0 (빈 배열로 변환되어, 대응하는 값은 0이다 디지털, 다음 차례 number, 다른 경우는 그 수치 NaN)
와 ![]로 변신 0그래서 반환 true [] == 0 true [1] == 1 [2] == 2
하고 [] == []너무 다른 참조 형식, 허위 반송 주소이기 때문에, 양쪽 모두, 아니 전환 유형에 동일한 유형의
매우 재미 기분이 안됩니다

6 클래스의 ES6 및 클래스 ES5의 차이점은 무엇입니까?

ES6 class정의 된 모든 방법을 열거되지 않습니다 내부,
ES6 class어떤 변수 엘리베이터가없는,
ES6 class서브 클래스가 부모 클래스의 생성자를 호출해야합니다 super(), 그래서 오직 this객체, ES5클래스 상속 관계가 역전되고, 첫번째 서브 클래스 this, 다음 상위 클래스에서 사용되는 방법 this에.

7let , const뿐만 아니라 var차이점은 무엇입니까?

let const블록 레벨 범위가 있습니다 var범위에는 블록 레벨이없는
let const변수가 존재하지 않는 업그레이드는 데드 존은 임시 명령문을 반복 할 수 없습니다 가지고 var있다 변수 리프트
let const구속되지 않습니다 전역에서 window개체에서, 그리고 var것, 그것은 때문이다 let const문은 어휘 환경에있다.

8 실행 스택의 컨텍스트와 JS의 범위 체인 이해 이야기.

코드를 처음 실행, 글로벌 실행 컨텍스트를 만드는 함수 호출이 발생할 때마다 현재 실행 스택을 앞으로 밀어 함수의 실행 컨텍스트를 생성하고, 현재 실행 스택 스택을 추진합니다

9, 폐쇄

하는 생성 함수 또는 창 함수 B는, 함수 B의 국소 변수 또는 기능 메소를 계속 사용할 수 있고, B는 그때 폐쇄 함수라고한다.
그래서 왜 B의 기능은 그것의 함수 지역 변수를 사용할 수 있습니까?
정상 기능의 실행 콘텍스트의 실행을 완료 한 경우는 = 객체가 가변 JS 엔진 정리 함수 반환 메모리 공간을 실행 컨텍스트 스택을 팝.
함수 발생기 / B 함수 반환하면 폐쇄 메모리 누출을 일으킬 수 있도록 변수 함수는, 함수 B의 계속적인 사용을 위해, 상기 메모리 공간에 유지 될 개체.
폐쇄 사용 시나리오 :
1 패키지 전용 변수
2 블록 레벨 범위 모방
3 구현 모듈 JS
방진 스로틀 태닝을

10, 적용 및 구현을 결합 전화

전화의 간단한 구현, 사용 this암시 적 바인딩

Function.prototype.call = function (context) {
    /** 如果第一个参数传入的是 null 或者是 undefined, 那么指向this指向 window/global */
    /** 如果第一个参数传入的不是null或者是undefined, 那么必须是一个对象 */
    if (!context) {
        //context为null或者是undefined
        context = typeof window === 'undefined' ? global : window;
    }
    context.fn = this; //this指向的是当前的函数(Function的实例)
    let rest = [...arguments].slice(1);//获取除了this指向对象以外的参数, 空数组slice后返回的仍然是空数组
    let result = context.fn(...rest); //隐式绑定,当前函数的this指向了context.
    delete context.fn;
    return result;
}

//测试代码
var foo = {
    name: 'Selina'
}
var name = 'Chirs';
function bar(job, age) {
    console.log(this.name);
    console.log(job, age);
}
bar.call(foo, 'programmer', 20);
// Selina programmer 20
bar.call(null, 'teacher', 25);
// 浏览器环境: Chirs teacher 25; node 环境: undefined teacher 25

단지 변수의 배열을 받아 적용 실현 적용

Function.prototype.apply = function (context, rest) {
    if (!context) {
        //context为null或者是undefined时,设置默认值
        context = typeof window === 'undefined' ? global : window;
    }
    context.fn = this;
    let result;
    if(rest === undefined || rest === null) {
        //undefined 或者 是 null 不是 Iterator 对象，不能被 ...
        result = context.fn(rest);
    }else if(typeof rest === 'object') {
        result = context.fn(...rest);
    }
    delete context.fn;
    return result;
}
var foo = {
    name: 'Selina'
}
var name = 'Chirs';
function bar(job, age) {
    console.log(this.name);
    console.log(job, age);
}
bar.apply(foo, ['programmer', 20]);
// Selina programmer 20
bar.apply(null, ['teacher', 25]);
// 浏览器环境: Chirs programmer 20; node 环境: undefined teacher 25

구현 매개 변수와 반환 바인드 스플 라이스 폐쇄

Function.prototype.bind = function (context){
    if(typeof this !== "function"){
        throw new TypeError("not a function");
    }

    var args = [...arguments].slice(1);//参数
    var _this = this;
    var binded = function (){
        args = args.concat([...arguments]);//参数的合并
        return _this.apply(context, args)
    };

    //如果是构造函数，还需要实现prototype的继承
    binded.prototype = Object.create(this.prototype);
    return binded;
}

function test(param1, param2){
    console.log(this.name)
    console.log(param1);
    console.log(param2);
}
var obj = {
    name: 1,
}
var binded = test.bind(obj, 2);
binded(3);

11의 새로운 기능은 원리는? 새로운 방법을 통해 차이점은 무엇입니까 문자 생성을 통해 개체 만들기?

새로운 원리는 네 단계
새로운 :
새로운 객체를 생성합니다.
이 새로운 객체는 [[프로토 타입]] 연결이 실행됩니다.
속성 및 방법이가 참조하는 객체에 추가됩니다. 그리고 생성자의 방법. 구현은
함수가 다른 개체를 반환하지 않는 경우,이 오브젝트의 생성자으로 돌아 가기 그렇지 않으면이 시점, 새 개체를 가리 킵니다.

function new(func) {
    let target = {};
    target.__proto__ = func.prototype;
    let res = func.call(target);
    if (typeof(res) == "object" || typeof(res) == "function") {
        return res;
    }
    return target;
}

리터럴은 객체를 생성, Object 생성자, 간결하고 더 나은 성능을 호출하지 않으며,
new Object()메소드가 발견되는 경우 개체에 만들 수있는 방법은 기본적으로 메소드 호출이다,이 방법은 프로토 체인을 통과 포함, 그것은 필요한 메소드 호출을 생성합니다 스택 정보, 메소드 호출의 단부뿐만 아니라, 스택의 방출은 리터럴 방법뿐만 아니라 수행한다.
객체는 객체 리터럴로 정의 될 때, 개체의 생성자를 호출하지 않습니다.

12, 프로토 타입의 이해에 대해 이야기?

객체가 정의 될 때마다 개체는 사전 정의 된 속성을 포함 할 때, 자바 스크립트 (또한 객체 작용). 상기 식에서 각 객체는 함수의 프로토 타입 객체를 가리키는 함수 프로토 타입 속성이 있습니다. 프로토 타입 객체의 속성과 메서드를 사용의 이점은 모든 객체 인스턴스 점유율을 포함하고 있다는 점이다.

13 프로토 타입 체인은 무엇인가? 해결 [prototype 체인 문제인가? ]

주 문제를 해결하기 위해 프로토 타입 체인 상속된다.
각 객체는 프로토 타입 객체가 proto프로토 타입 객체에 대한 포인터를, 그리고 속성과 메소드를 상속하는,하지만, 궁극적으로 가리 키도록 또한, 프로토 타입 프로토 타입 객체, 레이어로 레이어를 가질 수있다 null( Object.proptotype.__proto__점을 null). 이 관계는 원형 고리 (prototype 체인), 속성 및 다른 오브젝트에 정의 된 방법을 가질 수있는 원형 오브젝트에 의하여 체인이라고한다.
생성자 Parent, Parent.prototype다음 P 사이의 관계는 예 :(이다 p.__proto__ === Parent.prototype)

---

14 prototype과 __proto__의 차이가 무엇인지?

prototype그것은 생성자의 속성입니다.
__proto__각 인스턴스는 속성을 가지고, 당신은 액세스 할 수있는 [[prototype]]속성을.
예를 들면 __proto__생성자 prototype같은 객체를 가리키는.

function Student(name) {
    this.name = name;
}
Student.prototype.setAge = function(){
    this.age=20;
}
let Jack = new Student('jack');
console.log(Jack.__proto__);
//console.log(Object.getPrototypeOf(Jack));;
console.log(Student.prototype);
console.log(Jack.__proto__ === Student.prototype);//true

15 ES5와 상속을 달성

기생 조합

16 ES6 어떤 새로운 기능은 무엇입니까?

추가 된 블록 레벨의 범위 (const를하자)
문법적 클래스 (클래스)의 정의가 제공하는
기본 데이터 타입 (기호)를 첨가
해체 변수 할당 추가
기본 값을 설정 할 수 있습니다 함수 매개 변수를, 나머지는 도입 파라미터 새로운 기능 화살표
어레이는 끝나면 IsArray로서, 일부 API 추가 / 방법 /로부터, 예 배열 엔트리 () 키 () 및 값 () 메소드와 같은 추가 된
목적 및 신규 사업자 연장 배열
ES6을 추가 모듈 (수입 / 수출)
ES6지도 세트 데이터 구조 및 추가
프록시 인스턴스를 생성하기 위해 프록시 생성자 ES6 네이티브
ES6 생성기 (생성기) 및 이송 장치 (반복자)을 첨가

17의 setTimeout

우리는 메인 쓰레드 작업의 실행 시간을 보장 할 수 없으므로에서는 setTimeout은, 시간이 정확하지 않습니다
와 requestAnimationFrame구별?
requestAnimationFrame 특징
1의 정확한 시간
이, 떨어 프레임 (프레임 하락에 대해 : 당신이 각 기계를 10ms의에 워크를 제공해야하는 경우 브라우저가 한 번 모든 16.7ms를 다시 그리기 워크를 처리하는 기계마다 16.7ms를 상상하고,하기를 처리는, 상기 시스템은 배터리 및 CPU)의 손실이 발생할 수 있지만, 처리 폐쇄 작업을 입을 것이다
페이지가 비활성 상태에있을 때, 예를 들어,의 setTimeout으로, 애니메이션)이 실행되지 페이지 잘라 CPU 오버 헤드 (절약 3 역 호환
4, 부드러운 애니메이션 간섭 (동기 애니메이션 렌더링 UI)

왜 18 0.1 + 0.2! = 0.3

소수 이진 변환
정수 비트 : 부가 모듈 2 소수점을 이진수로 반올림 2 0.1 무한 루프 인
시스템 변환하여 발생 계산 공정의 정확도는 0.1 + 0.2 = 0.3의 결실을 유도하여
정확도의 문제를 해결하는 방법 ?
디지털 정수 1로 변환
이는 가장 쉽게 비교적 간단 발생한다

function add(num1, num2) {
 const num1Digits = (num1.toString().split('.')[1] || '').length;
 const num2Digits = (num2.toString().split('.')[1] || '').length;
 const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits));
 return (num1 * baseNum + num2 * baseNum) / baseNum;
}

그러나이 방법은 여전히 가난한 사람들의 많은 지원하는
2 삼자 라이브러리
Math.js는 big.js
자세한 참조 : https://juejin.im/post/5b90e00e6fb9a05cf9080dff

19, JS의 비동기 개발의 역사

1, 콜백 함수의
콜백 함수는 여러 가지 문제가 발생할 수 있습니다 :
콜백 지옥

fs.readFile(A, 'utf-8', function(err, data) {  
    fs.readFile(B, 'utf-8', function(err, data) {  
        fs.readFile(C, 'utf-8', function(err, data) {  
            fs.readFile(D, 'utf-8', function(err, data) {  
                //....  
            });  
        });  
    });  
});

오류 시도 캐치를 가져올 수 없습니다, 리드 유지하기 어려운 코드에
2, 약속
약속 주로 콜백 지옥의 문제를 해결하기 위해 Promise먼저 지역 사회에 의해 제안하고 실현 ES6은 네이티브 표준 언어, 통일 사용량에 기록 될 Promise객체입니다.
그럼 우리가 볼 Promise여전히 텍스트에서 ReadFile 예 위, 콜백 지옥의 문제를 해결하는 방법.

function read(url) {
    return new Promise((resolve, reject) => {
        fs.readFile(url, 'utf8', (err, data) => {
            if(err) reject(err);
            resolve(data);
        });
    });
}
read(A).then(data => {
    return read(B);
}).then(data => {
    return read(C);
}).then(data => {
    return read(D);
}).catch(reason => {
    console.log(reason);
});

더 많은 Promise연구의 세부 사항은 다음을 참조하십시오 https://juejin.im/post/5cc4671c5188252e8a038874 소스 코드를 이해하는 것이 권장, 인터뷰를 당황하지 마십시오.
3, 비동기 /를 기다리고
문법적으로 AWAIT의 비동기 / 발전기, 가장 중요한 지식은 공동 모듈, 필기 아무 문제입니다 원리를 이해하는 것이 좋습니다.
http://es6.ruanyifeng.com/#docs/generator-async

20 webWorker의 이해

HTML5 웹 근무 기준 JS 대표하는 여러 스레드를 허용 제안하지만, 메인 스레드 자식 스레드 완전히 통제와 DOM를 조작 할 수 없습니다 만 주 스레드는 DOM를 조작 할 수 있기 때문에 본질은 여전히 단일 스레드 언어 JS를입니다.
간단한 예 :

var worker = new Worker('./worker.js'); //创建一个子线程
worker.postMessage('Hello');
worker.onmessage = function (e) {
    console.log(e.data); //Hi
    worker.terminate(); //结束线程
};

//worker.js           
onmessage = function (e) {
    console.log(e.data); //Hello
    postMessage("Hi"); //向主进程发送消息
};

webWorker 특징 :
1 서브 프로세스 개구
(2)과는 PostMessage의 onMessage 과정은 마스터와 통신하여
동작 할 수 없으며, (3) DOM
이와 같은 연산 알고리즘으로서 webWorker 애플리케이션 계산의 많은 양의 일부에 일반적으로 적용 시나리오, 시간 소모적 장면.

21 ES6 모듈과 commonJS차별화

컴파일 시간 의존성 모듈에서 ES6 모듈이 결정되고, 상기 입력 및 출력 변수가 될 수있다.
CommonJS 모듈은 런타임에로드됩니다.
ES6 모듈에 관계없이 자동으로 모듈 헤더 쓴 여부에 엄격 모드를 채택 "use strict",
(가) 동적으로 수행로드 할 수있다 필요 import 문은 할 수 없습니다, import 문은 최상위 레벨 범위에 있어야합니다.
ES6 모듈의 상위 this점 undefined, CommonJS상부 모듈의 this현재 블록에 대한 포인트.
CommonJS 모듈의 출력 값의 복사, ES6 모듈 출력이 기준값이다.
CommonJS은 캐시 할 수 있습니다.

(22), 도메인 간

. (1) JSONP
2 CORS
http://www.ruanyifeng.com/blog/2016/04/cors.html
. (3) 상기의 onMessage PostMessage를 window.open 또는 PostMessage를에서
. 4, 도메인 간 Nginx의 제
5 웹 소켓하지 상동 전략 영향
(6), 노드 미들웨어 (개발 도구에서 VUE 에이전트 때 사용)
는 다음과 같이 크로스 도메인을 달성하기 위해 노드 미들웨어 작동 :
1. 클라이언트 요청을 수락
2. 전달 서버에 요청합니다.
3. 서버의 응답 데이터를 얻을.
4. 전달 클라이언트에 대한 응답.
다음 세 가지 간 방법은 거의 관심이 있다면, 자신에 대한 관련 정보에 액세스 할 수 있습니다, 사용하지 않습니다.
+를 window.name에게 IFRAMES
에 location.hash를 + IFRAMES
의 document.domain을 (동일한 기본 도메인이 필요)

23, 비동기로드 및 비동기 연기 JS

같은 점은 비동기 적으로로드됩니다.
비동기는 실행 순서를 보장하지 않으며, 렌더링 엔진 차단 (JS UI 스레드되고 상호 배타적 스레드 렌더링), 즉시 실행 다운로드된다.
렌더링이 완성 된 후 실행되는 연기. 순서를 보장합니다.

24, 양방향 바인딩 Proxy및 Object.defineProperty이 비교하는 방법 장점과 단점

defineProperty 양방향 바인딩
https://codepen.io/xiaomuzhu/pen/jxBRgj/
https://www.jianshu.com/p/2df6dcddb0d7

25 Function._proto_ (getPrototypeOf) 란 무엇인가?

크롬에 의해, 오브젝트 프로토 타입을 가져 __proto__형태 또는 ES6를 통해 Object.getPrototypeOf폼.
어떤 기능이를 proto__ .__? 우리가 차별로 무엇을 상속 그 기능 객체.

Function.__proto__==Object.prototype //false
Function.__proto__==Function.prototype//true

우리는 발견 Function프로토 타입입니다 Function.
우리는 명확하게 관계를 매핑 할 수 있습니다 :