> 웹 프론트엔드 > JS 튜토리얼 > 자바스크립트 객체지향 프로그래밍의 속성 상속

자바스크립트 객체지향 프로그래밍의 속성 상속

巴扎黑
풀어 주다: 2016-11-25 11:00:20
원래의
1107명이 탐색했습니다.

JavaScript에는 상속 키워드인 확장이 없습니다. 그렇다면 생성자를 사용하여 객체를 생성할 때 다른 생성자를 기반으로 객체의 속성을 생성(상속/복사)하려면 어떤 방법을 사용합니까? 즉, 객체를 생성하기 위해 함수에 new 키워드를 사용할 때 객체의 속성은 다른 함수에서 나올 수 있습니다.

이 글은 두 가지 작성 방법을 제공합니다:

첫 번째(비공식):
그러나 이 사용법을 이해해야 합니다.

자바스크립트 코드

함수 동물(이름, 나이){

this.name = 이름

this.age = age;

}

d = new Dog('hello',20)

console .log(d);

/*

개 {이름: "안녕하세요", 나이: 20}

age: 20

i: function Animal(이름, 나이)

name: "hello"

__proto__:

생성자: functionDog(name) , age)

*/

위의 작성 방식은 Animal 외부 함수를 자체 내부 함수 중 하나로 참조하는 것입니다. 회원 기능.

익명 함수를 작성하는 방법입니다.

은 다음과 같습니다.

Javascript 코드

function Dog(이름, 나이){


this.i = function Animal(이름, 나이 ){

this.name = 이름;

this.age = 나이

}

this.i(이름, 나이); 🎜 >

}

은 다음과 동일합니다:

Javascript 코드

기능 개(이름, 나이){

/*

함수를 호출할 때 'new' 키워드를 사용하여

객체를 생성하는 대신

// 호출 function

Animal();

//'new' 키워드를 사용하여 객체를 생성합니다.

new Animal(); 🎜>

내부의 'this'는 외부의 'this'와 동일합니다. 왜냐하면

함수 내부에 생성된 'this' 객체가 없기 때문입니다. 따라서

외부 항목을 참조해야 합니다.

*/

> this.name = name; // 2. 내부 "this"는 동일합니다.

this.age = age; // 외부 "this" 중 하나입니다.

this.i(이름, 나이); , '이것'이 생성되지 않았습니다.

}



생각하기: 함수를 호출할 때 "이것"은 누구입니까? ?
이후 함수 호출은 "this" 객체를 생성하지 않습니다.
그렇다면 Dog 내에서 Animal을 직접 호출하는 것은 불가능한 걸까요?
답변: 아니요

Java 코드

/*

호출된 함수가 속한 'this', 내부의 'this'

호출된 함수는 해당 'this' 객체를 참조합니다.

*/

함수 Dog(이름, 나이){ // 호출하는 경우 Animal direct,

Animal(name,age); // 여기서 Animal 함수는 'window'에 속합니다.

} // 따라서 Animal 내부의 'this'는 'window'를 참조합니다. 🎜>




두 번째(정식):
apply() 함수 또는 call() 함수 사용

apply(): "이 " 객체 적용 (that) 함수에 호출한 다음 이를 호출합니다. = name; apply(this, 인수); // "this" 개체를 Animal 함수에 적용합니다.                                     // 주어진 'this'를 사용하여 Animal 함수를 호출합니다. | 다른 '이것'에

}

d = new Dog('hello',20)

console.log(d); }

나이: 20

이름: "hello"

__proto__:

생성자: 함수 Dog(이름, 나이)

*/

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿