数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

JavaScript碎片—函数闭包(模拟面向对象)

来源:脚本之家  责任编辑:小易  

经过这几天的博客浏览,让我见识大涨,其中有一篇让我感触犹深,JavaScript语言本身是没有面向对象的,但是那些大神们却深深的模拟出来了面向对象,让我震撼不已。本篇博客就是在此基础上加上自己的认知,如有错误,还请见谅。

具体来说实现模拟面向对象主要是利用JavaScript函数闭包这个概念。由于JavaScript中的每一个function都会形成一个作用域,而如果变量声明在这个域中,那么外部是无法直接去访问,要想访问必须new出一个实例来,相当于Java中class。首先让我们来了解一下prototype方法:

1、不使用prototype属性定义的对象方法,是静态方法,只能直接用类名进行调用!另外,此静态方法中无法使用this变量来调用对象其他的属性!
2、使用prototype属性定义的对象方法,是非静态方法,只有在实例化后才能使用!其方法内部可以this来引用对象自身中的其他属性!
Tips :所有的变量,如果不加上var关键字,则默认的会添加到全局对象的属性上去!

具体来说模拟类有以下5种常见写法:

第一种写法:具体介绍见以下代码注释。

function Circle(r) {
    this.r = r;
  }

  Circle.PI = 3.14159;/*Circle.PI属于全局变量 */
  Circle.prototype.area = function() {
    return Circle.PI * this.r * this.r;
  }/*Circle方法调用prototype属性从而能用this调用 Circle方法中的r属性*/

  var c = new Circle(1.0);/* 实例化 Circle*/
  alert(c.area());

第二种写法:与Java类相似,推荐使用!

var Circle = function() { 
    var obj = new Object(); /*先实例化Object方法,使之能调用 obj.PI属性及obj.area方法*/
    obj.PI = 3.14159; 
     
    obj.area= function( r ) { 
      return this.PI * r * r; 
    } 
    return obj; 
  } 
   
  var c = new Circle(); 
  alert( c.area( 1.0 ) );

第三种写法:主要思想是自己先实例化出一个对象,在往这个对象里添加属性及方法

var Circle = new Object(); 
Circle.PI = 3.14159; 
Circle.Area = function( r ) { 
    return this.PI * r * r; 
} 
 
alert( Circle.Area( 1.0 ) );

 第四种写法:该写法跳过new这一步骤,且电脑简单清晰明了,个人推荐这种写法!!

var Circle={ 
      "PI":3.14159, 
     "area":function(r){ 
         return this.PI * r * r; 
        } 
    }; 
    alert( Circle.area(1.0) );

 第五种写法:此方法与前三种大同小异,不过听说这种写法很少人用,不建议推荐使用哦!!

var Circle = new Function("this.PI = 3.14159;this.area = function( r ) {return r*r*this.PI;}"); 
 
alert( (new Circle()).area(1.0) ); 

想必各位朋友都在想既然是模拟面向对象,那是不是得有封装继承,getset方法???答案是肯定的,那让我们来看看如下代码:

 封装:在看看如下代码我们能清晰的了解到封装的使用,假若我们去掉 var name = "default"; 中的var,那么结果又是怎么样??答案是与先前一样的,由此可见无var定义的属性只是再其变量作用域中充当全局,只有属性在其作用域中是私有的,若要定义一个私有方法需要将其赋予一个变量充当属性。还有本例中new 可加可不加,若不加可往其后添加()。

var person = function(){  
  //变量作用域为函数内部,外部无法访问  
  var name = "default";    
    
  return {  
    getName : function(){  
      return name;  
    },  
    setName : function(newName){  
      name = newName;  
    }  
  }  
}();  
   

alert(person.name);//直接访问,结果为undefined 
alert(person.getName());  
person.setName("abruzzi");  
alert(person.getName());

实现类和继承:该例的主要思想是定义一个变量,将一个方法赋予它,在根据prototype方法将需要继承的类放入其中即可达到继承的效果。。

function Person(){  
  var name = "default";    
    
  return {  
    getName : function(){  
      return name;  
    },  
    setName : function(newName){  
      name = newName;  
    }  
  }  
  }; /* 封装好的一个类Person */ var Jack = function(){};
  //继承自Person
  Jack.prototype = new Person();
  //添加私有方法
  Jack.prototype.Say = function(){
    alert("Hello,my name is Jack");
  };
  var j = new Jack();
  j.setName("Jack");
  j.Say();
  alert(j.getName());

以上所述是小编给大家介绍的JavaScript函数闭包详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:


  • 本文相关:
  • 浅谈js封闭函数、闭包、内置对象
  • 详解javascript的闭包、iife、apply、函数与对象
  • 深入理解javascript函数参数与闭包
  • 解决js函数闭包内存泄露问题的办法
  • 详谈javascript 匿名函数及闭包
  • javascript闭包函数访问外部变量的方法
  • javascript中的return和闭包函数浅析
  • javascript 继承学习心得总结
  • 使用javascript刷新网页的方法
  • javascript中switch判断容易犯错的一个细节
  • 一篇文章让你彻底弄懂js的事件冒泡和事件捕获
  • javascript中 关于prototype属性实现继承的原理图
  • javascript学习笔记(三)显示当时时间的代码
  • javascript中的getutchours()方法使用详解
  • javascript 基本概念
  • 深入分析原生javascript事件
  • 浅析javascript的间隔调用和延时调用
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved