JavaScript로 객체를 생성하는 실제적인 방법과 객체 상속에 대한 자세한 설명

JavaScript로 객체를 생성하는 실제적인 방법과 객체 상속에 대한 자세한 설명_기본 지식

WBOY

풀어 주다： 2016-05-16 15:11:31

원래의

1264명이 탐색했습니다.

이 글의 관례: 특별한 선언이 없으면 속성은 속성이나 메소드를 참조합니다.

객체 생성과 객체 상속은 실제로 동일합니다. 필요한 인스턴스 객체는 생성자를 통해 개인 속성을 얻고 프로토타입 체인을 통해 공유 속성을 얻습니다. 좋은 방법은 무엇입니까? 프라이빗 속성은 생성자를 통해 획득되며(인스턴스의 사용자 지정 프라이빗 속성에 관계없이) 다시 작성할 필요가 없습니다. 공유 속성은 프로토타입 체인을 통해 발견되며 반복적으로 생성할 필요가 없습니다.

보편적 접근

생성자 패턴과 프로토타입 패턴의 조합을 사용하여 객체 생성

function HNU_student(name) {
  this.name = name;
  this.sayName = function() {
    return this.name;
  };
}
HNU_student.prototype = {
  school: 'HNU',
  saySchool: function() {
    return this.school;
  }
};
Object.defineProperty(HNU_student, 'constructor', {value: HNU_student});

var hiyohoo = new HNU_student('xujian');

로그인 후 복사

프로토타입은 리터럴을 통해 다시 작성되며, 프로토타입의 생성자는 Object를 가리킵니다. 필요한 경우 생성자를 재정의해야 합니다.

기생 조합 상속

function object(o) {
  function F() {};
  F.prototype = o;
  return new F();
}
function inheritPrototype(child, parent) {
  var prototype = object(parent.prototype);
  prototype.constructor = child;
  child.prototype = prototype;
}

function HNU_student(name) {
  this.name = name;
  this.sayName = function() {
    return this.name;
  };
}
HNU_student.prototype.school = 'HNU';
HNU_student.prototype.saySchool = function() {
  return this.school;
};

function Student_2011(name, number) {
  HNU_student.call(this, name);
  this.number = number;
  this.sayNumber = function() {
    return this.number;
  }
}
inheritPrototype(Student_2011, HNU_student);
Student_2011.prototype.graduationTime = 2015;
Student_2011.prototype.sayGraduationTime = function() {
  return this.graduationTime;
};

var hiyohoo = new Student_2011('xujian', 20110803203);

로그인 후 복사

object()의 역할: 매개변수로 전달된 객체를 인스턴스의 프로토타입으로 변환하고, 객체의 속성을 모든 인스턴스에서 공유합니다.

공유 속성: 상속프로토타입(Student_2011, HNU_student);, 하위 생성자 프로토타입은 슈퍼 생성자 프로토타입의 인스턴스가 되고, 슈퍼 생성자 프로토타입의 속성은 하위 생성자와 공유됩니다.
Private 속성: HNU_student.call(this, name);, 서브 생성자를 통해 인스턴스 생성 시 슈퍼 생성자를 호출하여 프라이빗 속성을 생성합니다.

객체를 생성하는 다른 방법

동적 프로토타입 모드

function HNU_student(name) {
  this.name = name;
  this.sayName = function() {
    return this.name;
  };

  if (!HNU_student.prototype.school) {
    HNU_student.prototype.school = 'HNU';
    HNU_student.prototype.saySchool = function() {
      return this.school;
    };
  }
}

var hiyohoo = new HNU_student('xujian');

로그인 후 복사

프로토타입에 정의된 공유 속성을 생성자에 넣고, 판단문을 사용하고, 인스턴스 생성을 위해 생성자를 처음 호출할 때 프로토타입 공유 속성을 초기화합니다.

기생 생성자 패턴

function SpecialArray() {
  var values = new Array();
  values.push.apply(values, arguments);
  values.toPipedString = function() {
    return this.join('|');
  };

  return values;
}

var colors = new SpecialArray('red', 'black', 'white');

로그인 후 복사

은 기본 생성자에 특수 속성을 추가하는 데 사용됩니다.

객체 상속의 다른 방법

결합 상속

function HNU_student(name) {
  this.name = name;
  this.sayName = function() {
    return this.name;
  };
}
HNU_student.prototype.school = 'HNU';
HNU_student.prototype.saySchool = function() {
  return this.school;
};
function Student_2011(name, number) {
  HNU_student.call(this, name);
  this.number = number;
  this.sayNumber = function() {
    return this.number;
  };
}
Student_2011.prototype = new HNU_student();
Student_2011.prototype.constructor = Student_2011;
Student_2011.prototype.graduationTime = 2015;
Student_2011.prototype.sayGraduationTime = function() {
  return this.graduationTime;
}
var hiyohoo = new Student_2011('xujian', 20110803203);

로그인 후 복사

공유 속성: Student_2011.prototype = new HNU_student();, 하위 생성자의 프로토타입은 슈퍼 생성자의 프로토타입을 가리키고, 인스턴스는 프로토타입 체인을 통해 모든 공유 속성을 찾습니다.
Private 속성: HNU_student.call(this, name);, 서브 생성자를 통해 인스턴스 생성 시 슈퍼 생성자를 호출하여 프라이빗 속성을 생성합니다.

결함: 슈퍼 생성자가 두 번 호출되었습니다. Student_2011.prototype = new HNU_student(); 동시에 상위 생성자에 의해 정의된 전용 속성은 하위 생성자 프로토타입에 생성되며 이러한 프로토타입의 전용 속성은 동일한 이름의 속성으로 덮어쓰여집니다. 사례.

프로토타입 상속, 기생 상속

function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}
var student1 = {
  school: 'HNU',
  saySchool: function() {
    return this.school;
  }
};
var student2 = object(student1);

로그인 후 복사

Object.creat()는 ECMAScript5의 새로운 메소드입니다. 하나는 프로토타입인 원본 객체이고 다른 하나는 속성을 재정의하거나 추가하는 객체입니다. ().

var student1 = {
  name: 'xujian',
  school: 'HNU'
};
var student2 = Object.create(student1, {
  name: {
    value: 'huangjing'
  }
});

로그인 후 복사

기생 상속은 프로토타입 상속을 기반으로 객체를 향상시키기 위해 추가 속성을 추가합니다.

function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}
function creatAnother(original) {
  var clone = object(original);
  clone.sayHi = function() {
    alert('Hi!');
  };
  return clone;
}
var student1 = {
  school: 'HNU',
  saySchool: function() {
    return this.school;
  }
};
var student2 = creatAnother(student1);

로그인 후 복사

프로토타입 상속과 기생 상속은 기존 개체와 유사한 인스턴스 개체를 만드는 데 사용됩니다.