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 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
JS 实现随机验证码功能
Feb 15 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
vue.js路由跳转详解
Aug 28 Javascript
基于Datatables跳转到指定页的简单实例
Nov 09 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
vue.js轮播图组件使用方法详解
Jul 03 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
详解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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
学习php开源项目的源码指南
2014/12/21 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
jQuery的三种$()
2009/12/30 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
python网络编程学习笔记(四):域名系统
2014/06/09 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
公司合作意向书
2014/04/01 职场文书
请假条的格式
2014/04/11 职场文书
文明之星事迹材料
2014/05/09 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
投标售后服务承诺书
2015/04/29 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android