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 相关文章推荐
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
浅析javascript函数表达式
Feb 10 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
移动端手指放大缩小插件与js源码
May 22 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
详解Vue底部导航栏组件
May 02 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 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
PHP安全配置
2006/10/09 PHP
PHP nl2br函数 将换行字符转成 <br>
2009/08/21 PHP
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
PHP的autoload机制的实现解析
2012/09/15 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
2019/05/13 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
Python检测网站链接是否已存在
2016/04/07 Python
python运行其他程序的实现方法
2017/07/14 Python
python 字符串追加实例
2019/07/20 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
体育专业学生自我评价范文
2014/01/17 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
机关作风建设自查报告
2014/10/22 职场文书
优秀党支部申报材料
2014/12/24 职场文书
立项申请报告范本
2015/05/15 职场文书
小学中队长竞选稿
2015/11/20 职场文书
vue使用echarts实现折线图
2022/03/21 Vue.js