javascript_javascript 기술의 다양한 상속 방법에 대해 이야기해 보세요.

JS에는 상속 기능이 없지만 생성자, 프로토타입 및 기타 방법을 사용하여 상속 기능을 구현하면 국가를 구할 수 있습니다.

 var o=new Object();

사실 생성자를 사용하여 객체를 인스턴스화하는 것은 상속입니다. Object의 모든 속성과 메서드를 여기에서 사용할 수 있습니다. 그렇다면 Object 객체의 메서드에 액세스할 수 있는 이유는 무엇입니까? 실제로는 해당 프로토타입 객체의 메서드에 액세스하는 것입니다.

console.log(o.__proto__ === Object.prototype) // true 继承的本质
console.log(o.__proto__ === Object);
console.log(Object.__proto__ === Function.prototype);
console.log(Function.prototype.__proto__ === Object.prototype);
console.log(Number.__proto__ === Function.prototype);

물체는 모든 것의 조상이다.

1. 내장 객체는 모두 객체에서 상속됩니다.

var myNumber = new Number(10); //实例化一个数字对象

문자열 개체는 실제로 문자열 개체의 인스턴스화입니다.

var s = ‘str';

자체 속성 메서드에 액세스하는 것 외에도 상위 클래스 속성 메서드에도 액세스할 수 있습니다.

console.log(s.toUpperCase());
console.log(s.toString());
 

2. 커스텀 객체 상속

// 父类
  var Person = function(){
   this.name='AV老师';
   this.test='测试中的毕福剑';
  } 
  Person.prototype={
   say:function(){
    console.log('呀买碟');
   }
  }
  // 构造函数
  var Canglaoshi = function(name,age,cup){
   this.name=name;
   this.age=age;
   this.cup=cup;
  }
  // 继承person,则拥有person原型中的方法
  Canglaoshi.prototype=new Person();
  Canglaoshi.prototype.ppp=function(){
   console.log('啪啪啪');
  }
  // 苍老师拥有了person中的方法
  var xiaocang=new Canglaoshi('空空',18,'E');
  xiaocang.say();
  console.log(xiaocang.name);
  console.log(xiaocang.age);
  console.log(xiaocang.cup);
  console.log(xiaocang.test);

3. 사용자 정의 객체 상속의 프로토타입 체인 시연

(function() {
   //父类
   function SuperParent() {
    this.name = 'mike';
   }

   //子类继承父亲 - 二次继承：
   function Parent() {
    this.age = 12;
   }
   Parent.prototype = new SuperParent(); //通过原型，形成链条

   var parent = new Parent();
   console.log("测试父亲可以访问爷爷属性：" + parent.name);
   console.log("测试父亲可以访问自己的属性：" + parent.age);

   //继续原型链继承 - 三次继承
   function Child() { //brother构造
    this.weight = 60;
   }
   Child.prototype = new Parent(); //继续原型链继承


   //原型链测试2
   //儿子集成爷爷
   var child = new Child();
   console.log("测试儿子可以访问爷爷的属性：" + child.name); //继承了Parent和Child,弹出mike
   console.log("测试儿子可以访问父亲的属性：" + child.age); //弹出12
   console.log("测试儿子可以访问自己独特的属性：" + child.weight); //弹出12

   //原型链测试
   //爷爷可以访问Object中的方法
   var test = new SuperParent();
   console.log(test.name);
   console.log(test.toString());
   //访问链： SuperParent构造对象--》SuperParent原型对象--》Object对象--》Obect原型对象（找到toString方法）--》null

   console.log(child.name);
   //原型链：首先访问Child构造函数，发现没有name属性--》寻找__proto__，判断起指针是否为空--》指向Child原型函数，寻找有没有name属性--》
   //---》没有找到，则判断其__proto__属性是否为null，如果不为null，继续搜索--》找到parent对象，检查是否有name属性，没有。。。。
  })()

4. 생성자 상속

(function() {
   function People() {
    this.race = '人类';
   }
   People.prototype = {
    eat: function() {
     alert('吃吃吃');
    }
   }

   /*人妖对象*/
   function Shemale(name, skin) {
    People.apply(this, arguments); // 用call也是一样的，注意第二个参数
    this.name = name;
    this.skin = skin;
   }
   //实例化 
   var zhangsan = new Shemale('张三', '黄皮肤')
   console.log(zhangsan.name); //张三
   console.log(zhangsan.skin); //黄皮肤
   console.log(zhangsan.race); //人类
  })()

5. 조합 상속

(function() {
   function Person(name, age) {
    this.name = name;
    this.age = age;
   }
   Person.prototype.say = function() {}

   function Man(name, age, no) {
    /*会自动调用Person的方法，同时将name age传递过去*/
    Person.call(this, name, age);
    //自己的属性
    this.no = no;
   }
   Man.prototype = new Person();

   var man = new Man("张三", 11, "0001");
   console.log(man.name);
   console.log(man.age);
   console.log(man.no);
  })()

6. 상속 복사

<script>
  +(function() {
   var Chinese = {
    nation: '中国'
   };
   var Doctor = {
    career: '医生'
   };
   //  请问怎样才能让"医生"去继承"中国人"，也就是说，我怎样才能生成一个"中国医生"的对象？
   //  这里要注意，这两个对象都是普通对象，不是构造函数，无法使用构造函数方法实现"继承"。
   function extend(p) {
    var c = {};
    for (var i in p) {　　　　　
     c[i] = p[i];　　　　
    }
    c.uber = p;
    return c;
   }
   var Doctor = extend(Chinese);
   Doctor.career = '医生';
   alert(Doctor.nation); // 中国
  })()
 </script>

7. 기생 조합 상속

<script>
  +(function() {
   /*继承的固定函数*/
   function inheritPrototype(subType, superType) {
    var prototype = Object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
   }

   function Person(name) {
    this.name = name;
   }
   Person.prototype.say = function() {}

   function Student(name, age) {
    Person.call(this, name);
    this.age = age;
   }

   inheritPrototype(Student, Person);
   var xiaozhang = new Student('小张', 20);
   console.log(xiaozhang.name)
  })()
 </script>

8. 타사 프레임워크를 사용하여 상속 구현

<script src='simple.js'></script> 
 <!-- 使用的第三方框架simple.js -->
 <script>
  +(function() { < script >
    var Person = Class.extend({
     init: function(age, name) {
      this.age = age;
      this.name = name;
     },
     ppp: function() {
      alert("你懂的");
     }
    });
   var Man = Person.extend({
    init: function(age, name, height) {
     this._super(age, name);
     this.height = height;
    },
    ppp: function() {
     /*调用父类的同名方法*/
     this._super();
     /*同时又可以调用自己的方法*/
     alert("好害羞 -，- ");
    }
   });


   var xiaozhang = new Man(21, '小张', '121');
   xiaozhang.ppp();
  })()

자바스크립트 프로그래밍을 배우시는 모든 분들에게 도움이 되었으면 좋겠습니다.