JavaScript中创建对象的模式汇总


Posted in Javascript onApril 19, 2016

JavaScript中创建对象的模式汇总

**JavaScript创建对象模式:

对象字面量
工厂模式
构造函数模式
原型模式
结合构造函数和原型模式
原型动态模式
**

面向对象的语言大都有一个类的概念,通过类可以创建多个具有相同方法和属性的对象。虽然从技术上讲,javascript是一门面向对象的语言,但是javascript没有类的概念,一切都是对象。任意一个对象都是某种引用类型的实例,都是通过已有的引用类型创建;引用类型可以是原生的,也可以是自定义的。

1、对象字面量

var person = {
    name : 'Nicholas';
    age : '22';
    job :"software Engineer"
    sayName: function() {
      alter(this.name);
  }
}

例子中创建一个名为person的对象,并为它添加了三个属性(name,age,job)和一个方法(sayName()),其中,sayName()方法用于显示this.name(被解析为person.name)的值。

对象字面量可以用来创建单个对象,但这个方法有个明显的缺点:使用同一个接口创建很多对象,会产生大量重复的代码。

2、工厂模式

工厂模式是软件工程领域中一种广为人知的设计模式,工厂模式抽象了创建具体对象的过程,用函数来封装以特定的接口创建对象的细节。

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=creatPerson("Nicholas",22,"software Engineer");
var person2=creatPerson("Greg",24,"student");

函数creatPerson{}能够根据接受的参数构建一个包含所有必要信息的Person对象。可以无数次的调用这个函数,每次都会返回一个包含三个属性一个方法的对象。

工厂模型虽然解决了创建多个相似对象的问题,却没有解决对象识别的问题(即怎么知道一个对象的类型)。

3、构造函数模式

function Person(name,age,job) {
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayName = function() {
    alert(this.name);
  }
}
//通过new操作符创建Person的实例
var person1 = new Person("Nicholas",22,"software Engineer");
var person2 = new Person("Greg",24,"student");
person1.sayName(); //Nicholas
person2.sayName(); //Greg

与工厂模式不同的是

没有显示的创建对象

直接将属性和方法赋给了this对象

没有return语句

创建Person的新实例,必须使用new操作符。调用构造函数的4个步骤:

创建一个新对象

将构造函数的作用域赋给新对象(this指向了这个新对象)

执行构造函数中的代码

返回新对象

这个例子中创建的所有对象既是Object的实例,也是Person实例。可以通过instanceof操作符验证。

alert(person1 instanceof Object);//true

构造函数模式也有自己的问题,实际上,sayName方法在每个实例上都会被重新创建一次,需要注意的是,通过实例化创建的方法并不相等,以下代码可以证明

alert(person1.sayName == person2.sayName);//false

可以将方法移到构造器的外部作为全局函数来解决这个问题。

function Person(name,age,job) {
  this.name = name;
  this.age = age;
  this.job = job;  
}
function sayName() {
    alert(this.name);
  }

在全局下创建的全局函数实际上只能被经由Person创建的实例调用,这就有点名不副实了;如果对象需要定义很对方法,那么就要定义很多个全局函数,缺少封装性。

4、原型模式

JavaScript中创建的每个函数都有一个prototype(原型)属性,它是一个指针,指向一个对象,包含了可以由特定类型的所有实例共享的属性和方法(让所有的对象实例共享它的属性和方法)

function Person() {}
  Person.prototype.name ="Nicholas";
  Person.prototype.age = 22;
  Person.prototype.job = "software Engineer";  
  Person.prototype.sayName(){
    alert(this.name);
  };
 var person1 = new Person();
 person1.sayName(); //Nicholas
alert(person1.sayName == person2.sayName);//true

以上代码做了这几件事情:

定义了一个构造函数Person,Person函数自动获得一个prototype属性,该属性默认只包含一个指向Person的constructor属性
通过Person.prototype添加三个属性,和一个方法

创建一个Person的实例,随后在实例上调用了sayName()方法

使用Person构造函数和Person.prototype创建实例的代码为例,展示个对象之间的关系

使用Person构造函数和Person.prototype创建实例的代码为例,展示个对象之间的关系

JavaScript中创建对象的模式汇总 

图中展示了Person构造函数、Person的原型属性以及Person的两个实例,之间的关系。Person.prototype指向了原型对象,Person.prototype.constructor有指回了Person。原型对象中除了包含constructor属性,还包含后来添加的其他属性和方法,Person的两个实例person1和person2都包含一个内部属性,该属性仅指向Person.prototype。

sayName()方法的调用过程:

在person1实例上查找logName()方法,发现没有这个方法,于是追溯到person1的原型

在person1的原型上查找sayame()方法,有这个方法,于是调用该方法

基于这样一个查找过程,我们可以通过在实例上定义原型中的同名属性,来阻止该实例访问原型上的同名属性,需要注意的是,这样做并不会删除原型上的同名属性,仅仅是阻止实例访问。

function Person() {}
  Person.prototype.name ="Nicholas";
  Person.prototype.age = 22;
  Person.prototype.job = "software Engineer";  
  Person.prototype.sayName(){
    alert(this.name);
  };
 var person1 = new Person();
 var person2 = new Person();
 person1.name="Greg"
alert(person1.name) //Greg 来自实例
alert(person2.name) //Nicholas 来自原型

使用delete操作符可以完全删除实例属性

delete person1.name;
alert(person1.name) //Nicholas 来自原型

使用hasOwnProperty()方法可以检测一个属性是存在于实例还是原型中

function Person() {}
  Person.prototype.name ="Nicholas";
  Person.prototype.age = 22;
  Person.prototype.job = "software Engineer";  
  Person.prototype.sayName(){
    alert(this.name);
  };
 var person1 = new Person();
 var person2 = new Person();
 alert(person1,hasOwnProperty("name"));//false
 person1.name="Greg"
alert(person1.name) //Greg 来自实例
 alert(person1,hasOwnProperty("name"));//true
alert(person2.name) //Nicholas 来自原型
 alert(person2,hasOwnProperty("name"));//false
 delete person1.name;
alert(person1.name) //Nicholas 来自原型
 alert(person1,hasOwnProperty("name"));//false

下图展示了在不同情况下实例与原型之间的关系

JavaScript中创建对象的模式汇总

简单的原型语法

function Person() {}
 Person.prototype={
 name :"Nicholas",
 age : 22,
 job : "software Engineer", 
 sayName:function(){
    alert(this.name);
    }
  };

在上面的代码中constructor属性不再指向Person了,通过constructor无法确定对象的类型了。可以像下面这样特意将他设置回适当的值

function Person() {}
 Person.prototype={
 constructor:Person,
 name :"Nicholas",
 age : 22,
 job : "software Engineer",  
 sayName:function(){
    alert(this.name);
    }
  };

重设constructor属性会导致它的[[Enumerable]]特性被设置为true,默认情况,原生的constructor属性是不可枚举的,可以使用Object.defineProperty()方法来改变

Object.defineProperty(Person.prototype,"constructor",{
  enumerable:false,
  value:Person
});

原型中查找值的过程是一次搜索,原型对象所做的任何修改都能从实例上立即反应出来

var friend=new Person();
Person.prototype.sayHi=function(){
  alert("hi);
}
friend,sayHi();//"hi"(没有问题)

person实例是在添加新方法之前创建的,但仍可以访问新添加的方法,原因是实例与原型之间的松散连接关系
重写原型对象后的情况

function Person() {}
var friend=new Person();
 Person.prototype={
 name :"Nicholas",
 age : 22,
 job : "software Engineer", 
 sayName:function(){
    alert(this.name);
    }
  };
  friend.sayName();//error

调用friend.sayName()时发生错误的原因是,friend指向的原型中不包含以该字段命名的属性,如下图。

JavaScript中创建对象的模式汇总 

原型对象的问题

原型对象省略了为构造函数传递初始化参数这一环节,所有势力在默认情况下都取得相同的属性值。原型模型最大的问题是有其共享本性所导致的。当原型模型包含引用类型的属性来说,问题就比较严重了。来看下面的例子。

function Person() {}
 Person.prototype={
 constructor:Person,
 name :"Nicholas",
 age : 22,
 job : "software Engineer",  
 friends:["Shelby","Court"],
 sayName:function(){
    alert(this.name);
    }
  };
  var person1=new Person();
  var person2=new Person();
  person1.friend.push("Van");
  alert(person1.friends);//"Shelby,Court,Van"
  alert(person2.friends);//"Shelby,Court,Van"
 alert(person1.friends==person2.friends);//true

5、组合使用构造函数模式和原型模式

组合使用构造函数模式和原型模式中,构造函数用于定义实例属性,原型模型用于定义方法和共享的属性。这样每个实例都会有自己的一份实例属性的副本,同时也可以共享对方法的引用,最大限度的节省了内存。

function Person(name,age,job) {
  this.name = name;
  this.age = age;
  this.job = job;  
  this.friends=["Shelby","Court"];
}
Person.prototype={
 constructor:Person,
 sayName:function(){
    alert(this.name);
    }
  }
var person1=new Person("Nicholas",22,"software Engineer");
var person2 = new Person("Greg",24,"student");
person1.friend.push("Van");
  alert(person1.friends);//"Shelby,Court,Van"
  alert(person2.friends);//"Shelby,Court"
 alert(person1.friends==person2.friends);//false
 alert(person1.sayName==person2.sayName);//true

6、动态原型模式

原型动态模式将需要的所有信息都封装到构造函数中,通过if语句判断原型中的某个属性是否存在,若不存在(在第一次调用这个构造函数的时候),执行if语句内部的原型初始化代码。

function Person(name,age) {
  this.name = name;
  this.age = age;
  this.job =job;
//方法
  if(typeof this.sayName != 'function') {
  Person.prototype.sayName = function() {
      alert(this.name);
    };   
  }
}
var friend = new Person('Nicholas','22','Software Engineer');//初次调用构造函数,此时修改了原型
var person2 = new Person('amy','21');//此时sayName()方法已经存在,不会再修改原型

推荐阅读:

以上所述是小编给大家介绍的JavaScript中创建对象的模式,希望对大家有所帮助!

Javascript 相关文章推荐
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
JavaScript中的undefined学习总结
Nov 30 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
vue-ajax小封装实例
Sep 18 Javascript
讲解vue-router之什么是编程式路由
May 28 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 #Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 #Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 #Javascript
html5+javascript实现简单上传的注意细节
Apr 18 #Javascript
jQuery的内容过滤选择器学习教程
Apr 18 #Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 #Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 #Javascript
You might like
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
在Python中操作字典之clear()方法的使用
2015/05/21 Python
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
Django 路由控制的实现代码
2018/11/08 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
几个Shell Script面试题
2012/08/31 面试题
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
新店开张活动方案
2014/08/24 职场文书
2014基层党员批评与自我批评范文
2014/09/24 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
万里长城导游词
2015/01/30 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
2015年预算员工作总结
2015/05/14 职场文书
交通安全教育主题班会
2015/08/12 职场文书
python基础入门之普通操作与函数(三)
2021/06/13 Python
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers