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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

坐等拆迁砸电脑

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值