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 相关文章推荐
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 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
PHP类中Static方法效率测试代码
2010/10/17 PHP
PHP中foreach循环中使用引用要注意的地方
2011/01/02 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
jquery如何获取复选框的值
2013/12/12 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
基于jquery实现九宫格拼图小游戏
2018/11/30 jQuery
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
JavaScript原型式继承实现方法
2019/11/06 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
使用python实现ANN
2017/12/20 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
Python设计密码强度校验程序
2020/07/30 Python
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
Vilebrequin美国官方网上商店:法国豪华泳装品牌
2020/02/22 全球购物
组工干部对照检查材料
2014/08/25 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
求职自荐信怎么写
2015/03/04 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
趣味运动会赞词
2015/07/22 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python
vue实现Toast组件轻提示
2022/04/10 Vue.js