http://blog.csdn.net/itpinpai/article/details/51004266

this关键字
本意:这个、这里的意思.
在JavaScript中是指每一个方法或函数都会有一个this对象,this对象是方法(或函数)在执行时的那个环境,也可以说是这个函数在那个作用域下运行的

一共有四种调用模式:方法调用模式(对象属性模式)、函数调用模式(就是普通的函数执行)、构造调用模式(应该叫实例上的方法模式更好)和apply调用模式。

一、方法调用模式
当它为一个对象上的方法的时候,this是当前这个对象

function age() { alert(this); }
var person = new Object();
person.age = age;
这里的this指向的就是创建的这个person对象

二、函数调用模式
当函数并非一个对象的属性时,那么它被当做一个函数来调用。此模式下this绑定到全局对象
var a = 1;
function fn() {
  console.log( this.a );
}
fn(); // 1 
fn函数中的this指定的是全局对象,全局对象是window

三、构造函数调用模式
在构造函数里的this是指向这个对象

function  Person( age ) {
  this.age = age;
}
var person = new Person(15);
console.log(person.age); // 15

四、apply调用模式
apply是把一个函数当成另一个对象的方法来调用

function age() {
  console.log(this.age);
}
function Person() {
  this.age = 18;
}
var person =  new Person();
age.apply(person); // 18

一.函数调用,此时this是全局的也就是window
  var c=function(){
   alert(this==window)
  }
  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的指向,这对于一些应用当中是十分常用的。
点击看结果

【转】JavaScript中的this关键字使用的四种调用模式的更多相关文章

  1. javascript中函数的四种调用模式详解

    介绍函数四种调用模式前,我们先来了解一下函数和方法的概念,其实函数和方法本质是一样,就是称呼不一样而已.函数:如果一个函数与任何对象关系,就称该函数为函数.方法:如果一个函数作为一个对象属性存在,我们 ...

  2. js中this的四种调用模式

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. JavaScript (JS) 函数补充 (含arguments、eval()、四种调用模式)

    1. 程序异常 ① try-catch语法    测试异常 try-catch语法代码如下: try { 异常代码;     try中可以承重异常代码, console.log(“try”)  出现异 ...

  4. javascript函数的四种调用模式及其this关键字的区别

    方法调用模式: 当一个函数被保存为对象的一个属性时,我们称它为一个方法.当一个方法被调用时,this被绑定到该对象. //方法调用模式 var myObject = { value: 0 , incr ...

  5. this与JavaScrip中的四种调用模式

    this是什么 方法调用模式 构造器调用模式 函数调用模式 apply/call模式 this是什么 —In most languages, ‘this’ is a reference to the ...

  6. ThinkPHP中U方法与url的四种访问模式

     ThinkPHP中U方法的用处主要是完成对url地址的组装,在模板中使用U方法而不是固定写死URL地址的好处在于,一旦你的环境变化或者参数设置改变,你不需要更改模板中的任何代码.在模板中的调用格式需 ...

  7. Javascript四种调用模式中的this指向

    第一种:函数直接调用执行的模式 function add(a,b){ console.log(this); return a+b; } add(,) //this===window 这里的this指向 ...

  8. 关于javascript中this 指向的4种调用模式

    this指向问题绝对可以排js 的top 5最难和最重点的问题,初学者常常搞不清楚this指向哪里,特别是学过java和c#的人,想当年俺也迷糊了好久,直到遇到蝴蝶书,主要是因为js和主流的面向对象语 ...

  9. JavaScript高级之函数的四种调用形式

    主要内容 分析函数的四种调用形式 弄清楚函数中this的意义 明确构造函对象的过程 学会使用上下文调用函数 了解函数的调用过程有助于深入学习与分析JavaScript代码. 本文是JavaScript ...

随机推荐

  1. C++primer学习笔记(一)——Chapter 3

    3.1 Namespace using Declarations 1.因为C++里有名字空间的定义,例如我们使用cin的时候必须写成std::cin,如果就用一次还是可以接受的,但是如果一直都这样,那 ...

  2. MATLAB学习笔记(二)——主要是MATLAB的矩阵知识

    PS:主要是讲解矩阵的相应的实现方法,其实MATLAB的很大一部分的优势,就是集成了矩阵级别的运算,并以此为特点,可以进行多维空间上的验证. 让我们懂得了原来线性代数如此有用= - =. (一)MAT ...

  3. 手持PDA智能条码扫描RFID打印POS机

    手持PDA智能条码扫描RFID打印POS机   一.系统稳定性: 1.硬件稳定性: 采用了华为海思(国内唯一可以媲美全球顶级的CPU+射频方案厂商,可以和英伟达等一决高下)手机方案,CPU+射频浑然一 ...

  4. Open Xml SDK Word模板开发最佳实践(Best Practice)

    1.概述 由于前面的引文已经对Open Xml SDK做了一个简要的介绍. 这次来点实际的——Word模板操作. 从本质上来讲,本文的操作都是基于模板替换思想的,即,我们通过替换Word模板中指定元素 ...

  5. BZOJ1086 [SCOI2005]王室联邦(树分块)

    把树的结点分块,块内结点连通且个数[b,3b]. 一遍DFS,维护一个栈,设置一个虚拟栈底以保证连通,递归返回时判断栈内元素个数是否大于等于b,是则划分为一个块,最后剩下的与最后一个块划分在一起. h ...

  6. LightOJ1360 Skyscraper(DP)

    题目大概是,一个数轴上n个线段,每个线段都有起始坐标.长度和权值,问从中取出没有公共交点的线段的最大权和. 取k次是个经典的最小费用最大流问题,不过这题建容量网络有20W个点,离散化最多也要6W个点, ...

  7. ios ASIHttpLib 同步请求和异步请求

    1.同步请求可以从因特网请求数据,一旦发送同步请求,程序将停止用户交互,直至服务器返回数据完成,才可以进行下一步操作, 2.异步请求不会阻塞主线程,而会建立一个新的线程来操作,用户发出异步请求后,依然 ...

  8. 【UR #4】元旦三侠的游戏(博弈论+记忆化)

    http://uoj.ac/contest/6/problem/51 题意:给m($m \le 10^5$)个询问,每次给出$a, b(a^b \le n, n \le 10^9)$,对于每一组$a, ...

  9. HDU 4679 Terrorist’s destroy

    如果不在最长路的边,那么肯定是w*最长路. 如果在最长路,那么把最长路分成两段,左边树的最长路就是左段+左边点的次短路(不包含最长路上的点的最长路) ,右边同理. 还有就是更新,经过左端点的最长路,不 ...

  10. 配置当前用户使用豆瓣pip源

    配置当前用户使用豆瓣pip源   mkdir ~/.pip/ cat ~/.pip/pip.conf [global] index-url = http://pypi.douban.com/simpl ...