인터뷰에는 자바스크립트 프로토타입과 상속이 필수

javascript칼럼에서는 면접에서 꼭 배워야 할 프로토타입과 상속을 소개합니다

관련 무료 학습 추천 :javascript(동영상)

이 글은 다음과 같은 측면에서 시작됩니다

• 0이해하는 방법 객체 지향
• 1 객체 생성 방법
• 2 프로토타입 체인을 기억하는 팁
• 3시뮬레이션 구현 인스턴스
• 4새로운 키워드 시뮬레이션 구현
• 5상속 구현(단계별 구현)

0 객체지향을 이해하는 방법

사실 저는 이 질문에 어떻게 대답해야 할지 모르겠어요. 면접관이 이렇게 물어본 후에는 상속 관련 질문을 잔뜩 하겠다는 뜻이라는 것만 알았어요. 다음은 조 선생님의 말씀입니다.

"객체 지향은 프로세스 지향에 해당하는 프로그래밍 아이디어입니다. 일반 언어도 객체 지향입니다. JS 자체도 객체 지향을 기반으로 구축되었습니다. 예를 들어 js 자체에는 많은 내장 클래스가 있습니다. , Promise와 같은 인스턴스를 생성하여 비동기 프로그래밍을 관리할 수 있습니다. 그리고 vue는 vue의 인스턴스도 생성합니다. "

1 객체 리터럴

var o1 = {name: 'o1'} var o2 = new Object({name: 'o2'})

2. 생성자를 통해

var M = function(name){ this.name = name } var o3 = new M('o3')

3. .Object.create

var o4 = Object.create(p)

2 프로토타입 체인 기억을 위한 팁

constructor

,instance,constructor,__ proto__,prototype, 우선 그들의 관계를 기억하세요

proto
• , 인스턴스( Object)에는 프로토타입이 없습니다생성자에는 프로토타입이 있고 프로토타입은 객체이므로 프로토타입은 위의
proto
• 를 갖는 것 외에도 생성자의 생성자를 포함합니다. 생성자의 프로토타입은 생성자 자체를 가리키고 있습니다. 즉, 위의 예에서는 M.prototype.constructor === M

constructor

,instance,constructor,__ proto__,prototype의 관계는 위의 예와 3가지 소개에서 소개되었습니다. 다시 검토해 보겠습니다

생성자는 앞에 new 키워드가 있다는 점을 제외하면 일반적인 함수입니다.
2. new

   에constructor를 더하면 생성된 객체는 인스턴스입니다.

위에서 생성된 o3 인스턴스를 예로 들어보겠습니다

3. o3.__proto__ === M.prototype //true o3.prototype //undefined o3.__proto__ === M.prototype //true

   로그인 후 복사

o3 인스턴스 자체에는 생성자가 없지만 프로토타입 체인의 도움으로 위쪽으로 검색됩니다. 즉,

4. o3.constructor === M.prototype.constructor // true o3.constructor === M //true

   로그인 후 복사

3개 인스턴스오브 시뮬레이션 구현

인스턴스오브의 원리는 무엇인가요? 먼저

[] instanceof Array // true

를 사용하는 방법을 살펴보겠습니다. 즉, 객체는 왼쪽에 있고 유형은 오른쪽에 있습니다. 인스턴스 오브는 오른쪽 인스턴스의 프로토타입 체인에 있는지 여부를 확인하는 것입니다. 다음 예시

[].__proto__ === Array.prototype //true Array.prototype.__proto__ === Object.prototype //true Object.prototype__proto__ //null

function myInstanceof2(left, right){ if(left === null || left === undefined){ return false } if(right.prototype === left.__proto__) { return true } left = left.__proto__ return myInstanceof2(left, right) } console.log(myInstanceof2([], Array))

로그인 후 복사

4 새로운 시뮬레이션 구현(간단 버전)

빈 객체 생성
이 빈 객체의
2. proto

   는 생성자의 프로토타입에 할당됩니다.

이 객체를 가리키도록 바인딩
이 객체 반환

4. // 构造函数 function M(name){ this.name = name } // 原生new var obj = new M('123') // 模拟实现 function create() { // 生成空对象 let obj = {} // 拿到传进来参数的第一项，并改变参数类数组 let Con = [].shift.call(arguments) // 对空对象的原型指向赋值 obj.__proto__ = Con.prototype // 绑定this //（对应下面使用来说明：Con是参数第一项M， // arguments是参数['123'], // 就是 M方法执行，参数是'123'，执行这个函数的this是obj） let result = Con.apply(obj, arguments) return result instanceof Object ? result : obj } var testObj = create(M, '123') console.log('testObj', testObj)

   로그인 후 복사

5 상속( 단계별 구현)의 구현

구성 방법 핵심 Parent1.call(this)

1. // 构造方法方式 function Parent1(){ this.name = 'Parent1' } Parent1.prototype.say = function () { alert('say') } function Child1(){ Parent1.call(this) this.type = 'type' } var c1 = new Child1() c1.say() //报错

   로그인 후 복사

프로토타입 상속 코어에만 의존 Child2.prototype = new Parent2()

2. // 原型 function Parent2(){ this.name = 'Parent2' this.arr = [1,2] } Parent2.prototype.say = function () { alert('say') } function Child2(){ // Parent2.call(this) this.type = 'type' } Child2.prototype = new Parent2() var c21 = new Child2() var c22 = new Child2() c21.say() c21.arr.push('9') console.log('c21.arr : ', c21.arr) console.log('c22.arr : ', c22.arr)

   로그인 후 복사

function Parent3(){ this.name = 'Parent3' this.arr = [1,2] } Parent3.prototype.say = function () { alert('say') } function Child3(){ Parent3.call(this) this.type = 'type' } Child3.prototype = new Parent3() var c31 = new Child3() var c32 = new Child3() c31.say() c31.arr.push('9') console.log('c31.arr : ', c31.arr) console.log('c31.arr : ', c32.arr)

로그인 후 복사

答 ： 生成一个实例要执行 Parent3.call(this) ， new Child3()，也就是Parent3执行了两遍。

4. 组合继承2

改变上例子 的

Child3.prototype = new Parent3()

为

Child3.prototype = Parent3.prototype

缺点 ： 很明显，无法定义子类构造函数原型私有的方法

5. 组合继承优化3 再次改变上例子 的

   Child3.prototype = Parent3.prototype

   로그인 후 복사

为

Child3.prototype = Object.create(Parent3.prototype)

问题就都解决了。 因为Object.create的原理是：生成一个对象，这个对象的proto, 指向所传的参数。

思考 ：是否还有疏漏？一时想不起来的话，可以看下这几个结果

console.log(c31 instanceof Child3) // true console.log(c31 instanceof Parent3) // true console.log(c31.constructor === Child3) // false console.log(c31.constructor === Parent3) // true

所以回想起文章开头所说的那几个需要牢记的点，就需要重新赋值一下子类构造函数的constructor： Child3.prototype.constructor = Child3，完整版如下

function Parent3(){ this.name = 'Parent3' this.arr = [1,2] } Parent3.prototype.say = function () { alert('say') } function Child3(){ Parent3.call(this) this.type = 'type' } Child3.prototype = Object.create(Parent3.prototype) Child3.prototype.constructor = Child3 var c31 = new Child3() var c32 = new Child3() c31.say() c31.arr.push('9') console.log('c31.arr : ', c31.arr) console.log('c31.arr : ', c32.arr) console.log('c31 instanceof Child3 : ', c31 instanceof Child3) console.log('c31 instanceof Parent3 : ', c31 instanceof Parent3) console.log('c31.constructor === Child3 : ', c31.constructor === Child3) console.log('c31.constructor === Parent3 : ', c31.constructor === Parent3)

5 es6的继承

class Parent{ constructor(name) { this.name = name } getName(){ return this.name } } class Child{ constructor(age) { this.age = age } getAge(){ return this.age } }

es6继承记住几个注意事项吧

• 1 构造函数不能当普通函数一样执行 Parent() 是会报错的
• 2 不允许重定向原型 Child.prototype = Object.create(Parent.prototype) 无用
• 3 继承写法如下，上面的Child类想继承父类，改成如下写法就好

注意写了extends关键字，constructor中就必须写super(),打印结果如下：

위 내용은 인터뷰에는 자바스크립트 프로토타입과 상속이 필수의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!