对象,是javascript中非常重要的一个梗,是否能透彻的理解它直接关系到你对整个javascript体系的基础理解,说白了,javascript就是一群对象在搅。。(哔!)。

常用的几种对象创建模式

使用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属性,这个属性指向通过构造函数创建的那个函数的原型对象。通俗点讲原型对象就是内存中为其他对象提供共享属性和方法的对象。

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

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属性函数的一个指针(敢不敢再绕点!)。通过一幅图我们来清楚的理一下这个绕口的流程:

所有的对象都有一个原型对象(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等)默认的采用的模式。

以上所述来源于网络 参考:https://segmentfault.com/q/1010000003695733

转载于:https://www.cnblogs.com/hyea/p/5596075.html

JavaScript面向对象和原型函数相关推荐

  1. JavaScript面向对象及原型 及setTimeout

    JavaScript面向对象 最笨的写法: function Foo(n) {     this.name = n;     this.sayName = function() {         c ...

  2. 快速理解JavaScript面向对象编程—原型

    总的来说js语言就是门面向对象编程的语言,对象这个概念几乎贯穿了整个js的学习. 对象 创建对象两种方法:(若要生成对象实例必须调用构造函数) 1.var obj = {name:"jer& ...

  3. JavaScript 面向对象 (prototype 原型模式)

    一. JavaScript 设计思想 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时.但是,这个版本的浏览器只能用来浏览 ...

  4. 有关javaScript面向对象和原型笔记

    javaScript是一种比较特殊的语言,ECMAScript中没有类的概念,跟其他面向对象的语言有一定的区别,它的对象也与基于类的语言中的对象有所不同,严格来说,javascript对象是一组没有特 ...

  5. javascript面向对象系列第一篇——构造函数和原型对象

    前面的话 一般地,javascript使用构造函数和原型对象来进行面向对象编程,它们的表现与其他面向对象编程语言中的类相似又不同.本文将详细介绍如何用构造函数和原型对象来创建对象 构造函数 构造函数是 ...

  6. javascript 面向对象编程(工厂模式、构造函数模式、原型模式)

    javascript 面向对象编程(工厂模式.构造函数模式.原型模式) CreateTime--2018年3月29日17:09:38 Author:Marydon 一.工厂模式 /*** 工厂模式*/ ...

  7. JavaScript 面向对象编程(三) —— 函数进阶 / 严格模式 / 高阶函数 / 闭包 / 浅拷贝和深拷贝

    本篇为 JavaScript 进阶 ES6 系列笔记第三篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 :ECMAScript 6 入门 系列笔记: JavaScript 面 ...

  8. JavaScript 面向对象编程(二) —— 构造函数 / 原型 / 继承 / ES5 新增方法

    本篇为 JavaScript 进阶 ES6 系列笔记第二篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 :ECMAScript 6 入门 : Javascript 继承机制的 ...

  9. JavaScript之面向对象与原型笔记整理--------创建对象之原型(2)

    4.原型 每个函数都有一个prototype属性,这个属性是一个对象,用途是包含可以由特定类型的所有实例共享的属性和方法. 逻辑上可以这么理解:prototype通过调用构造函数而创建的那个对象的原型 ...

最新文章

  1. 如何成为自己所在领域内前1%的顶尖人才? 凤凰科技 09-29 07:42 原标题:如何成为自己所在领域内前1%的顶尖人才? 有时你会觉得,可能你永远也实现自己的梦想。你清楚地知道自己想做什么,但有
  2. virtualenv杂记
  3. Net EF框架+ MySql示例
  4. JAX-RS和OpenAPI对Hypermedia API的支持:任重而道远
  5. 95-231-020-源码-Chain简介
  6. 如何获取项目中文件的路径
  7. WinForm窗体生命周期
  8. 神经网络常用激活函数总结
  9. mybatis多数据源配置_springboot+mybatis+aop配置动态数据源
  10. iOS--HealthKit简单使用
  11. 在几何画板中如何制作圆柱的侧面展开动画_怎样用ppt做圆柱的侧面展开动画
  12. 六步学会github入门使用
  13. 两个rsa密文相乘还能解密吗_RSA加密算法 | BitOL|比特在线-关注区块链技术动态的区块链导航...
  14. 电脑桌面两个计算机图标怎么删除,电脑桌面上有个图标删除不掉|?怎么处理?
  15. C语言 一元多项式求导
  16. vc2005和IE冲突 主要是在通过向导添加方法或变量的时候会报脚本错误。
  17. java计算机毕业设计移动垃圾分类车管理平台源码+系统+mysql数据库+lw文档
  18. jQuery实现手机号码的验证
  19. matlab stats里的f值,MATLAB 回归分析regress,nlinfit,stepwise函数
  20. 怎么将几张pdf合并成一张_如何将多个pdf文件合并成一个pdf文件?

热门文章

  1. 数据库服务器修改地址,数据库服务器修改地址吗
  2. c语言累积乘,C语言编程累积2
  3. java面试题 接口和抽象类的区别是什么
  4. LVS配置(DR模式)
  5. java开发面试中经常问到的问题(2019年5月)
  6. tensor转换为图片_pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
  7. 可串联使用的模10计数器
  8. 【转载】漏洞 CNVD-2017-36682 相关公告以及 JavaScript / 安卓开发者须知
  9. java中常见的数据结构分类
  10. Starling移动平台开发初体验