ES5中面向对象的一些高级概念和技巧

构造函数：构造函数是一种特殊的函数，用于创建对象。在 ES5 中，可以使用构造函数来定义类，并使用 new 操作符来创建对象。例如：

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

var person1 = new Person('John', 30);
var person2 = new Person('Jane', 25);

原型链：原型链是用于实现继承的一种机制。在 ES5 中，每个对象都有一个指向其原型（prototype）的引用。如果我们试图访问一个对象的属性或方法，但该对象本身没有该属性或方法，JavaScript 就会查找该对象的原型，以查看是否有该属性或方法。如果没有找到，则继续查找原型的原型，直到找到为止。例如：

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

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

var person1 = new Person('John', 30);
person1.sayHello(); // 输出："Hello, my name is John"

继承：继承是面向对象编程中的一个重要概念。在 ES5 中，可以使用原型链来实现继承。例如：

function Animal() {
  this.type = 'animal';
}

Animal.prototype.sayType = function() {
  console.log('I am a ' + this.type);
};

function Dog(name, age) {
  Animal.call(this);
  this.name = name;
  this.age = age;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

var dog1 = new Dog('Lucky', 2);
dog1.sayHello(); // 输出："Hello, my name is Lucky"
dog1.sayType(); // 输出："I am a animal"

在这个例子中，我们定义了一个 Animal 类，其中有一个 sayType 方法。然后我们定义了一个 Dog 类，它继承自 Animal，同时还有一个 sayHello 方法。我们使用 Object.create 方法来创建 Dog 的原型，使其继承自 Animal 的原型。最后，我们用 Dog 的原型替换掉了原来的原型，这样，Dog 就拥有了 Animal 的所有属性和方法，并且还能添加自己的属性和方法。

原型方法 vs 实例方法：在 ES5 中，可以将方法定义在原型上，也可以将方法定义在实例上。如果一个方法定义在原型上，那么所有的实例都可以使用该方法。如果一个方法定义在实例上，那么每个实例都有自己的该方法，但这样会占用更多的内存。例如：

// 原型方法
function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

var person1 = new Person('John', 30);
var person2 = new Person('Jane', 25);
person1.sayHello(); // 输出："Hello, my name is John"
person2.sayHello(); // 输出："Hello, my name is Jane"

// 实例方法
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log('Hello, my name is ' + this.name);
  };
}

var person1 = new Person('John', 30);
var person2 = new Person('Jane', 25);
person1.sayHello(); // 输出："Hello, my name is John"
person2.sayHello(); // 输出："Hello, my name is Jane"

在这个例子中，我们定义了一个 Person 类，可以将 sayHello 方法定义在原型上，也可以将其定义在实例上。如果将其定义在原型上，那么所有的实例都可以使用该方法；如果将其定义在实例上，那么每个实例都有自己的该方法。

类的静态方法：在 ES5 中，可以使用函数的属性或方法来实现静态方法。静态方法是定义在类本身上的，而不是定义在实例上的方法。例如：

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

Person.sayHelloToAll = function(people) {
  people.forEach(function(person) {
    console.log('Hello, ' + person.name);
  });
};

var person1 = new Person('John', 30);
var person2 = new Person('Jane', 25);
Person.sayHelloToAll([person1, person2]); // 输出："Hello, John" 和 "Hello, Jane"

在这个例子中，我们定义了一个 Person 类，同时也定义了一个静态方法 sayHelloToAll，它可以接受一个 Person 实例的数组，并向每个 Person 实例打招呼。该方法是定义在 Person 类本身上的，而不是定义在实例上的方法。

ES5中面向对象的一些高级概念和技巧

猜你喜欢