JavaScript中创建对象的几种方式

最新推荐文章于 2024-04-08 00:00:00 发布

原创最新推荐文章于 2024-04-08 00:00:00 发布 · 359 阅读

0 ·

CC 4.0 BY-SA版权

web前端专栏收录该内容

34 篇文章

订阅专栏

本文详细阐述了JavaScript中对象的创建方式，包括使用new操作符、对象字面量、工厂模式、构造函数模式和原型模式。通过实例对比，帮助开发者理解和掌握不同创建方式的特点与应用场景。

构造函数

高级程序设计一书中，第83页
new操作符后面跟构造函数
var person = new Object();
person.name = “wei”;
person.age = 18;

对象字面量

简化包含大量属性的对象的过程
var person = {
name:”wei”,
age:18
};
(ps:注意上面的标点符号

工厂模式

fuction createPerson(name,age){
var o = new Object();
o.name = name;
o.age = age;
o.sayName = fuction(){alert(this.name);}
return o;
}
var person1 = createPerson(“wei”,18);
var person2 = createPerson(“zhang”,29);

构造函数模式

创建自定义构造函数
fuction Person(name,age){
this.name = name;
this.age = age;
this.sayName = function(){
alert(this.name);
};
}
var person1 = new Person(“wei”,18);
var person2 = new Person(“zhang”,29);

person1和person2都有一个constructer属性，指向Person

person1中的sayName和person2中的sayName是不一样的，不同实例上的同名函数是不相等的，因为在JavaScript中函数也是一种对象
因此上面的代码可以写成：
fuction Person(name,age){
this.name = name;
this.age = age;
this.sayName = sayName;//一个指向函数的指针；
}
function sayName(){
alert(this.name);}
var person1 = new Person(“wei”,18);
var person2 = new Person(“zhang”,29);
在全局作用域中定义了函数sayName，但是这种方法破坏了函数的封装性，可以用原型模式解决这个问题。

原型模式

每个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象。可以理解成，prototype是通过构造函数创建的对象的原型对象
function Person(){}
Person.prototype.name = “wei”;
Person.prototype.age = 18;
Person.prototype.sayName = function(){
alert(this.name);
};

var person1 = new Person();
var person2 = new Person();
alert(person1.sayName == person2.sayName);//true