js中function()使用方法


Posted in Javascript onDecember 24, 2013

javascript 函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的。通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递。在继续讲述之前,先看一下函数的使用语法:

以下是引用片段:
function func1(…){…}
var func2=function(…){…};
var func3=function func4(…){…};
var func5=new Function();

<script type="text/javascript"> // 1, 方法调用模式 
// 当一个函数被保存为对象的一个属性时,我们称之它为该对象的一个方法,那么this被绑定到该对象上 
var myObject={ 
name : "myObject" , 
value : 0 , 
increment : function(num){ 
this.value += typeof(num) === 'number' ? num : 0; 
return this; 
} , 
toString : function(){ 
return '[Object:' + this.name + ' {value:' + this.value + '}]'; 
} 
} 
alert(myObject.increment(10).increment(20).toString()); // [Object:myObject {value:30}] 

// 2, 函数调用模式 
// 当一个函数并非一个对象的函数时,那么它被当作一个函数来调用,this被绑定到全局对象上。这是语言设计的一个错误。倘若语言设计正确,当内部函数调用时,this应该仍然绑定到外部函数的this变量上 
var myObject={ 
name : "myObject" , 
value : 0 , 
increment : function(num){ 
this.value += typeof(num) === 'number' ? num : 0; 
return this; 
} , 
toString : function(){ 
return '[Object:' + this.name + ' {value:' + this.value + '}]'; 
}, 
getInfo: function(){ 
var self=this; 
return (function(){ 
//return this.toString(); // 内部匿名函数中this指向了全局对象window, 输出 [object Window] 
return self.toString(); // 定义一个变量selft并给它赋值为this,那么内部函数通过该变量访问到指向该对象的this 
})(); 
} 
} 
alert(myObject.increment(10).increment(20).toString()); // [Object:myObject {value:30}] 

// 3, 构造器调用模式 
// JavaScript是一门基于原型继承的语言, 这意味着对象可以直接从其他对象继承属性, 该语言是无类别的。 
// 如果一个函数前面带上new来调用,那么将创建一个隐藏连接到该函数的prototype成员的新对象,同时this将会被绑定到构造函数的实例上。 
function MyObject(name){ 
this.name = name || 'MyObject'; 
this.value=0; 
this.increment = function(num){ 
this.value += typeof(num) === 'number' ? num : 0; 
}; 
this.toString = function(){ 
return '[Object:' + this.name + ' {value:' + this.value + '}]'; 
} 
this.target = this; 
} 
MyObject.prototype.getInfo = function(){ 
return this.toString(); 
} 
// 同时创建一个MyObject.prototype对象,myObject继承了MyObject.prototype的所有的属性, this绑定到了MyObject的实例上 
var myObject = new MyObject(); 
myObject.increment(10); 
alert(myObject.value); //10 
var otherObject = new MyObject(); 
otherObject.increment(20); 
alert(otherObject.value); //20 
alert(myObject.target===myObject); // ture 
alert(myObject.target.getInfo()); // [Object:MyObject {value:10}] 

// 4, Apply 调用模式 
// JavaScript是一门函数式的面向对象编程语言,所以函数可以拥有方法。 函数的apply方法,如同该对象拥有此方法,此时this指向该对象。 
// apply接收两个参数,第一个是要绑定的对象(this指向的对象),第二个是参数数组. 
function MyObject(name){ 
this.name = name || 'MyObject'; 
this.value = 0; 
this.increment = function(num){ 
this.value += typeof(num) === 'number' ? num : 0; 
}; 
this.toString=function(){ 
return '[Object:'+this.name+' {value:'+this.value+'}]'; 
} 
this.target=this; 
} 
function getInfo(){ 
return this.toString(); 
} 
var myObj = new MyObject(); 
alert(getInfo.apply(myObj)); //[Object:MyObject {value:0}], this指向myObj 
alert(getInfo.apply(window)); //[object Window], this指向window 

// for and while 
function func(a,b){ 
alert(a); // 1 
alert(b); // 2 
for(var i=0;i<arguments.length;i++){ 
alert(arguments[i]); // 1, 2, 1, 2, 3 
} 
var i=0; 
while(i<arguments.length){ 
alert(arguments[i]); // 1, 2, 1, 2, 3 
i=i+1; 
} 
} 
func(1,2,3); 
var i=0 
for (i=0;i<=10;i++) { 
document.write("The number is " + i + "<br/>") 
} 
</script>
Javascript 相关文章推荐
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
用Javascript评估用户输入密码的强度实现代码
Nov 30 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
JS中常用的正则表达式
Sep 29 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
很棒的vue弹窗组件
May 24 Javascript
JS时间控制实现动态效果的实例讲解
Jul 31 Javascript
vue-router实现嵌套路由的讲解
Jan 19 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 Javascript
document节点对象的获取方式示例介绍
Dec 24 #Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 #Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 #Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 #Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 #Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 #Javascript
JS控制图片等比例缩放的示例代码
Dec 24 #Javascript
You might like
ThinkPHP空模块和空操作详解
2014/06/30 PHP
PHP中单引号与双引号的区别分析
2014/08/19 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
一起来写段JS drag拖动代码
2010/12/09 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
js调试系列 控制台命令行API使用方法
2014/06/18 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
Python实现的检测web服务器健康状况的小程序
2014/09/17 Python
Python爬取三国演义的实现方法
2016/09/12 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
Python-split()函数实例用法讲解
2020/12/18 Python
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
酒店经理职责
2014/01/30 职场文书
文秘求职信范文
2014/04/10 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang