js函数的四种调用方式以及对应的this指向
一、函数调用,此时this是全局的也就是window
1 var c=function(){
2 alert(this==window)
3 }
4 c()//true
二、方法调用

var myObj={
value:2,
inc:function(num){
alert(this.value+num);
}
}
myobject.inc(1); //结果3,因为this指向myObj

注意:内部匿名函数不属于当前对象的函数,因此this指向了全局对象window

var myObj={
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(myObj.getInfo());//[object window];

解决方法:

var myObj={
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 This=this;//先把当前的this指向存起来
return (function(){
return This.toString();
})();
}
}
alert(myObj.getInfo());//[Object:myObject {value:0}]

三、用new关键字来新建一个函数对象的调用,this指向被绑定到构造函数的实例上

var fn = function (status){
this.status = status;
}
fn.prototype.get_status = function(){
return this.status;
}
var test = new fn('my status');
alert(test.get_status);//my status,this指向test

四、apply/call调用

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

通过call和apply可以重新定义函数的执行环境,即this的指向,这对于一些应用当中是十分常用的。
js函数的四种调用方式以及对应的this指向的更多相关文章
- JS高级. 06 缓存、分析解决递归斐波那契数列、jQuery缓存、沙箱、函数的四种调用方式、call和apply修改函数调用方法
缓存 cache 作用就是将一些常用的数据存储起来 提升性能 cdn //-----------------分析解决递归斐波那契数列<script> //定义一个缓存数组,存储已经计算出来 ...
- Javascript中函数的四种调用方式
一.Javascript中函数的几个基本知识点: 1.函数的名字只是一个指向函数的指针,所以即使在不同的执行环境,即不同对象调用这个函数,这个函数指向的仍然是同一个函数. 2.函数中有两个特殊的内部属 ...
- JS函数的四种调用模式
函数在js中具有四种身份,分别为函数.方法.构造函数.apply或call调用 函数调用 函数调用模式中this指全局对象(window) var f1 = function() { alert ...
- JS面向对象函数的四种调用模式
函数的四种调用模式 概念 在 js 中,无论是函数, 还是方法, 还是事件, 还是构造器,...这些东西的本质都是函数 函数, 方法, 事件, 构造器,...只是所处的位置不同 这四种模式分别是 函数 ...
- JavaScript高级之函数的四种调用形式
主要内容 分析函数的四种调用形式 弄清楚函数中this的意义 明确构造函对象的过程 学会使用上下文调用函数 了解函数的调用过程有助于深入学习与分析JavaScript代码. 本文是JavaScript ...
- 函数的四种调用模式.上下文调用.call.apply
闭包:函数就是一个闭包,一个封闭的作用域; 返回函数,要返回多个函数就用一个对象封装一下, 立即执行函数+return 回调函数 JS动态创建的DOM,不会被搜索引 ...
- 同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)四种调用方式
1. 概念理解 在进行网络编程时,我们常常见到同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)四种调用方式: 同步/异步主要针对C端: 同步: ...
- 浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序
在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Li ...
- javascript中函数的四种调用模式详解
介绍函数四种调用模式前,我们先来了解一下函数和方法的概念,其实函数和方法本质是一样,就是称呼不一样而已.函数:如果一个函数与任何对象关系,就称该函数为函数.方法:如果一个函数作为一个对象属性存在,我们 ...
随机推荐
- 如何用纯 CSS 创作一台拍立得照相机
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YjYgey 可交互视频 此视频是可 ...
- 15.Yii2.0框架where单表查询
目录 新建控制器 HomeController.php 新建model article.php 新建控制器 HomeController.php D:\xampp\htdocs\yii\control ...
- QT入门学习笔记1:为什么要选QT及QT软件下载
为什么选择QT? Qt突出的优势: ◆ Qt 是基于 C++ 的一种语言扩展(Extention) C/C++ 目前还是一种很多人都在学习的语言. Qt的好处就在于Qt本身可以被称作是一种 C++ 的 ...
- python基础学习笔记——反射
对编程语言比较熟悉的朋友,应该知道“反射”这个机制.Python作为一门动态语言,当然不会缺少这一重要功能.然而,在网络上却很少见到有详细或者深刻的剖析论文.下面结合一个web路由的实例来阐述pyth ...
- kafka消息的可靠性
本文来自网易云社区 作者:田宏增 Kafka的高可靠性的保障来源于其健壮的副本(replication)策略.通过调节其副本相关参数,可以使得Kafka在性能和可靠性之间运转的游刃有余.Kafka从0 ...
- 80x86保护模式下IDT和中断调用过程分析
80x86保护模式下IDT和中断调用过程分析 1.中断描述符表(IDT),将每个异常或中断向量分别与它们的处理过程联系起来.与GDT和LDT类似,IDT也是由8字节长度的描述符组成.IDT空描述符的存 ...
- J2ee项目 编译依赖顺序
这儿有个帖子, 最后一个回复是: “我把我项目的libraries的"Order and Export"中的JRE与J2EE顺序换了一个问题解决”. 帖子地址: http://b ...
- [uiautomator篇] 如何获取apk的包名 博客模板
Android自动化学习笔记:获取APK包名的几种方法 ------------------------------------------------------------------------ ...
- java环境配置classpath和path变量的作用及设置方法
1.path:指定cmd中命令执行文件所在的路径.比如javac.java两个可执行文件在jdk的bin目录下,如果path值含有这个bin目录,在cmd下执行这两个命令的时候就会到path指定的目录 ...
- curl 设置头部
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 ...