专栏首页米扑专栏js 函数function用法

js 函数function用法

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>

参考推荐:

js中call与apply用法

JavaScript对象模型-执行模型

ECMAScript 继承机制实现

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js正则表达式

    用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false

    星辉
  • 高级Js-Tab切换组件

    星辉
  • js实现自定义滚动条

    星辉
  • 150行JavaScript代码实现增强现实

    增强现实技术(Augmented Reality,简称 AR),是一种实时地计算摄影机影像的位置及角度并加上相应图像、视频、3D模型的技术,这种技术的目标是在屏...

    Jerry Wang
  • js实现简易拖拽

    scrollWidth:对象的实际内容的宽度,不包括边线宽度 clientWidth:对象内容的可视区的宽度,不包括边线宽度 offsetWidth:对...

    星辉
  • iOS React Native 混合开发集成React Native

       有时候我们并不是需要全部使用React Native,我们想和原生混合开发,那我们应该怎么办呢。

    ZY_FlyWay
  • jq和zepto

    星辉
  • 前端项目知识点总结

    星辉
  • 高级Js-面向对象编程

    星辉
  • js实现磁性吸附

    星辉

扫码关注云+社区

领取腾讯云代金券