深入理解javascript构造函数和原型对象


Posted in Javascript onSeptember 23, 2014

常用的几种对象创建模式

使用new关键字创建
最基础的对象创建方式,无非就是和其他多数语言一样说的一样:没对象,你new一个呀!

var gf = new Object();
gf.name = "tangwei";
gf.bar = "c++";
gf.sayWhat = function() {
  console.log(this.name + "said:love you forever");
}

使用字面量创建

这样似乎妥妥的了,但是宅寂的geek们岂能喜欢如此复杂和low土的定义变量的方式,作为一门脚本语言那应该有和其他兄弟们一样的范儿,于是出现了对象字面量的定义方式:

var gf = {
  name : "tangwei",
  bar : "c++",
  sayWhat : function() {
    console.log(this.name + "said:love you forever");
  }
}

工厂模式

实际上这是我们在实际中最常用的对象定义方式,但是我要有好多拥有相似属性的对象(想想都让人激动。。。)怎么办呢?那要是一个个的定义,就会产生大量的代码,何不建个工厂,批量的生产出我们的对象呢,于是,javascript世界中第一个充气娃。。。不,“工厂模式”诞生了!

function createGf(name, bar) {
  var o = new Object();
  o.name = name;
  o.bar = bar;
  o.sayWhat = function() {
    alert(this.name + "said:love you forever");
  }
  return o;
}
var gf1 = createGf("bingbing","d");
var gf2 = createGf("mimi","a");

构造函数

工厂模式解决了多个相似对象的创建问题,但是问题又来了,这些对象都是Object整出来的,怎么区分它们的对象具体类型呢?这时候我们就需要切换到另一种模式了,构造函数模式:

function Gf(name,bar){
  this.name = name;
  this.bar = bar;
  this.sayWhat = function(){
    alert(this.name + "said:love you forever");
  }
}
var gf1 = new Gf("vivian","f");
var gf2 = new Gf("vivian2","f");

这里我们使用一个大写字母开头的构造函数替代了上例中的createGf,注意按照约定构造函数的首字母要大写。在这里我们创建一个新对象,然后将构造函数的作用域赋给新对象,调用构造函数中的方法。
上面的方式似乎没什么不妥,但是我们可以发现,两个实例中调用的构造函数中的sayWhat方法不是同一个Function实例:

console.log(gf1.sayWhat == gf2.sayWhat); //false

调用同一个方法,却声明了不同的实例,实在浪费资源。我们可以优化一下将sayWhat函数放到构造函数外面声明:

function Gf(name,bar){
  this.name = name;
  this.bar = bar;
  this.sayWhat = sayWhat
}
function sayWhat(){
  alert(this.name + "said:love you forever");
}

这样解决了,多个实例多次定义同一个方法实例的问题,但是新问题又来了,我们定义的sayWhat是一个全局作用域的方法,但这个方法其实是没法直接调用的,这就有点矛盾了。如何更优雅的定义一个具备一定封装性的对象呢?我们来看一下javascript原型对象模式。

原型对象模式

理解原型对象
当我们创建一个函数时,该函数就会具备一个prototype属性,这个属性指向通过构造函数创建的那个函数的原型对象。通俗点讲原型对象就是内存中为其他对象提供共享属性和方法的对象。

深入理解javascript构造函数和原型对象

在原型模式中,不必再构造函数中定义实例属性,可以将属性信息直接赋予原型对象:

function Gf(){
  Gf.prototype.name = "vivian";
  Gf.prototype.bar = "c++";
  Gf.prototype.sayWhat = function(){
    alert(this.name + "said:love you forever");
  }
}
var gf1 = new Gf();
gf1.sayWhat();
var gf2 = new Gf();

和构造函数不同的是这里新对象的属性和方法是所有实例都可以共享的,换句话说gf1和gf2访问的是同一份属性和方法。原型对象中除了我们赋予的属性外,还有一些内置的属性,所有原型对象都具备一个constructor属性,这个属性是一个指向包含prototype属性函数的一个指针(敢不敢再绕点!)。通过一幅图我们来清楚的理一下这个绕口的流程:

深入理解javascript构造函数和原型对象

所有的对象都有一个原型对象(prototype),原型对象中有一个constructor属性指向包含prototype属性的函数,Gf的实例gf1和gf2都包含一个内部属性指向原型对象(在firefox浏览器中表现为私有属性proto),当我们访问一个对象中的属性时,首先会询问实例对象中有没有该属性,如果没有则继续查找原型对象。

使用原型对象
在前面的示例中,我们注意到在为原型对象添加属性时,需要每个都增加Gf.prototype,这个工作很重复,在上面对象的创建模式中,我们知道可以通过字面量的形式创建一个对象,这里我们也可以改进一下:

function Gf(){}
Gf.prototype = {
  name : "vivian",
  bar : "c++",
  sayWhat : function(){
    alert(this.name + "said:love you forever");
  }
}

这里有一个地方需要特别注意下,constructor属性不再指向对象Gf,因为每定义一个函数,就会同时为其创建一个prototype对象,这个对象也会自动获取一个新的constructor属性,这个地方我们使用Gf.prototype本质上覆写了原有的prototype对象,因此constructor也变成了新对象的constructor属性,不再指向Gf,而是Object:

var gf1 = new Gf();
console.log(gf1.constructor == Gf);//false
console.log(gf1.constructor == Object)//true

一般情况下,这个微妙的改变是不会对我们造成影响的,但如果你对constructor有特殊的需求,我们也可以显式的指定下Gf.prototype的constructor属性:

Gf.prototype = {
  constructor : Gf,
  name : "vivian",
  bar : "c++",
  sayWhat : function() {
    alert(this.name + "said:love you forever");
  }
}
var gf1 = new Gf();
console.log(gf1.constructor == Gf);//true

通过对原型对象模式的初步了解,我们发现所有的实例对象都共享相同的属性,这是原型模式的基本特点,但往往对于开发者来说这是把“双刃剑”,在实际开发中,我们希望的实例应该是具备自己的属性,这也是在实际开发中很少有人单独使用原型模式的主要原因。

构造函数和原型组合模式

在实际开发中,我们可以使用构造函数来定义对象的属性,使用原型来定义共享的属性和方法,这样我们就可以传递不同的参数来创建出不同的对象,同时又拥有了共享的方法和属性。

function Gf(name,bar){
  this.name = name;
  this.bar = bar;
}
Gf.prototype = {
  constructor : Gf,
  sayWhat : function() {
    alert(this.name + "said:love you forever");
  }
}
var gf1 = new Gf("vivian", "f");
var gf2 = new Gf("vivian1", "c");

在这个例子中,我们再构造函数中定义了对象各自的属性值,在原型对象中定义了constructor属性和sayWhat函数,这样gf1和gf2属性之间就不会产生影响了。这种模式也是实际开发中最常用的对象定义方式,包括很多js库(bootstrap等)默认的采用的模式。

Javascript 相关文章推荐
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
JavaScript也谈内存优化
Jun 06 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
JS简单实现浮动窗口效果示例
Sep 07 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 #Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 #Javascript
IE6 hack for js 集锦
Sep 23 #Javascript
深入理解javascript作用域和闭包
Sep 23 #Javascript
js变量、作用域及内存详解
Sep 23 #Javascript
js单独获取一个checkbox看其是否被选中
Sep 22 #Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 #Javascript
You might like
php桌面中心(四) 数据显示
2007/03/11 PHP
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
php 定义404页面的实现代码
2012/11/19 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
php获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
Javascript实现单例模式
2016/01/24 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
pytyon 带有重复的全排列
2013/08/13 Python
用python删除java文件头上版权信息的方法
2014/07/31 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
大学生怎样写好自荐信
2014/02/25 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
中学教师师德承诺书
2014/05/23 职场文书
新闻传播专业求职信
2014/07/22 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
2016党员读书思廉心得体会
2016/01/23 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
教你一步步实现一个简易promise
2021/11/02 Javascript
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle