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 相关文章推荐
JS读取XML文件示例代码
Nov 15 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
Jun 13 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
javascript实现留言板功能
Feb 08 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
May 12 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
Vue3不支持Filters过滤器的问题
Sep 24 Javascript
Web应用开发TypeScript使用详解
May 25 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之第一天
2006/10/09 PHP
PHP获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
奇怪的PHP引用效率问题分析
2012/03/23 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
php中filter_input函数用法分析
2014/11/15 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2015/04/09 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
python制作图片缩略图
2019/04/30 Python
python的命名规则知识点总结
2019/10/04 Python
Python 解决火狐浏览器不弹出下载框直接下载的问题
2020/03/09 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
介绍一下内联、左联、右联
2013/12/31 面试题
几个Shell Script面试题
2014/04/18 面试题
汽车专业人才自我鉴定范文
2013/12/29 职场文书
法学函授自我鉴定
2014/02/06 职场文书
五年后的职业生涯规划
2014/03/04 职场文书
监督检查工作方案
2014/05/28 职场文书
2015年公务员工作总结
2015/04/24 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
Vue的过滤器你真了解吗
2022/02/24 Vue.js
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫