深入理解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 相关文章推荐
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
Jquery选择子控件"大于号"和" "区别介绍及使用示例
Jun 25 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 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 网页过期时间的控制代码
2009/06/29 PHP
PHP 变量的定义方法
2010/01/26 PHP
PHP 第一节 php简介
2012/04/28 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
tp5.1 框架查询表达式用法详解
2020/05/25 PHP
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
自己使用总结Python程序代码片段
2015/06/02 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
Django ORM filter() 的运用详解
2020/05/14 Python
美国智能家居专家:tink
2019/06/04 全球购物
残疾人创业典型事迹
2014/02/01 职场文书
运动会邀请函范文
2014/02/06 职场文书
《法国号》教学反思
2016/02/22 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python
浅谈Node的内存泄露问题
2022/05/06 NodeJs
Java Redisson多策略注解限流
2022/09/23 Java/Android