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中函数的四种调用模式详解
介绍函数四种调用模式前,我们先来了解一下函数和方法的概念,其实函数和方法本质是一样,就是称呼不一样而已.函数:如果一个函数与任何对象关系,就称该函数为函数.方法:如果一个函数作为一个对象属性存在,我们 ...
随机推荐
- mysql 从陌生到熟练之----数据库备份恢复的实现方法
mysql 从陌生到熟练之----数据库备份恢复的实现方法 MySQL数据库使用命令行备份|MySQL数据库备份命令 例如: 数据库地址:127.0.0.1 数据库用户名:root 数据库密码:roo ...
- presenting view controller
Present ViewController详解 Present ViewController Modally 一.主要用途 弹出模态ViewController是IOS变成中很有用的一个技术,UIK ...
- NSRegularExpression 使用
需求: // 后台返回的某个实体 reminder = { cost = , type = , template = 可免费做某事{time}分钟,超过将按{cost}K元收费, time = } t ...
- Git - revert详解
git revert 撤销 某次操作,此次操作之前和之后的commit和history都会保留,并且把这次撤销作为一次最新的提交 * git revert HEAD ...
- SEO 优化
1.什么是SEO优化: 简单的来说就是了解搜索引擎的排名规则,投机所好,让我们的网站在搜索引擎上得到靠前的排名,获取更多流量的一种方式. 2.SEO优化-衡量标准 关键词的排名--核心关键词的效果 收 ...
- Juicer 轻量级javascript模板引擎
juicer是一个javascript轻量级模板引擎. 使用方法 编译模板并根据数据立即渲染出结果 1 juicer(tpl, data); 仅编译模板暂不渲染,返回一个可重用的编译后的函数 1 va ...
- django知识分支_1
django知识分支 1.Cookie工作流程: 浏览器向服务器发出请求,服务器接收到浏览器的请求进行处理,服务器设置一个cookie发送给浏览器,浏览器将cookie保存,当需要再次登录的时候,浏览 ...
- redis的字符串操作以及在django中的使用
redis ----redis.MongoDB : 非关系型数据库 redis 存储在内存中 MongoDB 存储在硬盘中 l 简介 redis是一个key-value存储系统 , 支持持久化 ...
- redis集群监控之Redis-monitor部
为了对以后有可能面临的redis集群监控做准备,这两天在准备这方面的事情,现在将其中的过程记录一下. 首先是“Ronney-Hua”的这篇文章对三中开源监控软件做了对比 文章地址:https://bl ...
- leetcode-10-basic
35. Search Insert Position Given a sorted array and a target value, return the index if the target i ...