JavaScript 高级篇之闭包、模拟类,继承(五)


Posted in Javascript onApril 07, 2012

一、javascript中的闭包
1、我们一起先来理解什么是函数的作用域。

JavaScript 高级篇之闭包、模拟类,继承(五)

2、调用的对象

JavaScript 高级篇之闭包、模拟类,继承(五)

结合例子:

function display(something) 
{ 
function executeDisplay1() 
{ 
document.write("我在帮老板打印:"+something+"<br />");//引用外部函数的something参数 
} 
executeDisplay1();//函数display引用了内部函数 
} 
display("sorry");//执行完毕后被垃圾收集器回收

3、闭包的形成

JavaScript 高级篇之闭包、模拟类,继承(五)

例一、

var obj = {};//全局的对象 
function buyHouse(price,area) 
{ 
return function(){return "你要付的房款:"+price*area;}; //把内部函数作为返回值 
} 
obj.people = buyHouse(12000,80); //把内部函数的引用保存到obj对象的people属性中。 
//这样就形成了闭包,简单的表达:把嵌套函数的引用保存到全局作用域中,不管是使用它返回的值,还是把它存在对象的属性中都可以。 
document.write(obj.people()+"<br />");

例二、
function add() 
{ 
var number = 0; 
return function(){return ++number;};// 
} 
var num = add();//现在是不是有4引用了吧,第一个全局创建:访问函数,第二个有外部函数(这里指的是Add()引用了匿名函数) 
//第三个是匿名函数(就是return function.....引用了Add的局部变量),第四个就全局对象(var num)了。 
//全局对象的每次调用的对象依然保存在函数体中,所以局部变量的值都会被维持。 
document.write(num()); //等效的方法 
num2 = (function(){var number = 0;return function(){return ++number;}})();//匿名函数,直接赋给了全局对象 
document.write(num2());

例三、实现私有属性
//使用闭包实现私有属性 
function createProperty(o,propertyname,check) 
{ 
var value; 
o["get"+propertyname] = function(){return value;};//将一个匿名的函数体返回给对象的属性 
o["set"+propertyname] = function(v){if(check && !check)//检查参数的合法性throw("参数不对!"); 
else value = v; };//将一个匿名的函数体返回给对象的属性 
} 
var o = {}; 
createProperty(o,"Age",function(x){return typeof x == "number";});//后面跟了一个匿名的函数,执行验证的工作,如果不是数字就返回false 
o.setAge(22);//使用对象的属性 
document.write(o.getAge()); //其实上面还是将函数保存到了全局对象的属性中。

二、javascript中的类
同样也从一些基本的术语开始吧!
1、原型(prototype)

其实一个对象的原型就是构造函数的prototype的值,所有的函数都一个prototype属性,当函数被创建是就被自动创建和初始化,初始化它的值是一个对象,这个对象自带一个属性就是constructor,它指回到和原型相关联的那个构造函数。

function PeopleHope(money,house) 
{ 
this.money = money; 
this.house = house; 
} 
PeopleHope.prototype.hope = function(){document.write("我想拥有钞票,房子");};//这就是原型,都会被构造函数初始化成对象的属性。 
for(var p in PeopleHope.prototype) 
{ 
document.write("原型出来了吧! \t " + p + "<br />");//输出:原型出来了吧! hope 
}

2、模拟类

其实Javascript中的“类”就是函数而已。直接上代码吧!

function PeopleHope(money,house) 
{ 
this.money = money; 
this.house = house; 
PeopleHope.VERSION = 0.1//类的属性 
PeopleHope.createLive = function(){document.write("在党的领导下,我们的生活很好!");}//类方法 必须是类直接引用 
}

3、类的继承
function CreateClass(name,version) 
{ 
this.name = name; //初始化对象属性 
this.version= version; 
CreateClass.AUTHOR = "Frank";//类属性 
CreateClass.SellHouse = function(){document.write("我们是房地产龙头企业万科");};//类的方法 
CreateClass.prototype.Company = "vanke"; 
CreateClass.prototype.HousePrice = function(){document.write("大梅沙山顶豪宅卖5千万一套,畅销价!");}; 
//原型,其实到这里大家可能就会问了,这个原型和类方法等有什么区别呢? 
//其实就是:比如 var o = new CreateClass("中粮地产","一期");CreateClass函数里面的this就是o了,连起来就是 
//o.name = "中粮地产";o.version = “一期”;吧! 
//至于原型其实在干的事你可以把它理解成一个”叛徒“在你创建o这个对象的时候,由 原型告诉构造函数一起带走初始化 
//成了对象o的属性。 
} 
function House(name,version,city) 
{ 
CreateClass.apply(this,[name,version]);//继承构造函数 
this.city = city; 
House.prototype.housename = "半岛花园"; 
} 
House.prototype = new CreateClass("中粮地产","二期");//通过new获取CeateClass属性,包括原型对象 
//打印函数的prototype属性 
function displayPrototype(c) 
{ 
for(var x in c.prototype) 
{ 
document.write(x+"<br />"); 
} 
} 
displayPrototype(House);//输出:HousePrice Company name version 
//删除不是原型的对象 
delete House.prototype.name;//删除 
delete House.prototype.version;//删除 
displayPrototype(House);//输出:HousePrice Company 
var customers = new House("半岛花园","三期","西拔牙"); 
for(var t in customers) 
{ 
if(typeof customers[t] == "function")//判断是不是函数 
{ 
customers[t]();//执行 
continue;//返回本次,进行下一次循环 
} 
document.write(t +":\t" + customers[t]+ "<br />"); 
// 输出housename: 半岛花园 Company: vanke 大梅沙山顶豪宅卖5千万一套,畅销价!name: 半岛花园version: 三期 city: 西拔牙 
//继承就实现了。通过原型。

小结:本篇就和大家分享到这里吧,本来还有命名空间要分享,由于学习时间安排的关系,Javascript语法就给大家分享到这里吧!

下次我将分享我对javascript客服端的编程及Jquery等高级应用。

Javascript 相关文章推荐
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
基于jquery可配置循环左右滚动例子
Sep 09 Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
JS中如何实现Laravel的route函数详解
Feb 12 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
在vue中读取本地Json文件的方法
Sep 06 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
JavaScript 高级篇之函数 (四)
Apr 07 #Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 #Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 #Javascript
为原生js Array增加each方法
Apr 07 #Javascript
jquery 操作DOM案例代码分享
Apr 05 #Javascript
jquery 操作DOM的基本用法分享
Apr 05 #Javascript
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 #Javascript
You might like
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
JavaScript高级程序设计
2006/12/29 Javascript
jQuery 各种浏览器下获得日期区别
2008/12/22 Javascript
JQUERY操作JSON实例代码
2010/02/09 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
JSON 数据格式详解
2017/09/13 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
python计算auc的方法
2020/09/09 Python
python元组拆包实现方法
2021/02/28 Python
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
业务经理岗位职责
2013/11/11 职场文书
高中毕业生个人自我鉴定
2013/11/24 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
作风建设年度心得体会
2014/10/29 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
英语教师个人总结
2015/02/09 职场文书
Python极值整数的边界探讨分析
2021/09/15 Python