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. Hadoop开发中,如何开启、关闭控制台打印调试信息

    第一种方法: 修改$HADOOP_CONF_DIR/log4j.properties文件 hadoop.root.logger=ALL,console 第二种方法 开启:export HADOOP_R ...

  2. spark streaming中使用flume数据源

    有两种方式,一种是sparkstreaming中的driver起监听,flume来推数据:另一种是sparkstreaming按照时间策略轮训的向flume拉数据. 最开始我以为只有第一种方法,但是尼 ...

  3. mvc-3模型和数据(2)

    寻址引用 源代码现存的问题:当保存或通过find()查找记录时,所返回的实例并没有复制一份,因此对任何属性的修改都会影响原始资源:这里我们只想当调用update()方法时才会修改资源 //由于Mode ...

  4. Ada语言基础

    前天是程序员节,CodeForces上举办了一场比赛,要求必须使用ADA语言提交.顿时虐爆了我这个只知道pascal,C,BASIC这3种语系的菜.今天闲着看了看这种语言,一看才知道竟然是美国军方专用 ...

  5. CentOS6.4 配置DNS服务器

    1.安装bind yum install -y bind bind-chroot bind-utis 2.配置named.conf [root@dns /]# vi /etc/named.conf 注 ...

  6. 【wikioi】1269 匈牙利游戏(次短路+spfa)

    http://www.wikioi.com/problem/1269/ 噗,想不到.. 次短路就是在松弛的时候做下手脚. 设d1为最短路,d2为次短路 有 d1[v]>d1[u]+w(u, v) ...

  7. event.keycode大全(javascript)

    keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear keycode 13 = Enter keycode 16 ...

  8. Toll-Free Bridge

    引 在深入了解桥接机制的时候看到一篇好文,虽然已经很久远,但是忍不住看了好几遍,心中诸多不解一扫而光.在此放上链接: 原文:http://ridiculousfish.com/blog/posts/b ...

  9. sql中写标量函数生成大写拼音首字母

    USE [StockManageSystemV2] GO /****** Object: UserDefinedFunction [dbo].[PinYin] Script Date: 2016-08 ...

  10. IOS 开发的官方文档链接

    下面这些文章都是苹果官方的开发文档,非常有用: iOS Developer Library https://developer.apple.com/library/ios/navigation/ 总入 ...