> 웹 프론트엔드 > JS 튜토리얼 > ES5 예제는 JavaScript의 다양한 상속 방법을 자세히 설명합니다.

ES5 예제는 JavaScript의 다양한 상속 방법을 자세히 설명합니다.

小云云
풀어 주다: 2018-02-03 14:31:07
원래의
1607명이 탐색했습니다.

가벼운 스크립팅 언어인 Javascript는 ES6 및 node.js의 등장 이후 새로운 차원으로 발전했습니다. 객체 생성을 위한 새로운 클래스 구문 형식이 ES6에 등장했지만 여전히 구문 설탕이지만 시작해야 합니다. ES6은 상속 구현을 이해하기 위해 JavaScript의 기본 구현을 사용하여 보다 간결한 고정 클래스 선언 방법을 제공합니다.

자바스크립트 상속에 대해서는 개발자마다 서로 다른 이해를 갖고 있는 것 같아요. 크게 네 가지 유형으로 나뉘는 것 같아요

 - 原型链继承
 - 对象冒充继承(构造函数继承 不过我不喜欢这个名字)
 - 组合继承
 - 寄生组合继承
로그인 후 복사

상속의 경우 먼저 Animal을 선언한 후 다양한 상속 방법을 논의할 수 있습니다.
    let Animal = (function () {
      function Animal (name) {
        this.name = name || 'Animal';
        this.sleep = function(){
          console.log(this.name + '正在睡觉!');
        }
      }
      Animal.prototype.eat = function(food) {
        console.log(this.name + '正在吃:' + food);
      }
      return Animal;
    })()
로그인 후 복사
  1. 프로토타입 체인 상속

        let Cat = (function () {
          function Cat(){ 
          }
          Cat.prototype = new Animal();
          Cat.prototype.name = 'cat';
          return Cat;
        })()
    로그인 후 복사
    原型链是 javascript 的典型继承方式, 这种继承方式的最大特点就是共享,所有事例共享原型对象中的所有属性和方法, 共享是它的最大优点 也是它的最大缺点, 正对我们的不同需求, 比如大多数情况下我们常常需要某些属性是子类特有的  而一些读取属性方法需要共享,--另外此种继承无法向父类传参,无法实现多继承
    로그인 후 복사
  2. 상속인 척 하는 객체

        let Cat = (function () {
          function Cat(name){
            Animal.call(this,name);
          }
          return Cat;
        })()
    로그인 후 복사
    对象冒充继承就是简单的利用call或者apply方法实现继承,这种继承最大的特点正好与原型链继承相反不能继承原型属性/方法--非共享(子类自有一份), 同样这是它的优点也是它的缺点, 另外它解决了原型链继承中无法向父类传参的缺点, 并且可以实现某种意义上的多继承--(注意这种多继承是打引号的)
    로그인 후 복사
  3. 조합 상속

        let Cat = (function () {
          function Cat(name){
            Animal.call(this, name);
          }
          Cat.prototype = new Animal();
          Cat.prototype.constructor = Cat;
          return Cat;
        })()
    로그인 후 복사
    组合继承是比较好的继承, 他是原型链继承和对象冒充继承的合体, 合理的利用了这两种组合的特点(是特点不是优点^_^),既是子类的实例,也是父类的实例, 但有一个缺点就是调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)造成内存浪费. 这也是用的最多的一种
    로그인 후 복사
  4. 기생 조합 상속

        let Cat = (function () {
          function Cat(name){
            Animal.call(this, name);
          }
          (function(sub, sup){
            var Super = function(){};
            Super.prototype = sup.prototype;
            sub.prototype = new Super();
            sub.prototype.constructor = sub
          })(Cat, Animal)
          return Cat;
        })()
    로그인 후 복사
기생 조합 상속은 조합 상속의 승화라고 개인적으로 생각합니다. , 조합 상속 메모리 낭비 문제 개선 ^_^

관련 권장사항:

상속을 구현하기 위해 자바스크립트를 사용해야 하는 이유는 무엇인가요? 여러 가지 상속 방법을 예제와 함께 자세히 설명

Javascript 프로토타입 체인 상속 방법 사용 및 단점

위 내용은 ES5 예제는 JavaScript의 다양한 상속 방법을 자세히 설명합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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