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


Posted in Javascript onMarch 13, 2019

经过这几天的博客浏览,让我见识大涨,其中有一篇让我感触犹深,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函数闭包详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
jQuery使用技巧简单汇总
Apr 18 Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
学习Angularjs分页指令
Jul 01 Javascript
AngularJS 自定义过滤器详解及实例代码
Sep 14 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
javascript Canvas动态粒子连线
Jan 01 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 #Javascript
详解jQuery-each()方法
Mar 13 #jQuery
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 #Javascript
react同构实践之实现自己的同构模板
Mar 13 #Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 #Javascript
你可能不知道的CORS跨域资源共享
Mar 13 #Javascript
react项目如何使用iconfont的方法步骤
Mar 13 #Javascript
You might like
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
2013/12/30 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
js实现二级导航功能
2017/03/03 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
Python字典底层实现原理详解
2019/12/18 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
高三英语教学反思
2014/01/13 职场文书
承办会议欢迎词
2014/01/17 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
受资助学生感谢信
2015/01/21 职场文书
英文升职感谢信
2015/01/23 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
python opencv旋转图片的使用方法
2021/06/04 Python