자바스크립트에서 상속을 구현하는 방법(코드)

이 기사는 JavaScript 상속의 구현 방법(코드)에 관한 것입니다. 필요한 친구가 참고할 수 있기를 바랍니다.

JS에서 상속을 구현하는 방법은 다양합니다. 다음은 더 권장되는 방법입니다.

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

function inheritPrototype(subType, superType) {
    var newObj = object(superType.prototype);
    newObj.constructor = subType;
    subType.prototype = newObj;
}

function People() {
    this.cls = 'people';
}

People.prototype.say = function(name) {
    name = name || this.cls;
    console.log('My class is '+ name);
}

function Student() {
    People.call(this);
    this.type = 'student';
}

inheritPrototype(Student, People);

Student.prototype.goToSchool = function() {
    console.log('I go to school every day.');
}

// 测试
var stu = new Student();

console.log('class: ' + stu.cls); // class: people
console.log('type: ' + stu.type); // type: student
stu.say(); // My class is people
stu.goToSchool (); // I go to school every day.

사실, javascript는 더 간단한 구현 방법을 제공합니다. 여기서는 바퀴를 다시 만들 필요가 없으며 방법은 완벽하지 않습니다. MDN 예:

// Shape - 父类(superclass)
function Shape() {
  this.x = 0;
  this.y = 0;
}

// 父类的方法
Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info('Shape moved.');
};

// Rectangle - 子类(subclass)
function Rectangle() {
  Shape.call(this); // call super constructor.
}

// 子类续承父类
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

console.log('Is rect an instance of Rectangle?',
  rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?',
  rect instanceof Shape); // true
rect.move(1, 1); // Outputs, 'Shape moved.'

여러 객체를 상속하려면 혼합을 사용할 수 있습니다. 방법:# 🎜🎜#

function MyClass() {
     SuperClass.call(this);
     OtherSuperClass.call(this);
}

// 继承一个类
MyClass.prototype = Object.create(SuperClass.prototype);
// 混合其它
Object.assign(MyClass.prototype, OtherSuperClass.prototype);
// 重新指定constructor
MyClass.prototype.constructor = MyClass;

MyClass.prototype.myMethod = function() {
     // do a thing
};

추천 관련 기사:

Javascript에서 이 키워드 사용(코드 포함)

# 🎜🎜 #jQuery 공세를 구현하는 방법은 무엇입니까? 사격 효과를 달성하는 jQuery 코드

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