js函数调用模式总结
在javascript中一共有四种调用模式:方法调用模式、函数调用模式、构造器调用模式和apply调用模式。这些模式在如何初始化关键参数this上存在差异
方法调用模式
当一个函数被保存为对象的一个属性时,我们称之它为该对象的一个方法,那么this被绑定到该对象上。
复制代码 代码如下:
var myObject={
name : "myObject" ,
value : 0 ,
increment : function(num){
this.value += typeof num === 'number' ? num : 0;
} ,
toString : function(){
return '[Object:'+this.name+' {value:'+this.value+'}]';
}
}
alert(myObject);//[Object:myObject {value:0}]
函数调用模式
当一个函数并非一个对象的函数时,那么它被当作一个函数来调用,this被绑定到全局对象上。这是语言设计的一个错误。倘若语言设计正确,当内部函数调用时,this应该仍然绑定到外部函数的this变量上。如:
复制代码 代码如下:
var myObject={
name : "myObject" ,
value : 0 ,
increment : function(num){
this.value += typeof(num) === 'number' ? num : 0;
} ,
toString : function(){
return '[Object:'+this.name+' {value:'+this.value+'}]';
},
getInfo:function(){
return (function(){
return this.toString();//内部匿名函数中this指向了全局对象window
})();
}
}
alert(myObject.getInfo());//[object Window]
当幸运的是,有一个很容易的解决方案:定义一个变量并给它赋值为this,那么内部函数通过该变量访问到指向该对象的this,如:
复制代码 代码如下:
var myObject={
name : "myObject" ,
value : 0 ,
increment : function(num){
this.value += typeof num === 'number' ? num : 0;
} ,
toString : function(){
return '[Object:'+this.name+' {value:'+this.value+'}]';
},
getInfo:function(){
var self=this;
return (function(){
return self.toString();//通过变量self指向myObject对象 ~~~在该匿名函数体内this指向全局对象
})();
}
}
alert(myObject.getInfo());//[Object:myObject {value:0}]
构造器调用模式
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();
var otherObject=new MyObject();
//alert(myObject.target===myObject);//ture
//alert(myObject.target.getInfo());//[Object:MyObject {value:0}]
myObject.increment(10);
otherObject.increment(20);
alert(myObject.value);//10
alert(otherObject.value);//20
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
js函数调用模式总结的更多相关文章
- js函数调用模式
1.函数调用 调用一个函数将暂停当前函数的执行,传递控制权和参数给新函数.除了函数声明时定义的形参,每个函数还接受两个附加的参数:this和arguments(arguments并不是一个真正的数组, ...
- JS函数调用的方法
JS函数调用的四种方法:方法调用模式,函数调用模式,构造器调用模式,apply,call调用模式 1.方法调用模式:先定义一个对象,然后在对象的属性中定义方法,通过myobject.property来 ...
- JS调用模式
在js中,一共4中调用方式.需要注意的是,调用方式中,this的指向问题. 函数调用模式 this丢失,debug会提示未定义相应属性.按照规范,需要将this赋值给that let myObj = ...
- JS函数调用的四种方法
js的函数调用会免费奉送两个而外的参数就是 this 和 arguments .arguments是参数组,他并不是一个真实的数组,但是可以使用.length方法获得长度. 书上有说4中调用方式: 方 ...
- js函数调用的几种方法
js的函数调用会免费奉送两个而外的参数就是 this 和 arguments .arguments是参数组,他并不是一个真实的数组,但是可以使用.length方法获得长度. 书上有说4中调用方式: 方 ...
- js严格模式“use strict”
js的严格模式会放弃js中的一些不正规的写法,参考 http://www.cnblogs.com/God-Shell/p/3139329.html: 使用声明"use strict&quo ...
- JS 函数调用
Js函数调用的方式有如下几种情况: (1)具名函数直接调用 function foo() { } foo(); (2)匿名函数通过引用来调用 fooRef = function() { } fooRe ...
- JavaScript 方法调用模式和函数调用模式
这两天在读<JavaScript语言精粹>关于第4章函数调用的几种模式琢磨了半天. 这里就说一下方法调用模式跟函数调用模式. 方法调用模式: 当一个函数被保存为对象的一个属性时,我们称它为 ...
- js调试模式控制台输出信息
js调试模式控制台输出信息.console.log
随机推荐
- iptables 配置
#查看iptables现有规则 iptables -L -n #先允许所有,不然可能悲剧 iptables -P INPUT ACCEPT #清除所有默认规则 iptables -F #清除自定义规则 ...
- js快排与namespace
function quickSort(arr){ if(arr.length<=1){ return arr; } var num = Math.floor(arr.length/2); var ...
- JavaScript之JS实现动画效果
在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息,用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务的最佳工具.但是有一个应用领域是目前的CSS无能 ...
- ASP.NET动态生成图片样式的验证码
我们在设计用户登录模块时,经常会用到验证码,可以有效地防止黑客软件的恶意破解. 在此我就直接放置一个网页链接,以后用的时候可以当做备忘! 此连接中有多种验证码图片的样式可供参考. http://www ...
- JavaSE复习日记 : 接口
/* * 接口 * 引用数据类型: * 类,接口,数组; * * 接口是一种引用数据类型,可以看作是一个特殊的类,它存在的目的是为了解决没有多重继承引起的功能弱的问题而设计的,一个类只能有一个父类,但 ...
- 《JavaScript+DOM编程艺术》的摘要(五)-----添加insertAfter
在JS原生里面,没有提供insertAfter这个方法,不过我们可以利用appendChild.insertBefore.parentNode这些方法创建一个insertAfter方法,代码如下: f ...
- python strip()函数介绍
函数原型 声明:str为字符串,s为要删除的字符序列 str.strip(s) 删除str字符串中开头.结尾处,位于 s删除序列的字符 str.lstrip(s) 删除str ...
- Paragraph Vector在Gensim和Tensorflow上的编写以及应用
上一期讨论了Tensorflow以及Gensim的Word2Vec模型的建设以及对比.这一期,我们来看一看Mikolov的另一个模型,即Paragraph Vector模型.目前,Mikolov以及B ...
- “-Xmx1024m -Xms1024m -Xmn512m -Xss256k”——Java运行参数(转)
JVM的堆的内存, 是通过下面面两个参数控制的 -Xms 最小堆的大小, 也就是当你的虚拟机启动后, 就会分配这么大的堆内存给你 -Xmx 是最大堆的大小 当最小堆占满后,会尝试进行GC,如果GC之后 ...
- oracle在一个字符串中查找某个字符出现过几次
SELECT LENGTH(REGEXP_REPLACE(REPLACE('123,45,6,5', ',', '@'), '[^@]+', '')) COUNT FROM DUAL; 返回结果为 ...