>  기사  >  웹 프론트엔드  >  JavaScript에서 다중 상속을 구현하는 방법

JavaScript에서 다중 상속을 구현하는 방법

亚连
亚连원래의
2018-06-12 17:48:083140검색

이 글은 주로 자바스크립트에서 다중 상속을 구현하는 방법을 소개하며, 자바스크립트에서 다중 상속을 구현하는 구체적인 단계와 관련 운영 기법을 예제 형식으로 자세히 분석합니다. 도움이 필요한 친구들은 참고할 수 있습니다. 기사에서는 JavaScript에서 다중 상속을 구현하는 방법을 설명합니다. 다음과 같이 참조용으로 모든 사람과 공유합니다.

1. 빈 상위 클래스 생성자를 정의한 다음 프로토타입을 통해 상위 클래스의 속성과 메서드를 정의합니다.

2. 빈 하위 클래스 생성자를 정의한 다음 해당 클래스의 프로토타입을 바인딩합니다. 하위 클래스를 상위 클래스의 인스턴스에 바인딩한 다음 하위 클래스 프로토타입의 상위 클래스를 상위 클래스의 인스턴스에 바인딩합니다. 프로토타입을 통해 하위 클래스에 대한 고유한 속성과 메서드를 설정합니다.

3. 빈 손자 클래스 생성자를 정의한 다음 손자 클래스의 프로토타입을 하위 클래스 인스턴스에 바인딩한 다음 손자 클래스 프로토타입의 상위 클래스를 하위 클래스 인스턴스에 바인딩합니다. 프로토타입을 통해 손자 클래스에 대한 고유한 속성과 메서드를 정의합니다.

4. 손자 객체를 인스턴스화합니다. 이 문서의 하위 클래스인 손자 부모 클래스의 메서드를 호출할 수도 있고, 가장 큰 부모 클래스를 직접 호출할 수도 있습니다. 여기서는 상위 클래스입니다. 현재 개체에 속성과 메서드를 추가할 수도 있습니다.

function Person(){}
Person.prototype.name = "人";// 为人类创建一个name属性
Person.prototype.say = function(content){// 为人类创建一个说话的方法
  if(!this.name){ // 如果对象不存在name属性,则使用原型链的name
    this.name = this.__proto__.name;
  }
  console.log("我是" + this.name + ",我想说"+content);
};
function Parent(){}
Parent.prototype = new Person();  // 设置Parent类继承Person类
Parent.prototype.superClass = new Person();// 设置superClass保存父类Person的方法属性
Parent.prototype.name = "父辈类";// 设置Parent类的name属性
Parent.prototype.say = function(){// 设置Parent类自己的 say 方法
  console.log("我是Parent类的say方法!");
};
function Child(){}
Child.prototype = new Parent();// 设置Child类继承Parent类
Child.prototype.superClass = new Parent();// 设置superClass保存父类Parent的方法属性
Child.prototype.say = function(){  //设置Child类自己的say方法
  console.log("我是Child类的say方法!");
}
var c = new Child();// 实例化一个Child对象
c.say();  // 调用自身原型的say方法,输出:我是Child类的say方法!
c.superClass.say(); // 调用父类Parent的say方法,输出: 我是Parent类的say方法!
c.superClass.superClass.say("哈哈");// 直接调用最大的父类Person的say方法(方法中的this指向Person),输出:我是人,我想说哈哈"
// 用call调用最大的父类Person的say方法(方法中的this指向实例化对象c,但此时c并没有name属性,所以this.name用的是Parent的name)
c.superClass.superClass.say.call(c,"嘻嘻"); // 输出:我是父辈类,我想说嘻嘻
c.name = "子类实例";// 给当前对象增加name属性
// 还是用call调用最大父类Person的say方法(此时c对象中已经有name属性);
c.superClass.superClass.say.call(c,"我是子类的实例化对象"); // 输出:我是子类实例,我想说我是子类的实例化对象

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

동일한 레벨의 구성요소 간 통신을 달성하기 위해 vue에서 eventBus를 사용하는 방법

node.js에서 이미지를 다운로드하는 방법

vue2.0+vue-dplayer를 사용하는 방법 이러한 기술을 사용하여 hls 구현 재생 예

vue2.0 + 요소 UI에서 el-table을 통해 데이터를 Excel로 내보내는 방법

FastClick 소스 코드에 대한 자세한 설명(자세한 튜토리얼)

위 내용은 JavaScript에서 다중 상속을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.