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技巧来提高你的代码
Jan 08 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
微信小程序如何获取用户收货地址
Nov 27 Javascript
vue添加class样式实例讲解
Feb 12 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
JavaScript数组去重实现方法小结
Jan 17 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
农民和部队如何穿矿
2020/03/04 星际争霸
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
Js中获取frames中的元素示例代码
2013/07/30 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
原JS实现banner图的常用功能
2017/06/12 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
Python实现对adb命令封装
2020/03/06 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
Python dict的常用方法示例代码
2020/06/23 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
详解python的super()的作用和原理
2020/10/29 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
2016/12/03 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
大班上学期幼儿评语
2014/04/30 职场文书
植树节活动总结
2014/04/30 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
小学班主任工作随笔
2015/08/15 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS