JavaScript创建对象的几种方式
1. 简单方式
可以直接通过new Object() 创建:
var person = new Object()
person.name = 'jack'
person.age = 12
person.sayName = function(){
console.log(this.name)
}
每次创建通过new Object() 比较麻烦,所以可以通过它的简单形式对象字面量来创建
var person = {
name: "jack",
age: 18,
sayName: function(){
cosnole.log(this.name)
}
}
对于上面的写法固然没有问题,但是如果我们要生成两个或者对个person实例对象呢?
var person1 = {
name: "jack",
age: 18,
sayName: function(){
cosnole.log(this.name)
}
}
var person2 = {
name: "rose",
age: 18,
sayName: function(){
cosnole.log(this.name)
}
}
通过上面的代码我们不难看出,这样的代码太过冗余,重复性太高
2. 简单方式的改进:工厂函数
我们可以写一个函数,解决代码重复问题
function createPerson (name,age){
return {
name: name,
age: age,
sayName: function(){
console.log(this.name)
}
}
}
然后生成实例对象:
var p1 = createPerson('jack',18)
var p2 = createPerson('rose',18)
如上,这样封装代码会少很多,通过工厂模式我们解决了创建多个相似代码冗余的问题,但是没有解决对象识别的问题(即怎样知道一个对象的类型)
3. 构造函数
一种更优的工厂函数就是下面这样,构造函数:
function Person(name,age){
this.name = name,
this.age = age,
this.sayName = function(){
console.log(this.name)
}
}
var p1 = new Person('jack',18)
p1.sayName()
var p2 = new Person('rose',18)
p2.sayName()
解析构造函数代码的执行
在上面的示例中,Person()函数取代了createPerson()函数,但是实现的效果是一样的,这是为什么呢?
我们可以注意到,Person中代码与createPerson有以下几点不同之处:
1. 没有显示创建对象
2. 直接将属性和方法赋给了this对象
3. 没有return语句
4. 函数名是大写的Person
而要创建Person实例,则必须要使用new操作符,以这种方式调用构造函数会经历以下4个步骤:
1. 创建一个新对象
2. 将构造函数的作用域赋给新对象(因此this指向了这个新对象)
3. 执行构造函数中的代码
4. 返回新对象
- 还没有人评论,欢迎说说您的想法!