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

  1. 构造函数:构造函数是一种特殊的函数,用于创建对象。在 ES5 中,可以使用构造函数来定义类,并使用 new 操作符来创建对象。例如:
function Person(name, age) {
  this.name = name;
  this.age = age;
}

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

  1. 原型链:原型链是用于实现继承的一种机制。在 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"

  1. 继承:继承是面向对象编程中的一个重要概念。在 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 的所有属性和方法,并且还能添加自己的属性和方法。

  1. 原型方法 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 方法定义在原型上,也可以将其定义在实例上。如果将其定义在原型上,那么所有的实例都可以使用该方法;如果将其定义在实例上,那么每个实例都有自己的该方法。

  1. 类的静态方法:在 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 类本身上的,而不是定义在实例上的方法。

你可能感兴趣的:(javascript,原型模式,开发语言)