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 ajax return没有返回值的解决方法
Oct 20 Javascript
jquery网页元素拖拽插件效果及实现
Aug 05 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
Python发送http请求解析返回json的实例
2018/03/26 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
会计主管岗位职责
2014/01/03 职场文书
普通员工辞职信
2014/01/17 职场文书
业务总经理岗位职责
2014/02/03 职场文书
初一学生期末评语
2014/04/24 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
给老师的一封感谢信
2015/01/20 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书
如何用python绘制雷达图
2021/04/24 Python
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS