JavaScript 프로토타입 상속_javascript 기술의 함정에 대한 간략한 분석

JavaScript는 기본적으로 프로토타입 상속을 사용합니다. 클래스에 대한 개념은 없지만 해당 함수는 생성자 역할을 할 수 있습니다. this 및 new와 결합된 생성자는 Java와 유사한 클래스를 빌드할 수 있습니다. 따라서 JavaScript는 자체 확장을 통해 클래스 기반 상속을 에뮬레이트할 수 있습니다.

JavaScript는 다른 객체 지향 언어와 마찬가지로 객체 유형에 대한 참조를 사용합니다. 객체를 담고 있는 변수는 단지 주소일 뿐이고, 기본 유형 데이터는 값입니다. 프로토타입에 객체를 저장할 때 몇 가지 함정이 있을 수 있습니다.

첫 번째 예를 먼저 보세요

코드 복사 코드는 다음과 같습니다

var create = function() {
function Fn() {}
return function(parent) {
Fn.prototype = parent
return new Fn
}
} ()

var parent = {
name: 'jack',
age: 30,
isMarried: false
}
var child = create( parent)
console.log(child)

create 도구 함수는 create가 호출될 때마다 상위 개체를 기반으로 새 개체가 복사됩니다. 새 개체의 속성은 부모에서 옵니다. 여기서 parent에는 세 가지 속성이 있으며 모두 기본 데이터 유형인 문자열, 숫자 및 부울입니다.

이때 자식을 수정하여 부모에게 영향을 미치는지 확인

코드 복사 코드는 다음과 같습니다 :

child.name = 'lily'
child.age = 20,
child.isMarried = true

console.log(child)
console .log(상위)

결과는 다음과 같습니다

즉, 하위 항목을 수정해도 상위 항목에는 영향을 미치지 않습니다.

다른 예 보기

코드 복사 코드는 다음과 같습니다.

var create = function() {
function Fn() {}
return function(parent) {
Fn.prototype = parent
return new Fn
}
}()

var parent = {
데이터: {
이름: 'jack',
연령: 30,
isMarried: false
},
언어: ['Java' ]
}
var child = create(parent)

child.data.name = 'lily'
child.data.age = 20
child.data.isMarried = true
child.언어.push('javascript')
console.dir(child)
console.dir(parent)

여기서 parent의 두 가지 속성은 데이터입니다. 참조 유형이며, 하나는 객체이고 다른 하나는 배열입니다. 자식은 여전히 ​​부모로부터 상속을 받고 그 결과는 다음과 같습니다

보시다시피 이때 부모도 수정되었으며, 아이의 이름, 나이 등은 동일합니다. 이는 프로토타입 상속을 사용할 때 주의해야 할 사항입니다.

상속을 사용하는 더 좋은 방법은 다음과 같습니다.

1. 데이터 속성은 클래스 상속을 채택하므로(여기에 매달려 있음) 매개변수를 통해 새 항목도 구성할 수 있습니다.

2. 이 메소드는 메모리를 절약할 수 있는 프로토타입 상속을 채택합니다. 동시에 하위 클래스에 의한 메소드 재정의는 상위 클래스에 영향을 미치지 않습니다.

다음은 위의 두 가지 점을 충족하는 글쓰기 도구 기능입니다

코드를 복사하세요 코드는 다음과 같습니다.

/**
 * @param {String} className
 * @param {String/Function} superCls
 * @param {Function} 팩토리
 */
function $class(name, superClass, Factory) {
if (superClass === '') superClass = Object
function clazz() {
if (typeof this.init === 'function') {
this.init.apply(this, 인수)
}
}
var p = clazz.prototype = new superCls
clazz.prototype.constructor = clazz
clazz.prototype.className = className
var supr = superCls.prototype
window[className] = clazz
Factory.call(p, supr)
}

객체 유형이 상위 클래스의 프로토타입에 배치되면 하위 클래스가 이를 수정할 때 주의하세요. 이 경우 상위 클래스에서 상속된 하위 클래스의 모든 인스턴스는 다음과 같습니다. 수정되었습니다. 그리고 이로 인해 발생하는 버그는 찾기가 매우 어렵습니다.

ES5에는 프로토타입 상속을 구현하기 위한 새로운 API인 Object.create가 추가되었습니다. 이를 사용하여 위의 자체 구현 생성 기능을 다음과 같이 대체할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var parent = {
이름: 'jack',
연령: 30,
isMarried: false
}
var child = Object.create(parent )
console.log(자식)