JavaScript 인터뷰 기본 지식 질문 공유

StackOverflow 설문 조사에 따르면 JavaScript는 2014년 이후 가장 인기 있는 프로그래밍 언어입니다. 물론 이것은 합리적입니다. 결국 개발 작업의 1/3에는 JavaScript 지식이 필요하기 때문입니다. 그러므로 개발자가 되고 싶다면 이 언어를 배워야 합니다.

이 블로그의 주된 목적은 모든 인터뷰에서 공통적으로 나오는 개념을 여러분이 빠르게 이해할 수 있도록 요약하는 것입니다. (이 글은 너무 길어서 가독성이 떨어지는 점을 고려하여 3개의 블로그로 나누어 번역할 예정입니다. 이것이 세 번째 부분입니다. 첫 번째 부분을 보시려면 JavaScript 인터뷰 기초 빨리 익히기(1)를 클릭하세요.)

관련 기사 추천 : 2020 올해의 JS 면접 질문 중 가장 완벽한 모음(최신)

new 키워드

new 키워드를 사용하는 경우 함수를 호출하는 것은 매우 특별한 형태입니다. new 생성자 함수로 호출된 함수를 호출합니다. new关键字来调用函数式很特别的形式。我们把那些用new调用的函数叫做构造函数(constructor function)。

使用了new的函数到底做了什么事情呢？

• 创建一个新的对象

• 将对象的prototype设置为构造函数的prototype

• 执行构造函数，this执行新构造的对象

• 返回该对象。如果构造函数返回对象，那么返回该构造对象。

// 为了更好地理解底层，我们来定义new关键字
function myNew(constructor, ...arguments) {
  var obj = {}
  Object.setPrototypeOf(obj, constructor.prototype);
  return constructor.apply(obj, arguments) || obj
}

使用new和不使用的区别在哪里呢？

function Bird() {
  this.wings = 2;
}
/* 普通的函数调用 */
let fakeBird = Bird();
console.log(fakeBird);    // undefined
/* 使用new调用 */
let realBird= new Bird();
console.log(realBird)     // { wings: 2 }

为了便于对比理解，译者额外增加了测试了一种情况：

function MBird(){
  this.wings =2; 
  return "hello";
}

let realMBrid = new MBird();
console.log(realMBird) // { wings: 2 }

你会发现，这一句return "hello"并没有生效！

原型和继承

原型(Prototype)是JavaScript中最容易搞混的概念，其中一个原因是prototype可以用在两个不同的情形下。

• 原型关系
  每一个对象都有一个prototype对象，里面包含了所有它的原型的属性。
  .__proto__是一个不正规的机制(ES6中提供)，用来获取一个对象的prototype。你可以理解为它指向对象的parent。
  所有普通的对象都继承.constructor属性，它指向该对象的构造函数。当一个对象通过构造函数实现的时候，__proto__属性指向构造函数的构造函数的.prototype。Object.getPrototypeOf()是ES5的标准函数，用来获取一个对象的原型。

• 原型属性
  每一个函数都有一个.prototype属性，它包含了所有可以被继承的属性。该对象默认包含了指向原构造函数的.constructor属性。每一个使用构造函数创建的对象都有一个构造函数属性。

接下来通过例子来帮助理解：

function Dog(breed, name){
  this.breed = breed,
  this.name = name
}
Dog.prototype.describe = function() {
  console.log(`${this.name} is a ${this.breed}`)
}
const rusty = new Dog('Beagle', 'Rusty');

/* .prototype 属性包含了构造函数以及构造函数中在prototype上定义的属性。*/
console.log(Dog.prototype)  // { describe: ƒ , constructor: ƒ }

/* 使用Dog构造函数构造的对象 */
console.log(rusty)   //  { breed: "Beagle", name: "Rusty" }
/* 从构造函数的原型中继承下来的属性或函数 */
console.log(rusty.describe())   // "Rusty is a Beagle"
/* .__proto__ 属性指向构造函数的.prototype属性 */
console.log(rusty.__proto__)    // { describe: ƒ , constructor: ƒ }
/* .constructor 属性指向构造函数 */
console.log(rusty.constructor)  // ƒ Dog(breed, name) { ... }

JavaScript的使用可以说相当灵活，为了避免出bug了不知道，不妨接入Fundebug线上实时监控。

原型链

原型链是指对象之间通过prototype链接起来，形成一个有向的链条。当访问一个对象的某个属性的时候，JavaScript引擎会首先查看该对象是否包含该属性。如果没有，就去查找对象的prototype中是否包含。以此类推，直到找到该属性或则找到最后一个对象。最后一个对象的prototype默认为null。

拥有 vs 继承

一个对象有两种属性，分别是它自身定义的和继承的。

function Car() { }
Car.prototype.wheels = 4;
Car.prototype.airbags = 1;

var myCar = new Car();
myCar.color = 'black';

/*  原型链中的属性也可以通过in来查看:  */
console.log('airbags' in myCar)  // true
console.log(myCar.wheels)        // 4
console.log(myCar.year)          // undefined

/*  通过hasOwnProperty来查看是否拥有该属性:  */
console.log(myCar.hasOwnProperty('airbags'))  // false — Inherited
console.log(myCar.hasOwnProperty('color'))    // true

Object.create(obj) 创建一个新的对象，prototype指向obj

new를 사용하는 함수는 정확히 무엇을 합니까?

새 객체 만들기

객체의 프로토타입을 생성자의 프로토타입으로 설정

생성자를 실행하면 this는 새로 생성된 객체

를 실행하고 객체를 반환합니다. 생성자가 객체를 반환하면 생성된 객체가 반환됩니다.

var dog = { legs: 4 };
var myDog = Object.create(dog);

console.log(myDog.hasOwnProperty('legs'))  // false
console.log(myDog.legs)                    // 4
console.log(myDog.__proto__ === dog)       // true

new를 사용하는 것과 사용하지 않는 것의 차이점은 무엇인가요?

var objProt = { text: 'original' };
var objAttachedToProt = Object.create(objProt);
console.log(objAttachedToProt.text)   // original

// 我们更改objProt的text属性，objAttachedToProt的text属性同样更改了
objProt.text = 'prototype property changed';
console.log(objAttachedToProt.text)   // prototype property changed

// 但是如果我们讲一个新的对象赋值给objProt，那么objAttachedToProt的text属性不受影响
objProt = { text: 'replacing property' };
console.log(objAttachedToProt.text)   // prototype property changed

비교와 이해를 돕기 위해 번역자는 추가 테스트 상황을 추가했습니다:

function greetingAsync(name, callback){
  let greeting = "hello, " + name ;
  setTimeout(_ => callback(greeting),0);
}

greetingAsync("fundebug", console.log);
console.log("start greeting");

이 문장 return "hello"는 적용되지 않습니다!

🎜프로토타입과 상속🎜🎜프로토타입은 JavaScript에서 가장 혼란스러운 개념입니다. 그 이유 중 하나는 프로토타입이 두 가지 다른 상황에서 사용될 수 있다는 것입니다. 🎜

• 🎜프로토타입 관계🎜모든 객체에는 프로토타입의 모든 속성을 포함하는 프로토타입 객체가 있습니다. 🎜.__proto__는 객체의 프로토타입을 얻는 데 사용되는 비공식 메커니즘(ES6에서 제공)입니다. 객체의 부모를 가리키는 것으로 이해하면 됩니다. 🎜모든 일반 객체는 객체의 생성자를 가리키는 .constructor 속성을 ​​상속합니다. 객체가 생성자를 통해 구현되면 __proto__ 특성은 생성자 생성자의 .prototype을 가리킵니다. Object.getPrototypeOf()는 ES5의 표준 함수로, 객체의 프로토타입을 가져오는 데 사용됩니다. 🎜
• 🎜Prototype 속성🎜모든 함수에는 상속될 수 있는 모든 속성이 포함된 .prototype 속성이 있습니다. 기본적으로 이 객체에는 원래 생성자를 가리키는 .constructor 속성이 포함되어 있습니다. 생성자를 사용하여 생성된 모든 객체에는 생성자 속성이 있습니다. 🎜

🎜다음은 이해를 돕기 위한 예입니다. 🎜

const first = function () {
  console.log('First message')
}
const second = function () {
  console.log('Second message')
}
const third = function() {
  console.log('Third message')
}

first();
setTimeout(second, 0);
third();

// 输出:
  // First message
  // Third message
  // Second message

🎜JavaScript의 사용은 매우 유연하다고 할 수 있습니다. 또한 온라인 실시간 모니터링을 위해 Fundebug에 연결하세요 em>. 🎜🎜프로토타입 체인🎜🎜프로토타입 체인은 프로토타입을 통해 연결되어 방향성 있는 체인을 형성하는 객체를 말합니다. 객체의 속성에 액세스할 때 JavaScript 엔진은 먼저 객체에 속성이 포함되어 있는지 확인합니다. 그렇지 않은 경우 객체의 프로토타입에 포함되어 있는지 확인하세요. 속성이 발견되거나 마지막 개체가 발견될 때까지 계속됩니다. 마지막 개체의 프로토타입은 기본적으로 null입니다. 🎜🎜소유 vs 상속🎜🎜객체에는 두 가지 종류의 속성이 있는데, 이는 자체적으로 정의된 속성과 상속된 속성입니다. 🎜rrreee🎜Object.create(obj)는 새 개체를 생성하고 프로토타입은 obj를 가리킵니다. 🎜rrreee🎜상속은 참조로 전달됩니다🎜🎜상속된 속성은 모두 참조 형식입니다. 예를 통해 생생하게 이해해 봅시다: 🎜rrreee🎜클래식 상속 vs 프로토타입 상속🎜🎜Eric Elliott의 기사에는 매우 자세한 소개가 있습니다: Master the JavaScript Interview: What's the Difference Between Class & Prototypal Inheritance?🎜저자는 프로토타입 상속이 프로토타입 상속보다 낫다고 믿습니다. 클래식 상속 상속 및 동영상 소개 제공: https://www.youtube.com/watch...🎜🎜Asynchronous JavaScript🎜🎜JavaScript는 단일 스레드 프로그래밍 언어로, JavaScript 엔진은 특정 단락만 실행할 수 있습니다. 시간 코드로. 이로 인해 발생하는 문제는 코드 조각을 실행하는 데 오랜 시간이 걸리면 다른 작업이 중단된다는 것입니다. JavaScript는 호출 스택을 사용하여 함수 호출을 기록합니다. 호출 스택은 책의 스택으로 볼 수 있습니다. 마지막 책이 맨 위에 배치되고 먼저 제거됩니다. 먼저 놓인 책은 맨 아래에 있으며 마지막으로 제거됩니다. 🎜🎜복잡한 코드가 CPU를 너무 오랫동안 점유하는 것을 방지하기 위한 한 가지 해결책은 비동기 콜백 함수를 정의하는 것입니다. 비동기 함수를 직접 정의해 봅시다: 🎜

function greetingAsync(name, callback){
  let greeting = "hello, " + name ;
  setTimeout(_ => callback(greeting),0);
}

greetingAsync("fundebug", console.log);
console.log("start greeting");

我们在greetingAsync中构造了greeting语句，然后通过setTimeout定义了异步，callback函数，是为了让用户自己去定义greeting的具体方式。为方便起见，我们时候直接使用console.log。
上面代码执行首先会打印start greeting，然后才是hello, fundebug。也就是说，greetingAsync的回调函数后执行。在网站开发中，和服务器交互的时候需要不断地发送各种请求，而一个页面可能有几十个请求。如果我们一个一个按照顺序来请求并等待结果，串行的执行会使得网页加载很慢。通过异步的方式，我们可以先发请求，然后在回调中处理请求结果，高效低并发处理。

下面通过一个例子来描述整个执行过程：

const first = function () {
  console.log('First message')
}
const second = function () {
  console.log('Second message')
}
const third = function() {
  console.log('Third message')
}

first();
setTimeout(second, 0);
third();

// 输出:
  // First message
  // Third message
  // Second message

1. 初始状态下，浏览器控制台没有输出，并且事件管理器(Event Manager)是空的；

2. first()被添加到调用栈

3. 将console.log("First message")加到调用栈

4. console.log("First message")执行并输出“First message”到控制台

5. console.log("First message")从调用栈中移除

6. first()从调用栈中移除

7. setTimeout(second, 0)加到调用栈

8. setTimeout(second, 0)执行，0ms之后，second()被加到回调队列

9. setTimeout(second, 0)从调用栈中移除

10. third()加到调用栈

11. console.log("Third message")加到调用栈

12. console.log("Third message")执行并输出“Third message”到控制台

13. console.log("Third message")从调用栈中移除

14. third()从调用栈中移除

15. Event Loop 将second()从回调队列移到调用栈

16. console.log("Second message")加到调用栈

17. console.log("Second message")Second message”到控制台

18. console.log("Second message")从调用栈中移除

19. Second()从调用栈中移除

特别注意的是：second()函数在0ms之后并没有立即执行，你传入到setTimeout()函数的时间和second()延迟执行的时间并不一定直接相关。事件管理器等到setTimeout()设置的时间到期才会将其加入回调队列，而回调队列中它执行的时间和它在队列中的位置已经它前面的函数的执行时间有关。

相关学习推荐：javascript视频教程

위 내용은 JavaScript 인터뷰 기본 지식 질문 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!