对象
- JavaScript 是一门面向对象脚本语言,在 JavaScript 中,万物皆对象。而对象只是带有属性和方法的特殊数据类型,它拥有属性和方法;
- 属性,可以理解为对象的特征;
- 方法,是能够在对象上执行的动作,也就是对象能够做什么,其实也就是写在对象里的函数。如果我们把汽车当成一个对象,那么汽车的颜色和大小就是对象的属性,汽车的启动和刹车就是对象的方法。
创建对象的方法
关于原型、原型链和原型继承请看 这里。
方法一:通过字面量创建对象
代码:
<script>
// 1. 声明一个空对象
var person1 = {};
// 2. 给对象添加属性和方法
person1.name = 'Li Si 01';
person1.say = function () {
console.log('Hello, I am ' + this.name + '.');
};
// 3. 访问对象的属性和方法
console.log(person1.name);
person1.say();
</script>
也可以这样写:
<script>
// 声明一个对象
var person1 = {
name: 'Li Si 01',
say: function () {
console.log('Hello, I am ' + this.name + '.');
}
};
</script>
效果演示:
方法二:通过 new 关键字来创建对象
代码:
<script>
// 1. 声明一个对象
var person2 = new Object();
// 2. 为对象添加属性和方法
person2.name = 'Li Si 02';
person2.say = function () {
console.log('Hello, I am ' + this.name + '.');
};
// 3. 访问对象的属性和方法
console.log(person2.name);
person2.say();
</script>
方法一和方法二不够智能,每次实例化一个对象都要写一大堆的代码,在实际中比较少用。
效果演示:
方法三:通过工厂模式创建对象
代码:
<script>
function createPerson(name) {
// 1. 声明一个空对象
var obj = {};
// 2. 为对象添加属性和方法
obj.name = name;
obj.say = function () {
console.log('Hello, I am ' + obj.name + '.');
};
// 3. 返回对象
return obj;
}
// 4. 实例化对象
var person3 = createPerson('Li Si 03');
// 5. 访问对象的属性和方法
console.log(person3.name);
person3.say();
</script>
效果演示:
方法四:通过构造函数创建对象
在 JavaScript 中,通过定义构造函数来定义一个类,这时的构造函数就是一个类。
代码:
<script>
// 1. 声明一个有参构造函数
function Person(name) {
// 2. 为对象添加属性和方法
this.name = name;
this.say = function () {
console.log('Hello, I am ' + this.name + '.');
}
}
// 3. 实例化对象
var person4 = new Person('Li Si 04');
// 4. 访问对象的属性和方法
console.log(person4.name);
person4.say();
</script>
效果演示:
方法四咋一看是不错,但是太耗内存,每次实例化一个对象都要再一次声明所有的属性和方法,假如有一些属性或方法是相同的,这样做就很消耗内存,也没必要。
方法五:通过原型模式创建对象
代码:
<script>
// 1. 声明一个无参构造函数
function Person() {
}
// 2. 为对象添加属性和方法
Person.prototype.name = 'Li Si 05';
Person.prototype.say = function () {
console.log('Hello, I am ' + this.name + '.');
};
// 3. 实例化对象
var person5 = new Person();
// 4. 访问对象的属性和方法
console.log(person5.name);
person5.say();
</script>
通过原型创建对象的好处就是可以将一些对象公有的属性和方法移到这些实例共有的原型上,缺点就是这样写会导致对象所有的属性值和方法都是相同的。
效果演示:
方法六:构造函数和原型组合模式
代码:
<script>
// 1. 声明一个有参构造函数
function Person(name) {
this.name = name;
}
// 2. 为对象的原型添加属性和方法
Person.prototype.what = 'Hello';
Person.prototype.say = function () {
console.log(this.name + ' say ' + this.what + ' to you.');
};
// 3. 实例化对象
var person6 = new Person('Li Si 06');
// 4. 访问对象的属性和方法
console.log(person6.name);
person6.say();
</script>
效果演示:
方法六结合了构造函数和原型模式的优点,将对象共有的属性和方法移到原型里,对象特有的属性和方法写在构造函数里。
参考资料: