js의 상속은 Java의 전통적인 상속과 다릅니다. js는 프로토타입 체인을 기반으로 하는 상속입니다. JavaScript 상속은 객체 기반 상속과 유형 기반 상속의 두 가지 범주로 나눌 수 있습니다. js 상속에 대해 자세히 살펴보겠습니다.
js 객체 기반 상속
객체 기반 상속을 프로토타입 상속이라고도 합니다. JavaScript 리터럴을 통해 생성된 개체가 Object.prototype에 연결된다는 것을 알고 있으므로 Object.prototype을 사용하여 상속을 구현합니다. 기본적으로 클래스는 폐기되고 생성자는 호출되지 않습니다. 대신 Object.create()를 사용하여 새 객체가 이전 객체의 속성을 직접 상속하도록 합니다. 예:
var person = {
name: "Jack",
getName: function () { return this.name; }
}
var p1 = Object.create(person);
console.log(p1.getName()); //Jack코드는 매우 간단합니다. 사람은 하나의 속성과 하나의 메소드를 가집니다. 객체 p1은 Object.create()를 통해 상속됩니다. 첫 번째 매개변수 프로토타입은 person의 프로토타입을 가리키므로 객체 p1은 person의 속성과 메서드를 상속합니다.
Object.create()는 두 번째 매개변수인 데이터 속성을 지정하여 새 객체에 추가할 수도 있습니다. 데이터 속성은 쓰기 가능, 열거 가능 및 구성 가능의 4가지 설명자 값으로 설정할 수 있습니다. 마지막 3개의 의미는 이름을 보면 짐작할 수 있습니다. 지정하지 않으면 기본값은 false입니다. 이 기사와 관련이 거의 없으므로 값 설정 상황만 살펴보겠습니다.
var p2 = Object.create(person, {
name: {
value: "Zhang"
}
});
console.log(p2.getName()); //ZhangObject.create()를 사용하는 것은 새로운 객체를 생성하는 것과 같습니다. 객체를 추가하고 오버로드할 수 있습니다. 속성 및 메서드:
var person = {
name: "Jack",
getName: function () { return this.name; },
getAge: function() { return this.age; } //注意并没有age这个成员变量，依赖子类实现
}
var p3 = Object.create(person);
p3.name = 'Rose';
p3.age = 17;
p3.location = '上海';
p3.getLocation = function() { return this.location; }
console.log(p3.getName()); //Rose
console.log(p3.getAge()); //17
console.log(p3.getLocation()); //上海연령 속성이 없으므로 person.getAge();를 호출하면 정의되지 않습니다. 하지만 객체 p3에 age 속성이 새로 정의되어 있으므로 기본 클래스의 getAge 메소드를 올바르게 호출할 수 있습니다. 또한 서브클래스는 name 값을 오버로드하고, location 속성과 getLocation 메소드를 새롭게 정의합니다. 결과는 위에 표시되므로 다시 설명하지 않습니다.
js 클래스 기반 상속
유형 기반 상속은 객체에 의존하지 않고 생성자를 통해 프로토타입에 의존하는 상속입니다. 예:
function Person(name) {
this.name = name;
this.getName = function () { return this.name; };
}
function Student(name, age) {
Person.call(this, name);
this.age = age;
this.getAge = function () { return this.age; };
}
Student.prototype = new Person(); //需要通过new来访问基类的构造函数
var p = new Person('Cathy');
var s = new Student('Bill', 23);
console.log(p.getName()); //Cathy
console.log(s.getName()); //Bill
console.log(s.getAge()); //23Student는 Person에서 상속됩니다. name은 기본 클래스 Person에 정의되어 있지만 new를 사용하여 Person의 생성자를 호출한 후에는 하위 클래스 Student 객체에 바인딩되므로 name은 궁극적으로 하위 클래스 Student 객체에 정의됩니다. 결과는 위에 표시되므로 다시 설명하지 않습니다.
개인 정보 보호
getName, getAge 및 기타 메소드를 정의하는 이유는 사용자가 이름, 나이 등과 같은 속성에 직접 액세스하는 것을 원하지 않기 때문입니다. 불행히도 위의 두 상속 중 어느 것도 개인 정보를 보호할 수 없으며 p.name 및 p.age와 같은 속성에 직접 액세스할 수 있습니다. 이러한 속성의 프라이버시가 매우 중요하다고 생각하고 OO 언어에서 프라이빗 속성의 효과를 시뮬레이션하려는 경우 함수 모듈화를 사용할 수 있습니다.
소위 함수 모듈화란 본질적으로 함수 내에서 새 객체를 생성하고, 새 객체의 메서드에서 매개변수 객체의 속성을 사용한 다음, 새 객체를 반환하는 것을 의미합니다. 이때 새 객체에는 매개변수 객체의 속성이 없으므로 개인 정보 보호 목적을 달성합니다. 코드는 다음과 같습니다.
var person = function(spec) {
var that = {}; //新对象
that.getName = function () { return spec.name; }; //使用参数的属性
that.getAge = function() { return spec.age; }; //使用参数的属性
return that; //返回新对象
}
var p4 = person({name: 'Jane', age: 20});
console.log(p4.name); //undefined
console.log(p4.age); //undefined
console.log(p4.getName()); //Jane
console.log(p4.getAge()); //20 person 함수는 name 및 age 속성이 없는 새 개체를 반환하기 때문에 직접 액세스하면 정의되지 않은 결과가 발생합니다. 이름과 나이는 해당 인터페이스에 노출된 두 개의 인터페이스를 통해서만 얻을 수 있습니다.
다층 상속을 추가로 구현하는 것도 매우 편리합니다. 효과는 다음과 같으므로 자세히 설명하지 않겠습니다.
var student = function(spec) {
var that = person(spec); //新对象继承自person
that.getRole = function() { return 'student'; }; //新对象增加方法
that.getInfo = function() {
return spec.name + ' ' + spec.age + ' ' + that.getRole();
};
return that; //返回新对象
};
var p5 = student({name:'Andy', age:12});
console.log(p5.name); //undefined
console.log(p5.getName()); //Andy
console.log(p5.getRole()); //student
console.log(p5.getInfo()); //Andy 12 student추천 관련 기사:
JS 상속--프로토타입 체인 상속 및 클래스 상속_기본 지식
위 내용은 js의 상속 방법은 무엇입니까? 두 가지 js 상속 방법 소개(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
