JavaScript 상속 방법에 대한 자세한 설명(1)

대부분의 객체지향 언어는 상속을 지원합니다. 상속의 가장 중요한 장점은 코드 재사용을 통해 대규모 소프트웨어 시스템을 구축할 수 있다는 것입니다. 클래스가 다른 클래스의 속성 및/또는 메서드를 재사용할 수 있는 경우 이를 상속이라고 합니다. 이러한 관점에서 JS의 상속 방식을 살펴보겠습니다. JS의 상속 방식은 클래스 작성 방식과 밀접한 관련이 있습니다. 클래스를 작성하는 방법에 따라 상속 방법도 달라집니다. 다양한 인기 JS 라이브러리에도 서로 다른 상속 방법이 있습니다. 가장 간단한 재사용부터 시작하세요.

1. 생성자 메소드에 클래스를 작성하고 메소드 호출을 통해 상위 클래스의 속성/필드를 하위 클래스에 복사하여 상속을 달성합니다.

여기서 상위 클래스와 하위 클래스는 생성자 메소드에 작성됩니다. , 프로토타입 없이. 서브클래스는 상위 클래스 함수를 호출하여 상위 클래스의 속성을 복사합니다.

/**
 * 父类Polygon:多边形
  * @param {Object} sides 
  */
    function Polygon(sides) {
    this.sides = sides;
    this.setSides = function(s) {this.sides=s;}
  }
    /**
  * 子类Triangle:三角形
   */function Triangle() {this.tempfun = Polygon;//父类引用赋值给子类的一个属性
   tempfunthis.tempfun(3);//调用
   delete this.tempfun;//删除该属性  
   this.getArea = function(){};}//new个对象
   var tri = new Triangle();console.log(tri.sides);//继承的属性
   console.log(tri.setSides);//继承的方法
   console.log(tri.getArea);//自有的方法
   //缺点是对于Triangle的实例对象用instanceof为父类Polygon时是false
   console.log(tri instanceof Triangle);//trueconsole.log(tri instanceof Polygon);//false
因为 JavaScript中具名函数的多种调用方式 ，子类还可以有以下的多种实现方式。只是在子类中调用父类方法不同而已。
function Triangle() {
Polygon.call(this,3); //call方式调用父类
this.getArea = function(){};
}
function Triangle() {
Polygon.apply(this,[3]); //apply方式调用父类this.getArea = function(){};
}
function Triangle() {
var temp = new Polygon(3); //new方式调用父类
for(atr in temp) { //全部复制给子类this[atr] = temp[atr];
}
this.getArea = function(){};
}

이 방법의 단점은 인스턴스 오브로 상위 클래스를 확인할 때 하위 클래스의 인스턴스 객체가 항상 false라는 것입니다. 이는 Java의 상속 "is a" 관계와 반대됩니다.

2. 프로토타입 방식으로 클래스를 작성하고, 프로토타입 방식으로 상속합니다.

Core JS 자체 객체 시스템은 프로토타입 방식(프로토타입 기반)을 사용하여 상속됩니다. 즉, 핵심 JS는 공통 클래스 상속(클래스 기반) 시스템 대신 프로토타입 상속을 사용하여 자신만의 객체 시스템을 구현합니다. 직장에서는 프로토타입을 사용하여 상속을 구현하고 코드 재사용을 통해 자체 기능 모듈을 구축할 수도 있습니다.

/**
 * 父类Polygon:多边形
 * 
 */
function Polygon() {}
Polygon.prototype.sides = 0;
Polygon.prototype.setSides = function(s) {this.sides=s;}
/**
 * 子类Triangle:三角形
 */
function Triangle() {}
Triangle.prototype = new Polygon(); //这是原型继承关键的一句
Triangle.prototype.getArea = function(){}
//new个对象
var tri = new Triangle();
console.log(tri.sides);//继承的属性
console.log(tri.setSides);//继承的方法
console.log(tri.getArea);//自有方法
//instanceof测试
console.log(tri instanceof Triangle);//true，表明该对象是三角形
console.log(tri instanceof Polygon);//true，表明三角形也是多边形

하위 클래스가 상위 클래스 Polygon의 side 속성과 setSides 메소드를 상속한다는 출력을 볼 수 있지만 측면은 0인데 어떻게 삼각형이 될 수 있습니까? 삼각형으로 만들려면 tri.setSides(3)를 호출해야 합니다. 이것은 매우 불편한 것 같습니다. 매개변수를 전달할 수 없다는 점은 프로토타입 방법의 단점입니다. 장점은 올바르게 유지 관리된다는 것입니다.

3. 생성자/프로토타입 결합 방식으로 클래스를 작성하고, 이전 메서드를 사용하여 상속합니다.

이런 방식으로 상위 클래스와 하위 클래스의 속성이 모두 생성자에 걸려 있게 됩니다. 메소드는 모두 생성자에 매달려 있습니다. 프로토타입

/**
 * 父类Polygon:多边形
 */
function Polygon(sides) {
this.sides = sides;
}
Polygon.prototype.setSides = function(s) {this.sides=s;}
/**
 * Triangle 三角形
 * @param {Object} base 底
 * @param {Object} height 高
 */
function Triangle(base,height) {
Polygon.call(this,3);//复制父类属性给自己
this.base = base;
this.height = height;
}
Triangle.prototype = new Polygon();//复制父类方法给自己
Triangle.prototype.getArea = function(){ //最后定义自己的方法
return this.base*this.height/2;
}
//new个对象
var tri = new Triangle(12,4);
console.log(tri.sides);//继承的属性
console.log(tri.setSides);//继承的方法
console.log(tri.base);//自有属性
console.log(tri.height);//自有属性
console.log(tri.getArea);//自有方法
//instanceof测试，表明正确的维护了"is a"的关系
console.log(tri instanceof Triangle);//true，表明该对象是三角形
console.log(tri instanceof Polygon);//true，表明三角形也是多边形

.

위 내용은 JavaScript 상속 방법에 대한 자세한 설명(1)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!