javascript 创建对象的7种模式

使用字面量方式创建一个 student 对象:

1 var student = function (){
2         name : "redjoy",
3         age : 21,
4         sex: women,
5         sayName: function(){
6                  alert(this.name);
7         }
8 };

使用Object.defineProperties() 方法给对象添加属性:(只有IE9+,FF4+,SF5+,OP 12+,Chrome支持)

 1 var student = {};
 2 Object.defineProperties( student,{
 3         name:{
 4             value: "redjoy"
 5         },
 6         age:{
 7             value: 21
 8         },
 9         _year:{
10             value:2015
11         },
12         year:{
13             get:function(){
14                     return  this._year;
15             },
16             set:function(newValue){
17                     if (newValue > 2015){
18                             this._year = newValue;
19                             this.age += newValue -1993;
20                     }
21              }
22          }
23 });

当面对使用Object构造函数和对象字面量创建单个对象时,我们会因为使用同一个接口创建很多对象,产生大量的重复代码。所以,有了创建对象的七种模式:

一、工厂模式(抽象了创建具体对象的过程)

 1 function createStudent(name,age,sex){
 2         var s = new Object();
 3         s.name = name ;
 4         s.age = age ;
 5         s.sex = sex;
 6         s.sayName = function (){
 7                 console.log(this.name);
 8         };
 9         return s;
10 }
11
12 var student1 = createStudent("redjoy",21,"women");
13 var student2 = createStudent("jonny",23,"man");

二、构造函数模式

重写上面的例子:

 1 function Student( name,age,sex){
 2         this.name = name;
 3         this.age = age;
 4         this.sex = sex;
 5         this.sayName = function() {
 6                 console.log(this.name);
 7         };
 8 }
 9
10 var student1 = new Student("redjoy",21,"women");
11 var student2 = new Student("jonny",23,"man");

与工厂模式相比,构造函数模式可以将它的实例标示为一种特定的类型。

三、原型模式

 1 function Student(){
 2 }//构造函数
 3
 4 Student.prototype = {
 5         name :"redjoy",
 6         age : 21,
 7         sex : "women",
 8         sayName : function(){
 9                 console.log(this.name);
10         }
11 };
12
13 var student1 = new Student();
14 var student2 = new Student();

四、组合使用构造函数模式和原型模式(最常见的方式)

优点:构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性,每个实例都会有自己的一份实例属性的副本,但同时又共享着对方法的引用,最大限度地节省了内存。

 1 function Student(name ,age ,sex ){
 2         this.name = name ;
 3         this.age = age ;
 4         this.sex = sex;
 5 }//在构造函数里定义实例属性
 6
 7 Student.prototype = {
 8         constructor : Student,
 9         sayName : funtion(){
10                 console.log(this.name);
11         }
12 }//在原型中定义constructor属性和sayName()方法
13
14
15 var student1 = new Student("redjoy",21,"women");
16 var student2 = new Student("jonny",23,"man");
17
18 console.log(student1.sayName === student2.sayName);//true

五、动态原型模式

优点:把所有信息都封装在了构造函数中,而通过在构造函数中初始化原型(仅在必要的情况下),同时还保持了构造函数和原型的优点。

 1 function Student(name , age ,sex ){
 2            //属性
 3            this.name = name;
 4            this.age = age;
 5            this.sex = sex;
 6            //方法
 7            if (typeof this.sayName != "function"){
 8                 Student.prototype.sayName = function(){
 9                             console.log(this.name);
10                 };
11             }
12 }
13 var student = new Student("redjoy",21,"women");
14 student.sayName();

注意:在使用动态原型模式时,不能使用对象字面量重写原型。

六、寄生构造函数模式

 1 function Student(name , age,sex){
 2         var s = new Object();
 3         s.name = name;
 4         s.age = age;
 5         s.sex = sex;
 6         s.sayName = function(){
 7                 console.log(this.name);
 8         };
 9         return s;
10 }
11
12 var student = new Student("redjoy",21,"women");
13 student.sayName();//"redjoy"

七、稳妥构造函数模式

稳妥对象:指的是没有公告属性,而且其方法也不引用this的对象。

与寄生构造函数模式类似,但存在两点不同:

1. 新创建对象的实例方法不用this

2. 不是要new 操作符调用构造函数

重写上面的例子:

 1 function Student( name, age ,sex ){
 2         //创建要返回的对象
 3         var s = new Object();
 4         //可以在这里定义私有变量和函数与上面类似
 5         //添加方法
 6         s.sayName = function(){
 7                 console.log(name);
 8         };
 9
10         //返回对象
11         return s;
12 }

可根据每个创建对象的模式来选择适合自己的方法,创建函数

(以上作为自己的个人笔记,参考来源于 javascript高级程序设计 第三版)

时间: 2024-09-30 07:31:13

javascript 创建对象的7种模式的相关文章

javascript创建对象的几种模式

虽然Object构造函数或者对象字面量都可以用来创建单个对象,但这些方式有个明显的缺点:使用同一个接口创建很多对象会产生大量的重复代码.为了解决这个问题,人们开始使用工厂模式的一种变体. 1.工厂模式 function createPerson(name, age, job){ var o=new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ alert(this.name); }; retu

javascript创建对象的七种模式

1.工厂模式 1 function createPerson(name,age){ 2 var obj = new Object(); 3 obj.name = name; 4 obj.age = age; 5 function sayName(){ 6 alert(obj.name); 7 }; 8 sayName(); 9 return obj; 10 } 11 var person = createPerson("wutian",22); 2.构造函数模式 1 function

js创建对象的几种模式

//javaScript创建对象的几种模式特点 /*//1 工厂模式function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age=age; o.job=function() { alert(name); }} createPerson("Tom",18,"Teachaer");createPerson("Jack",20,"Student"

JavaScript中创建对象的几种模式

看了js高级程序设计的第六章,很多知识.关于创建对象的几种模式,这里记录一下. 1.工厂模式 1 function createPerson(name, age, job) { 2 var o = new Object(); 3 o.name = name; 4 o.age = age; 5 o.job = job; 6 o.sayName = function() { 7 return this.name; 8 }; 9 return o; 10 } 没有解决对象识别的问题,不能知道一个对象的

JavaScript 创建对象的七种方式

转自:xxxgitone.github.io/2017/06/10/JavaScript创建对象的七种方式/ JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以创建单个对象,显然这两种方式会产生大量的重复代码,并不适合量产.接下来介绍七种非常经典的创建对象的方式,他们也各有优缺点. 工厂模式 1 function createPerson(name, job) { 2 var o = new Object() 3 o.name = name 4 o.job

JavaScript中创建对象的7种模式

ECMA-262把对象定义为:"无需属性的集合,其属性可以包含基本值.对象或者函数."严格来讲,这就相当于说明对象是一组没有特定顺序的值.对象的每个属性或方法都有一个名字,而每个名字都映射到一个值.正因为这样,我们可以把ECMAScript的对象想象成散列表:无非就是一组名对值,其中值可以是数据或函数. 创建自定义对象最简单的方式就是创建一个Object的实例,然后再为他添加属性和方法,如下所示: var person = new Object(); person.name = &qu

javascript面向对象系列第二篇——创建对象的5种模式

× 目录 [1]字面量 [2]工厂模式 [3]构造函数[4]原型模式[5]组合模式 前面的话 如何创建对象,或者说如何更优雅的创建对象,一直是一个津津乐道的话题.本文将从最简单的创建对象的方式入手,逐步介绍5种创建对象的模式 [1]对象字面量 一般地,我们创建一个对象会使用对象字面量的形式 [注意]有三种方式来创建对象,包括new构造函数.对象直接量和Object.create()函数,详细情况移步至此 var person1 = { name: "bai", age : 29, jo

javascript面向对象系列——创建对象的5种模式

如何创建对象,或者说如何更优雅的创建对象,一直是一个津津乐道的话题.本文将从最简单的创建对象的方式入手,逐步介绍5种创建对象的模式 对象字面量 一般地,我们创建一个对象会使用对象字面量的形式 [注意]有三种方式来创建对象,包括new构造函数.对象直接量和Object.create()函数 var person1 = { name: "bai", age : 29, job: "Software Engineer", sayName: function(){ aler

创建对象的几种模式

1.工厂模式 function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age=age; o.job=job; o.sayName=function(){ alert(this.name); }; return o; } var person1=createPerson("Nicholas",29,"Software Engineer"); var person2=createPe